html5 video标签controlslist的具体使用
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
HTML5 提供了内置的视频播放控件，其中 video controlslist 是其中一个很有用的属性。video controlslist 属性可以用于告诉浏览器在视频播放过程中应该显示哪些默认的用户界面控件。下面我们将从几个方面来介绍 video controlslist 的详细使用。
一、启用videocontrolslist
video controlslist 属性可以应用于 video 元素，使用它需要简单的在 HTML 代码中的 video 标签中添加 controlslist 属性，设置其值为显示的控件列表。默认情况下，video 元素的 controlslist 属性的值为empty。
<video src="http://9i0i.com/pic.php?p=example.mp4" controls controlslist="nodownload"></video>
上面的代码显示了 controlslist 属性的一个例子，nodownload 属性值告诉浏览器在显示控件时不显示“下载”按钮。
二、控制 video controlslist 的显示
控制 video controlslist 的显示是非常简单的，只需要设置 videco controlslist CSS 伪类的 display 属性即可。该属性默认值为 “block”，在下面的例子中，我们设置为 “none”。这会将 video controlslist 完全隐藏起来，不显示任何控件列表。
video::-webkit-media-controls {
display:none !important;
}
video::-webkit-media-controls-enclosure {
display:none !important;
}
video::-webkit-media-controls-play-button {
display:none !important;
}
video::-webkit-media-controls-timeline {
display:none !important;
}
video::-webkit-media-controls-mute-button {
display:none !important;
}
video::-webkit-media-controls-volume-slider {
display:none !important;
}
video::-webkit-media-controls-current-time-display {
display:none !important;
}
video::-webkit-media-controls-time-remaining-display {
display:none !important;
}
video::-webkit-media-controls-fullscreen-button {
display:none !important;
}三、控制 video controlslist 的布局
video controlslist 的布局控制通常使用 CSS 来完成。在下面的例子中，我们使用了两种不同的 CSS 样式。第一个样式定义了 video 整个控件列表的样式，第二个样式定义了进度条控件的样式。
video::-webkit-media-controls {
background-color: rgba(255, 255, 255, 0.15);
color: #fff;
font-family: Arial, sans-serif;
text-shadow: 0 0 1px #000;
}
video::-webkit-media-controls-timeline-progress-bar {
background-color: red;
}上面的代码将 video controlslist 设置为了白色半透明背景和红色进度条。
四、控制 video controlslist 的内容
video controlslist 的内容可以轻松地通过 JavaScript 来修改。下面的例子演示了如何使用原生 JavaScript 访问 video 元素和它的相关控件，从而修改这些控件的文本内容。
var video = document.getElementsByTagName('video')[0];
var controls = video.getElementsByTagName('div');
for (var i = 0; i < controls.length; i++) {
var control = controls[i];
switch (control.className) {
case 'currenttime':
control.innerHTML = '当前时间';
break;
case 'playpause':
control.innerHTML = '播放/暂停';
break;
case 'remainingtime':
control.innerHTML = '剩余时间';
break;
case 'mute':
control.innerHTML = '静音/取消静音';
break;
case 'volumelevel':
control.innerHTML = '音量';
break;
case 'timeline':
control.innerHTML = '时间轴';
break;
case 'fullscreen':
control.innerHTML = '全屏';
break;
}
}上面的代码将 video controlslist 中的一些控件的文本内容进行了修改。
五、CSS Hook
除上述方法外，我们还可以使用 CSS Hook 来控制 video controlslist 的每个方面。在下面的例子中，我们使用 CSS Hook 对视频控件进行了一些更改。
video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-volume-mute-button {
background-color: rgba(0,0,0,0.4);
}
video::-webkit-media-controls-volume-slider {
background-color: rgba(255,255,255,0.7);
-webkit-appearance: none;
}
video::-webkit-media-controls-volume-slider::-webkit-slider-thumb {
background-image: -webkit-linear-gradient(top, #b2b2b2 0%, #fff 100%);
border: 1px solid #ccc;
border-radius: 2px;
height: 24px;
width: 10px;
}上面的代码使用 CSS Hook 对音量控件进行了样式更改（音量控件的背景变为半透明黑色，滑块通过渐变实现亮度变化等）。
六、结论
通过以上对 video controlslist 的详细阐述，我们可以发现它是一个功能强大的属性，可以帮助我们控制浏览器在视频播放过程中应该显示哪些默认的用户界面控件，而且它的使用非常灵活和可定制性强。我们可以根据实际需要在页面中进行设置，以便更好地控制视频播放的用户体验。
到此这篇关于html5 video标签controlslist的具体使用的文章就介绍到这了,更多相关html5 video controlslist内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
在html5页面中嵌入视频的时候页面中只显示声音却不显示图像，本文主要介绍了HTML5 video播放有声音无图像的解决方法，具有一定的参考价值，感兴趣的可以了解一下2024-02-21- HTML5中的video标签用于播放视频文件的，本文介绍了Html5 video 标签 src 用数据流方式播放视频，具有一定的参考价值，感兴趣的可以了解一下2023-09-27
解决html5中的video标签ios系统中无法播放使用的问题
这篇文章主要介绍了解决html5中的video标签ios系统中无法播放使用的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-10- 这篇文章主要介绍了HTML5 video循环播放多个视频的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-08-06
- 这篇文章主要介绍了HTML5 video进入全屏和退出全屏的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编2020-07-28
这篇文章主要介绍了html5自定义video标签的海报与播放按钮功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-04- 这篇文章主要介绍了详解Html5中video标签那些属性和方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2019-07-01
最新评论