没有音量滑块或静音按钮的音频标签？

Question

我使用

创建了一个没有下载按钮的音频标签

<audio controls controlslist="nodownload">

这是成功的。

现在，如何删除播放声音时出现的音量滑块（加上静音按钮）？

我试过了

<audio controls controlslist="novolume">

运气不好。

Answer 1

HTML5 audio 标签只有 controls 或什么都没有，每个浏览器的显示略有不同。但是没有办法只显示部分控件。

要实现这一点，您必须使用像 jPlayer (http://jplayer.org/) 这样的 javascript/jQuery 播放器，它允许对 UI 进行完整的单独配置（但仍然在后台使用 HTML5）。

Answer 2

HTML5 standard中的新controlslist属性只能接受三种设置：

"nodownload", "nofullscreen" and "noremoteplayback".

除此之外还有none控制特定控件。唯一（当前）的解决方法是为音频对象构建您自己的自定义界面，并仅提供您希望用户通过 UI.

访问的控件

该属性目前仅在 Chrome 和 Opera 以及 Android 中受支持。这当然是为音频构建自定义 UI 的另一个动机（或使用 Johannes 建议的库）。

Answer 3

试试这个：

audio::-webkit-media-controls-mute-button {
    display: none !important;
}

audio::-webkit-media-controls-volume-slider {
    display: none !important;
}

没有音量滑块或静音按钮的音频标签？

Audio tag without a volume slider or mute button?

html

google-chrome

html5-audio