对video标签下载按钮隐藏等几点补充说明

1.正常情况下,一个video标签应该有 “暂停/播放”、“进度条”、“播放进度/播放总时长”、“声音大小控制”、“全屏/非全屏”、“下载按钮”,这些都应该有,但有时候我们需要隐藏一些按钮,例如将下载按钮隐藏等

(1)正常状态:(超出部分,如果不给隐藏,则会显示)

(2)如果给了隐藏,就不会展示

2.代码部分

(1)html

<div class="video_wrap">			
	<video src="http://vjs.zencdn.net/v/oceans.mp4" width="800" height="240" controls="controls" poster="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/1.jpg"></video>
</div>

2.css

*{
	margin: 0;
	padding: 0;
}
.video_wrap{
	width: 800px;
	height: 240px;
	background-color: orange;
}
/*如果没有下边的超出隐藏,这个好像并没有啥作用*/
video::-internal-media-controls-download-button {
    display:none;
}
/*超出隐藏*/			
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}			
video::-webkit-media-controls-panel {
    width: calc(100% + 30px); 
}
/*把声音,全屏,下载都超出隐藏,那么只剩前边一部分了*/
video::-webkit-media-controls-panel {
  /*width: calc(125%);*/
}

3.对于video要测试快进的话需要用到网络资源,本地资源不可以实现。

猜你喜欢

转载自blog.csdn.net/hangge0111/article/details/81113901
今日推荐