HTML5 提供了内置的视频播放控件，其中 video controlslist 是其中一个很有效的属性。video controlslist 属性可以用于告诉浏览器在视频播放过程中应该表现哪些默认的用户界面控件。下面我们将从几个方面来先容 video controlslist 的具体利用。 一、启用videocontrolslistvideo controlslist 属性可以应用于 video 元素，利用它须要简单的在 HTML 代码中的 video 标签中添加 controlslist 属性，设置其值为表现的控件列表。默认情况下，video 元素的 controlslist 属性的值为empty。 [code]<video src="example.mp4" controls controlslist="nodownload"></video>[/code]上面的代码表现了 controlslist 属性的一个例子，nodownload 属性值告诉浏览器在表现控件时不表现“下载”按钮。 二、控制 video controlslist 的表现控制 video controlslist 的表现是非常简单的，只须要设置 videco controlslist CSS 伪类的 display 属性即可。该属性默认值为 “block”，在下面的例子中，我们设置为 “none”。这会将 video controlslist 完全隐蔽起来，不表现任何控件列表。 [code]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; }[/code]三、控制 video controlslist 的结构video controlslist 的结构控制通常利用 CSS 来完成。在下面的例子中，我们利用了两种差别的 CSS 样式。第一个样式定义了 video 整个控件列表的样式，第二个样式定义了进度条控件的样式。 [code]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; }[/code]上面的代码将 video controlslist 设置为了白色半透明背景和赤色进度条。 四、控制 video controlslist 的内容video controlslist 的内容可以轻松地通过 JavaScript 来修改。下面的例子演示了如何利用原生 JavaScript 访问 video 元素和它的相关控件，从而修改这些控件的文本内容。 [code]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; } }[/code]上面的代码将 video controlslist 中的一些控件的文本内容进行了修改。 五、CSS Hook除上述方法外，我们还可以利用 CSS Hook 来控制 video controlslist 的每个方面。在下面的例子中，我们利用 CSS Hook 对视频控件进行了一些更改。 [code]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; }[/code]上面的代码利用 CSS Hook 对音量控件进行了样式更改（音量控件的背景变为半透明玄色，滑块通过渐变实现亮度变革等）。 六、结论通过以上对 video controlslist 的具体论述，我们可以发现它是一个功能强大的属性，可以资助我们控制浏览器在视频播放过程中应该表现哪些默认的用户界面控件，而且它的利用非常灵活和可定制性强。我们可以根据现实须要在页面中进行设置，以便更好地控制视频播放的用户体验。 到此这篇关于html5 video 标签 controlslist 详解的文章就先容到这了,更多相关html5 video 标签 controlslist内容请搜索脚本之家从前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！ 来源：https://www.jb51.net/html5/936711.html 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-1 20:13 , Processed in 0.030473 second(s), 18 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
