Как настроить элементы управления аудио HTML5 без использования JavaScript (Pure CSS) - PullRequest
Новая
       38

Как настроить элементы управления аудио HTML5 без использования JavaScript (Pure CSS)

0 голосов
/ 03 мая 2018

Мне нужно настроить звуковой элемент управления HTML5 следующим образом:

enter image description here

Может ли кто-нибудь решить мою проблему?

Вот что у меня есть: 

audio::-webkit-media-controls-panel
{
 background-color:powderblue;
}
// audio::-webkit-media-controls-mute-button
// audio::-webkit-media-controls-play-button
// audio::-webkit-media-controls-timeline-container
// audio::-webkit-media-controls-current-time-display
// audio::-webkit-media-controls-time-remaining-display
// audio::-webkit-media-controls-enclosure
// audio::-webkit-media-controls-timeline 
// audio::-webkit-media-controls-volume-slider-container 
// audio::-webkit-media-controls-volume-slider 
// audio::-webkit-media-controls-seek-back-button 
// audio::-webkit-media-controls-seek-forward-button 
// audio::-webkit-media-controls-fullscreen-button 
// audio::-webkit-media-controls-rewind-button 
// audio::-webkit-media-controls-return-to-realtime-button 
// audio::-webkit-media-controls-toggle-closed-captions-button 


<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
</audio>

1 Ответ

0 голосов
/ 03 мая 2018

Мы вынуждены использовать для каждого браузера специальные CSS, как вы показали, чтобы изменить аспекты кнопки. Это встроено в браузер.

Было бы проще сделать кнопку самостоятельно и управлять ею с помощью js (сейчас это очень просто, плагин не нужен). onclick="player.play()" например.

Или мы можем взломать аппарат с фильтрами CSS на них. Это не изменит аспект, но добавит некоторые эффекты, попробуйте навести курсор мыши на кнопку.

Например, кнопка и некоторые детали одного и того же зеленого цвета, полученные с помощью фильтра оттенка . На самом деле он будет отображаться зеленым во всех браузерах.

Инвертирующий фильтр будет отображаться черным, если по умолчанию используется белый и т. Д. 

audio {
  filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(46deg) invert(12%);
  }
<audio 
       controls
       src="http://www.ektoplazm.com/mp3/cybered-and-opsy-children-of-paradise.mp3"></audio>

Посмотрите этот скрипт, который я использую, чтобы увидеть, что можно сделать с фильтрами CSS .

enter image description here

https://codepen.io/Nico_KraZhtest/pen/bWExEB

Редактировать: См. Следующее простое базовое решение javascript: нажатие на изображение запустит (скрытый) плеер ... 

audio {width:0px}
img {cursor:pointer}
<audio 
       id="player"
       controls
       src="http://www.ektoplazm.com/mp3/cybered-and-opsy-children-of-paradise.mp3"></audio>

<img onclick="player.play()" src="https://i.stack.imgur.com/6pUED.png">
...