大白话标签的controlsList属性,它能实现哪些功能?
<video>
标签的 controlsList
属性是什么
<video>
标签是 HTML 里用来在网页上播放视频的标签。controlsList
属性就像是一个“控制器筛选器”,它能让你控制视频播放器上显示哪些控制按钮。在普通情况下,视频播放器会有播放、暂停、音量调节、全屏等按钮,而 controlsList
属性可以让你决定哪些按钮不显示出来。
controlsList
属性能实现的功能
controlsList
属性有几个可选的值,每个值都能控制特定的控制按钮是否显示:
nodownload
:这个值可以让视频播放器上的下载按钮不显示。有时候,视频作者不想让用户轻易下载视频,就可以用这个值来隐藏下载按钮。nofullscreen
:使用这个值后,视频播放器上的全屏按钮就不会显示了。如果视频不需要在全屏模式下播放,或者出于某些设计考虑,就可以隐藏全屏按钮。noremoteplayback
:这个可以隐藏远程播放的按钮。远程播放一般是指通过一些设备(比如智能电视、投屏设备)把视频投到其他屏幕上播放。如果不需要这个功能,就可以把对应的按钮隐藏起来。
示例代码及解释
html"><!DOCTYPE html>
<html lang="en"><head><!-- 设置字符编码为 UTF - 8 --><meta charset="UTF-8"><!-- 让页面在移动设备上正确显示 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 给网页设置标题 --><title>Video controlsList 属性示例</title>
</head><body><!-- 创建一个视频播放器 --><!-- src 属性指定视频文件的路径 --><!-- controls 属性让视频播放器显示控制按钮 --><!-- controlsList 属性设置为 "nodownload nofullscreen",表示隐藏下载按钮和全屏按钮 --><video src="your-video-file.mp4" controls controlsList="nodownload nofullscreen"><!-- 如果浏览器不支持 <video> 标签,会显示这段提示信息 -->您的浏览器不支持播放此视频。</video>
</body></html>
代码详细解释
<video>
标签:这是创建视频播放器的核心标签。src
属性:它就像是一个“地址指针”,告诉浏览器要播放的视频文件在哪里。你需要把your-video-file.mp4
替换成你实际的视频文件路径。controls
属性:这个属性就像是一个“开关”,打开它之后,视频播放器上就会显示出一些常用的控制按钮,比如播放、暂停、音量调节等。controlsList
属性:在这里设置为"nodownload nofullscreen"
,这意味着在视频播放器上,下载按钮和全屏按钮都不会显示出来。多个值之间用空格分隔。<video>
标签内的文本:如果用户使用的浏览器不支持<video>
标签,那么就会显示“您的浏览器不支持播放此视频。”这段提示信息。
通过 controlsList
属性,你可以根据自己的需求定制视频播放器的控制按钮,让用户体验更加符合你的设计意图。