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

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

作者: celineWong7 | 来源:发表于2022-11-09 09:41 被阅读0次

    1. 背景

    <audio src="C:\Users\wangxl5\Pictures\V-143360-BCE1F72B.mp4" controls=""></audio>
    

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


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

    2. 遇到问题

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

    3. 解决办法

    通过controlsList属性,配置菜单,具体如下:

    <audio src="C:\Users\wangxl5\Pictures\V-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样式设置小结

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/tkzgtdtx.html