video标签;浏览器溢出功能禁用;三个点中的功能禁用;禁用罕见的功能’播放速度’;禁用右键;
video 自带了一些功能:
因为项目需要做一些权限,这些功能回影响到做的权限,所以需要禁用
先说我遇到的:
- 下载功能
在 video 标签添加 controlslist 属性值设置为 nodownload 即可隐藏 - 播放速度功能
其余的网上都可以找到对解决方案,唯独这个找了很久,最后也是被迫查看了源码;
在 video 标签添加 controlslist 属性值设置为 noplaybackrate 即可隐藏 - 画中画功能
在 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
}
此时右键已不起作用