video标签；浏览器溢出功能禁用；三个点中的功能禁用；禁用罕见的功能‘播放速度‘；禁用右键；

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

video标签；浏览器溢出功能禁用；三个点中的功能禁用；禁用罕见的功能'播放速度'；禁用右键；

video 自带了一些功能：

因为项目需要做一些权限，这些功能回影响到做的权限，所以需要禁用

先说我遇到的：

1. 下载功能 在 video 标签添加 controlslist 属性值设置为 nodownload 即可隐藏
2. 播放速度功能 其余的网上都可以找到对解决方案，唯独这个找了很久，最后也是被迫查看了源码； 在 video 标签添加 controlslist 属性值设置为 noplaybackrate 即可隐藏
3. 画中画功能 在 video 标签添加属性 disablePictureInPicture="true"

没有遇到的： 1.远程播放功能 我这里没有出现，但是看有人遇到过，保险起见我也加入了该功能的禁用 见到两种方法，于是都写上了，对这个video标签还是不太深入，能找到的资料也非常有限

a.在 video 标签添加 controlslist 属性值设置为 noremoteplayback b.在 video 标签添加属性 disableRemotePlayback="true"

示例：

<video
  autoplay
  width="100%"
  controls
  :id="`videoElement${ranCode}`"
  @contextmenu="contextmenu"
  controlslist="nodownload noremoteplayback noplaybackrate"
  disablePictureInPicture="true"
  disableRemotePlayback="true"
></video>

效果： 三个点已隐藏

注：

即使按照video的源码，也是无法修改其部分样式的，只有webkit开头的元素才可获取，其余的元素无论css选择器还是js都是无法获取到对应的按钮

禁用右键

右键事件 @contextmenu="contextmenu" 执行：

contextmenu(e) {
  e.returnValue = false
}

此时右键已不起作用