您的位置:首页 > 财经 > 金融 > 微信开发社区平台_郑州中原区最新疫情_aso苹果关键词优化_视频广告联盟平台

微信开发社区平台_郑州中原区最新疫情_aso苹果关键词优化_视频广告联盟平台

2025/3/22 16:39:45 来源:https://blog.csdn.net/qq_37212162/article/details/146351398  浏览:    关键词:微信开发社区平台_郑州中原区最新疫情_aso苹果关键词优化_视频广告联盟平台
微信开发社区平台_郑州中原区最新疫情_aso苹果关键词优化_视频广告联盟平台

大白话标签的controlsList属性,它能实现哪些功能?

<video> 标签的 controlsList 属性是什么

<video> 标签是 HTML 里用来在网页上播放视频的标签。controlsList 属性就像是一个“控制器筛选器”,它能让你控制视频播放器上显示哪些控制按钮。在普通情况下,视频播放器会有播放、暂停、音量调节、全屏等按钮,而 controlsList 属性可以让你决定哪些按钮不显示出来。

controlsList 属性能实现的功能

controlsList 属性有几个可选的值,每个值都能控制特定的控制按钮是否显示:

  1. nodownload:这个值可以让视频播放器上的下载按钮不显示。有时候,视频作者不想让用户轻易下载视频,就可以用这个值来隐藏下载按钮。
  2. nofullscreen:使用这个值后,视频播放器上的全屏按钮就不会显示了。如果视频不需要在全屏模式下播放,或者出于某些设计考虑,就可以隐藏全屏按钮。
  3. noremoteplayback:这个可以隐藏远程播放的按钮。远程播放一般是指通过一些设备(比如智能电视、投屏设备)把视频投到其他屏幕上播放。如果不需要这个功能,就可以把对应的按钮隐藏起来。

示例代码及解释

<!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>

代码详细解释

  1. <video> 标签:这是创建视频播放器的核心标签。
  2. src 属性:它就像是一个“地址指针”,告诉浏览器要播放的视频文件在哪里。你需要把 your-video-file.mp4 替换成你实际的视频文件路径。
  3. controls 属性:这个属性就像是一个“开关”,打开它之后,视频播放器上就会显示出一些常用的控制按钮,比如播放、暂停、音量调节等。
  4. controlsList 属性:在这里设置为 "nodownload nofullscreen",这意味着在视频播放器上,下载按钮和全屏按钮都不会显示出来。多个值之间用空格分隔。
  5. <video> 标签内的文本:如果用户使用的浏览器不支持 <video> 标签,那么就会显示“您的浏览器不支持播放此视频。”这段提示信息。

通过 controlsList 属性,你可以根据自己的需求定制视频播放器的控制按钮,让用户体验更加符合你的设计意图。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com