javascript - HTML5 默认音频播放器 CSS 样式

Question

我正在尝试使用 CSS 编辑默认音频控件中播放按钮的背景颜色(使其具有 100 透明度)。

已经试过了:

audio::-webkit-media-controls-play-button {
  background-color: rgba(0, 0, 0, 0.99);
}

还有这个:

audio::-webkit-media-controls-play-button {
  background-color: rgba(0, 0, 0, 1);
}

我唯一得到的是一个黑色方 block ，播放按钮的图像应该是这个方 block 。

Answer 1

您使用的样式选择器和样式有效，但是，由于它是基于 -webkit- 的，因此仅适用于基于 webkit 的浏览器，请在 Chrome 中尝试您的代码，我尝试了以下方法，它适用于我:

<style>
audio::-webkit-media-controls-play-button {
  background-color: rgba(230, 230, 255, 1);
}
</style>

默认情况下，HTML5 音频/视频播放器显示浏览器的默认控件。您可以选择通过 CSS 和 Javascript 自定义它们，或者使用@Jainam 建议的类似 jPlayer 的东西，或者您可以使用:MediaElement.js或 audio.js

有大量的 jQuery 插件可以满足您的需求，如果您只想显示自定义的音频播放器，我建议您使用其中之一。

您可以查看以下示例来为您自定义音频播放器:http://authenticstyle.co.uk/html5-audio-player/