audo标签——如何隐藏浏览器默认播放控件尾部的三个点

1. 背景

代码语言：javascript复制

<audio src="C:Userswangxl5PicturesV-143360-BCE1F72B.mp4" controls=""></audio>

在谷歌浏览器上，展示audio音频控件时，一般都会有后面三个点，这个是音频控件扩展功能的交互按钮。 点击之后，一般会显示出菜单，比如下图的“播放速度”。

注意：这个扩展功能和浏览器版本有关系，有的版本默认没有三个点，有些版本点击三个点，显示的菜单时“下载”。

2. 遇到问题

在Qt-webengine渲染的audio标签中，菜单功能“下载”不生效，所以希望直接隐藏菜单功能，即隐藏这三个点按钮交互。

3. 解决办法

通过controlsList属性，配置菜单，具体如下：

代码语言：javascript复制

<audio src="C:Userswangxl5PicturesV-143360-BCE1F72B.mp4" controls="" controlsList="nodownload noplaybackrate" ></audio>

其中： nodownload ：不显示下载功能 noplaybackrate：不显示播放速度功能。 是否还有其它选项，有待进一步研究。

4. 其他audio扩展

如果是要改变音频控件样式，可以使用CSS样式 audio::-webkit-media-controls-，具体详见参考文章2.

参考文章：

1. HTML音频控件-如何从默认音频播放器中删除3个点？
2. html5 audio 标签 css样式设置小结

编程算法 腾讯云开发者社区 css

0 人点赞