video标签使用controls属性怎么去掉三个点

最新推荐文章于 2024-04-08 15:59:33 发布
最新推荐文章于 2024-04-08 15:59:33 发布
阅读量8.1k 收藏 21
点赞数 6
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20753229/article/details/122257338
版权

当video标签使用controls属性的时候。pc电脑会显示三个点，可以利用controlslist属性进行设置
在这里插入图片描述

<video
  ref="video"
  controls
  :src="url"
  controlslist="nodownload nofullscreen noremoteplayback noplaybackrate"
  disablePictureInPicture></video>

1、nodownload: 不要下载按钮
2、nofullscreen: 不要全屏按钮
3、noremoteplayback: 不要远程回放
4、disablePictureInPicture 不要画中画 按钮
5、noplaybackrate 不要播放速度按钮
新版chrome浏览器可以去掉video播放自带的"播放速度"

Helen-lian
关注
  • 6
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HTML页面原生VIDEO标签隐藏下载按钮功能
12-13
在写web项目的时候，遇到简介页面有一个单独的简介视频，只有这一个短短的视频所以没有使用任何video组件，所以运用原生video标签就想解决问题。 虽然简介视频是非付费的，但也不希望会有下载按钮或者可以视频另存为，所以找到一个可以看上去没有下载功能的方法，做一下笔记。 想要隐藏以上下载按钮，三个样式就可以了，不废话直接贴代码： video::-internal-media-controls-download-button { display:none; } video::-webkit-media-controls-enclosure { overflow:hidden;
详解Html5中video标签那些属性和方法
11-21
前言 最近在写一个自定义播放器, 写之前我们肯定要把播放器的属性和方法全部过一遍,知彼知己,方能百战不殆嘛…后面会把自己写的播放器和踩过的一些坑也上传上来 video标签行内属性 src：视频的URL poster：视频封面，没有播放时显示的图片 preload：预加载 autoplay：自动播放 loop：循环播放 controls：浏览器自带的控制条 width：视频宽度 height：视频高度 webkit-playsinline="true" IOS下防止全屏播放 playsinline="true" 同
html5 video css样式修改,Video controls 属性 -HTML教程，css5.net
weixin_39687881的博客
06-03 2518
Video controls 属性实例启用视频控件：document.getElementById("myVideo").controls=true;演示一下 ?定义和用法controls 属性设置或返回浏览器应当显示标准的视频控件。该属性反映了 controls 属性。当使用该属性时，它指定了显示视频控件。视频控件包含：播放暂停进度条音量全屏切换(供视频)字幕(当可用时)轨道(当可用时)注意： ...
video 标签参数，禁用画中画、投屏
最新发布
ringlot的博客
04-08 557
（由于浏览器机制，对首次用户未交互的页面，拦截了视频的有声自动播放，autoplay：true 并不会自动播放）: 布尔属性，用于在使用有线（HDMI、DVI 等）和无线技术（Miracast、Chromecast、DLNA、AirPlay 等）连接设备时，禁用远程播放功能。8、playsinline: 布尔属性 指明视频将内联（inline）播放，即在元素的播放区域内。2、controls : 加上这个属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
HTML5 video标签（播放器）学习笔记（一）:使用入门
09-28
主要介绍了HTML5 video标签（播放器）学习笔记（一）:使用入门,本文讲解了使用标签、比如播放视频的路径、是否显示控制条、让视频自动播放或自动加载、让播放器规范一点等内容,需要的朋友可以参考下
HTML5 中的video标签介绍
陈立龙的专栏
11-28 2365
(1)    常见的视频格式: MP4, ogg以及webM Browser MP4 WebM Ogg Internet Explorer 9 YES NO NO Firefox 4.0 NO YES YES Google Chrome
html5 video 标签 controlslist 详解
dongdongqiang521的博客
11-27 2722
HTML5 提供了内置的视频播放控件，其中 video controlslist 是其中一个很有用的属性。video controlslist 属性可以用于告诉浏览器在视频播放过程中应该显示哪些默认的用户界面控件。下面我们将从几个方面来介绍 video controlslist 的详细使用。
video 属性和事件用法大全
CherishL_的专栏
09-26 918
video 属性 <!-- video 不支持 IE8及以下版本浏览器，支持三种视频格式：MP4，WebM 和 Ogg --> <video src="test.mp4" controls width="400" height="300"></video> <!-- 禁止下载 --> <video src="test.mp4" c...
原生video设置控制面板controls显示哪些控件
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
12-01 1848
其实我觉得，基本上原生提供的功能已经满足日常使用了，除非你的需求的重度视频功能，然后对美观度有一定要求，如各大视频网站爱优腾+B。
H5视频播放控制
落下香樟树
10-26 2422
视频播放控制&默认横屏播放 一、视频列表中控制只允许一个视频播放 // 获取DOM中所有的video标签 var videoTags = document.querySelectorAll('video'); // 控制播放的视频暂停 var pauseAll = function () { // 改变this指向 var self = this; [].forEach.call(videoTags, function (i) { i !== self && i.p
video 播放 全屏 更多控件显示隐藏&自定义视频控件&Shadow DOM
热门推荐
qq_38417082的博客
12-29 1万+
video 播放 全屏 更多控件显示隐藏&自定义视频控件&Shadow DOM 最近做项目中用到了 H5 video标签播放视频,修改需删除自带的更多控制按钮;自以为很简单设定标签的属性,查看文档只有一个可怜的**controls** 布尔值属性与这方面相关,不设定时所有的控件都被控件全部给干掉了;主要是视频更多控制按钮卡了半天,查了半天也学到了很多video相关的知识.废话不多说...
HTML5原生视频播放器组件video的videocontrolslist属性详解
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
11-27 1686
HTML5提供了内置的视频播放控件，其中videocontrolslist是其中一个很有用的属性。videocontrolslist属性可以用于告诉浏览器在视频播放过程中应该显示哪些默认的用户界面控件。下面我们将从几个方面来介绍videocontrolslist的详细使用。
Html5 video标签视频的最佳实践
01-21
随着 4G 的普遍以及 WiFi 的广泛使用，手机上的网速已经足够稳定和高速，以视频为主的 HTML5 也越来越普遍了，相比帧动画，视频的表现更加丰富，这里介绍一些实践经验。 video的属性 &lt;video id=video src=video.mp4 controls = true poster=images.jpg /*视频封面*/ preload=auto webkit-playsinline=true /*这个属性是ios 10中设置可以 让视频在小窗内播放，也就是不是全屏播放*/ pla
HTML5 video 视频标签使用介绍
11-21
HTML <video> 适用于HTML 5+，用于定义在线观看的视频流媒体。 复制代码代码如下:<video width=”320″ height=”240″ src=”https://www.jb51.net/movie.ogg” controls=”controls”>这里是注释文字，如果无法支持 HTML 5 浏览器将显示这里的文字。如果支持，就直接显示视频，忽略文字。</video> 在HTML 4 及以前，如果您想在网页中嵌入在线观看的视频，一般都需要使用Flash视频流，通过使用 <object> 和 <embed> 标签，就可以通过浏览器播放swf、flv等格式视频文件，但是前
HTML5 Video标签的属性、方法和事件汇总介绍
11-21
前段时间写了一个基于html5 video的视频播放器，从起初的对其不了解，然后到能够写一个基本完善的自定义播放器。在这个过程中，对video标签的属性，方法，事件有了个全面的认识。下面分类列出来一下。 <video>标签的属性 复制代码代码如下:src ：视频的属性poster：视频封面，没有播放时显示的图片preload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条width：视频宽度height：视频高度 html 代码 复制代码代码如下: <video id=”media” src=”https://www.jb51.net/test.mp4″
安卓手机浏览器_强大的浏览器，手机必装，安卓、IOS都有！
weixin_39798579的博客
11-17 833
大家好，我是互联网分享者小编茂茂，无论任何一款智能手机，除了微信，QQ，支付宝还会必备一款软件，那就是浏览器，应用市场上的浏览器真的多不胜数，知名的浏览器都有自己的独特的价值和主打的功能，这也导致每款浏览器都有一批忠实的用户。大多数人的手机安装都是一些大众的浏览器百度，或者自带浏览器，如UC浏览器，qq浏览器等，但是每次想要搜索自己想要的内容时，总是有一大堆广告内容推送。其实搜索能力的提...
控制video标签的控件样式
c_qianxia5040的博客
07-09 7898
第一步、控制面板 回到elements中就有内部结构了 给video标签加controlsList=“nodownload” 不显示下载按钮 <video src="../../assets/demo.mp4" controls="controls" controlsList="nodownload"></video> 1、修改控制面板 video::-webkit-media-controls-enclosure { overflow: hidden; } vid
控制 video 标签的控制栏组件（隐藏、显示进度条、播放按钮、全屏按钮等）
weixin_43422861的博客
08-17 4173
video
html5 video的简单使用
ymzhao
01-02 6884
html5 video的简单使用 h5的video标签省去了调用插件，UI能根据环境自动调整，方便快捷。但问题在于文档太难找。 demo： <video src="xxx.video" controls="controls" controlslist="nodownload" disablePictureInPicture="true" width="100%" height="240" ...
video controls
09-13
Video标签中的controls属性用于显示视频播放器的控制条，包括播放/暂停按钮、音量控制和进度条等。使用controls属性将自动显示默认的控制条。 在PC电脑上，当使用controls属性时，通常会显示三个点，用于打开更多控制选项。不过，如果你希望自定义控制条的显示内容，可以使用controlslist属性进行设置。在Vue.js中，可以通过在video标签上添加controlslist属性来实现，如下所示： ```html <video ref="video" controls :src="url" controlslist="nodownload nofullscreen noremoteplayback noplaybackrate" disablePictureInPicture></video> ``` 这样设置后，控制条上的下载按钮（download）、全屏按钮（fullscreen）、远程播放按钮（remote playback）和调节播放速率的按钮（playback rate）将不再显示。 当然，除了使用video标签的自带控件属性，我们也可以自定义视频控制条。在实际开发中，我们通常会使用JavaScript来实现自定义控制条的功能。下面是一个示例代码，用于通过点击按钮来控制视频的播放和暂停： ```html <video id="video" src="video.mp4"></video> <button id="playBtn">播放/暂停</button> <script> var video = document.querySelector("video"); var playBtn = document.getElementById("playBtn"); playBtn.onclick = function(){ if(video.paused){ video.play(); playBtn.src = "img/pause.png"; }else{ video.pause(); playBtn.src = "img/on.png"; } } </script> ``` 这段代码首先获取video元素和playBtn元素，然后通过给playBtn绑定点击事件来实现播放和暂停的功能。点击按钮时，会判断视频的状态，如果视频是暂停状态，则调用video.play()方法播放视频并修改按钮的显示图标；如果视频正在播放，则调用video.pause()方法暂停视频并修改按钮的显示图标。通过这样的方式，可以实现自定义的视频控制条。 希望对你有所帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值