<video>标签的controlsList属性,它能实现哪些功能?

news/2025/3/19 16:33:08/

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

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

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

controlsList 属性能实现的功能

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

  1. nodownload:这个值可以让视频播放器上的下载按钮不显示。有时候,视频作者不想让用户轻易下载视频,就可以用这个值来隐藏下载按钮。
  2. nofullscreen:使用这个值后,视频播放器上的全屏按钮就不会显示了。如果视频不需要在全屏模式下播放,或者出于某些设计考虑,就可以隐藏全屏按钮。
  3. 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>

代码详细解释

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

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


http://www.ppmy.cn/news/1580361.html

相关文章

爬虫(requsets)笔记

一、request_基本使用 pip install requests -i https://pypi.douban.com/simple 一个类型六个属性 r.text 获取网站源码 r.encoding 访问或定制编码方式r.url 获取请求的urlr.content 响应的字节类型r.status_code 响应的状态码r.headers 响应的头信息 import requestsur…

大语言模型的压缩技术

尽管人们对越来越大的语言模型一直很感兴趣&#xff0c;但MistralAI 向我们表明&#xff0c;规模只是相对而言的&#xff0c;而对边缘计算日益增长的兴趣促使我们使用小型语言获得不错的结果。压缩技术提供了一种替代方法。在本文中&#xff0c;我将解释这些技术&#xff0c;并…

基于Spring Boot的项目申报系统的设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…

STM32---FreeRTOS任务通知

一、简介 1、任务通知简介 任务通知&#xff1a;用来通知任务的&#xff0c;任务控制块中的结构体成员变量 ulNotifiedValue就是这个通知值。 使用队列、信号量、事件标志组时都需另外创建一个结构体&#xff0c;通过中间的结构体进行间接通信&#xff01; 使用任务通知时&a…

python 提取视频中的音频

在Python中提取视频中的音频&#xff0c;你可以使用moviepy库&#xff0c;这是一个非常强大且易于使用的库&#xff0c;专门用于视频编辑。以下是如何使用moviepy来提取视频中的音频的步骤&#xff1a; 安装moviepy 首先&#xff0c;你需要安装moviepy。你可以通过pip安装它&a…

【数据库】掌握MySQL事务与锁机制-数据一致性的关键

在数据库的世界里&#xff0c;数据就是一切。而确保数据的准确性和一致性&#xff0c;则是数据库系统的核心任务之一。想象一下&#xff0c;如果没有合适的机制&#xff0c;当多个用户同时试图修改同一条数据时&#xff0c;会发生什么&#xff1f; chaos&#xff08;混乱&#…

批量压缩与优化 Excel 文档,减少 Excel 文档大小

当我们在 Excel 文档中插入图片资源的时候&#xff0c;如果我们插入的是原图&#xff0c;可能会导致 Excel 变得非常的大。这非常不利于我们传输或者共享。那么当我们的 Excel 文件非常大的时候&#xff0c;我们就需要对文档做一些压缩或者优化的处理。那有没有什么方法可以实现…

【数据分享】2000—2024年我国省市县三级逐年归一化植被指数(NDVI)数据(年最大值/Shp/Excel格式)

之前我们分享过2000-2024年我国逐年的归一化植被指数&#xff08;NDVI&#xff09;栅格数据&#xff0c;该逐年数据是取的当年月归一化植被指数&#xff08;NDVI&#xff09;的年最大值。&#xff08;可查看之前的文章获悉详情&#xff09;&#xff01;该数据来源于NASA定期发布…