美文网首页
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标签——如何隐藏浏览器默认播放控件尾部的三个点

    1. 背景 在谷歌浏览器上,展示audio音频控件时,一般都会有后面三个点,这个是音频控件扩展功能的交互按钮。点击...

  • h5 video标签

    video标签用于视频播放的常用属性controls:规定浏览器应该为视频提供播放控件。controlsList...

  • H5新标签audio&video

    H5新标签audio&video audio controls显示播放器页面(默认隐藏) autoplay自动播放...

  • video标签以及视频播放器的一些实现

    video标签的属性: autoplay:自动播放 controls:向用户显示浏览器自带的控件 width:视频...

  • 音视频播放

    音频播放标签 视频播放标签 属性: autoplay 自动播放 loop 循环播放 controls 是否显示默认...

  • html5 学习第三天

    HTML5Video(视频) 您的浏览器不支持Video标签。 元素提供了 播放、暂停和音量控件来控制视频。...

  • 视频

    标签:videoautoplay 自动播放controls 显示控件loop ...

  • input type="file"的那些事儿

    1、默认file标签很难看,而且每个浏览器下都有很大差距。因此我们基本都把真正的file标签给隐藏,然后创建一个标...

  • 音频

    audio标签:autoplay 自动播放controls 显示控件l...

  • 第八节:多媒体元素

    多媒体元素 video 视频audio 音频 video 默认情况是不显示播放控件的controls:控制控件...

网友评论

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

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