1

我需要像这样自定义我的 HTML5 音频控件：

在此处输入图像描述

任何人都可以解决我的问题吗？

这是我到目前为止所拥有的：

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>
4

1 回答 1

1

我们被迫使用您所展示的每个浏览器的特殊 css 来修改按钮方面。这是内置在浏览器中的。

自己制作按钮并用js控制会更容易（现在很容易，不需要插件）。onclick="player.play()"例如。

或者我们可以使用CSS 过滤器来破解外观。它不会改变外观但会添加一些效果，请尝试将鼠标悬停在按钮上。

例如，按钮和一些细节在同一个绿色上，通过hue-filter获得。它实际上会在所有浏览器上呈现绿色。

如果默认为白色等，反相滤镜将显示为黑色。

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 过滤器可以做什么。

在此处输入图像描述

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">

于 2018-05-03T05:38:34.870 回答