h5 video隐藏下载按钮

Posted 十月芬芳

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了h5 video隐藏下载按钮相关的知识,希望对你有一定的参考价值。

今天在做h5的视频播放,但是不需要下载按钮:

一般浏览器不会出现下载按钮,,只有谷歌浏览器会(低版本的右下角没有下载按钮,比如53.0版本,我的谷歌浏览器是53.0版本) 。用同事电脑上的58.0版本测试有下载按钮

如果你的谷歌浏览器版本是54.0-57.0之间,并且也出现了视频右下角有按钮的情况都可以使用下面的代码。

解决方法:代码如下:
video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); 
}

 

以上是关于h5 video隐藏下载按钮的主要内容,如果未能解决你的问题,请参考以下文章

html5 中的 video 如何隐藏底部的全屏按钮或控制条

怎样让H5的audio显示下载按钮?

H5新属性audio音频和 video视频的控制

IPhone微信H5用Video标签播放不了视频

如何在h5中添加视频?

在移动端怎么将HTML5中的video标签的控件去掉或者隐藏