HTML5中video标签禁止右键和下载视频的问题解决
发布时间：2024-02-28 16:03:33 作者：kirinlau 
我要评论
我要评论做HTML5的video标签，本身我们有下载功能,由于权限问题，所以本文就来介绍一下HTML5中video标签禁止右键和下载视频的问题解决，具有一定的参考价值，感兴趣的可以了解一下
近期做了一个关于在线文件管理的项目，类似网盘，基本功能包含用户、消息、项目、分享、文件提取、收藏、回收站等主要功能，领挖还有一些office、压缩包、图片、文本、音频和视频的预览功能。
音频我使用的是APlayer，视频使用的是DPlayer，为了做个兼容，视频还有html5中的video标签类型的预览，由于原生的video标签添加了controls属性后，右下角的 …点击后 会出现‘下载’ ，‘播放速度’，‘画中画’ 的功能选项，但是由于有只读权限的问题，需要关闭掉‘下载功能，摸索了半天解决了
增加 controlsList=“nodownload” 属性
<video controlsList="nodownload" >
也可以详细指定
<video ref="video" controls :poster="videoInfo.poster" controlslist="nofullscreen nodownload noremoteplayback" > <source :src="videoSrc" type="video/mp4" />
当然页面中也可以右键‘另存为’ 也需要做处理，使用oncontextmenu事件，禁用鼠标右键的菜单
oncontextmenu事件禁用右键菜单
document.oncontextmenu = function(){
event.returnValue = false;
}// 或者直接返回整个事件
document.oncontextmenu = function(){
return false;
}拓展一下另外两种鼠标事件
onselectstart事件，禁止利用右键在网页上选取内容；
oncopy事件，禁止利用右键进行复制。
都可以捕捉到事件进行处理，如果你想单纯的禁用掉，那可以直接在body或者div中 return false掉操作即可：
<body oncontextmenu = "return false" ></body> <body onselectstart = "return false" ></body> <body oncopy = "return false" ></body>
此外，针对需要还可以对video标签的其他按钮进行隐藏
// 隐藏video标签 音量按钮
video::-webkit-media-controls-mute-button {
display: none !important;
}
// 隐藏video标签 当前按钮
video::-webkit-media-controls-current-time-display {
display: none !important;
}
// 隐藏video标签 总时间
video::-webkit-media-controls-time-remaining-display {
display: none !important;
}
// 隐藏video标签 fullscreen按钮
video::-webkit-media-controls-fullscreen-button {
display: none !important;
}到此这篇关于HTML5中video标签禁止右键和下载视频的问题解决的文章就介绍到这了,更多相关HTML5 video禁止右键内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
html5 video标签controlslist的具体使用
HTML5 提供了内置的视频播放控件，其中 video controlslist 是其中一个很有用的属性，本文主要介绍了html5 video标签controlslist的具体使用，具有一定的参考价值，感兴趣2024-02-27
在html5页面中嵌入视频的时候页面中只显示声音却不显示图像，本文主要介绍了HTML5 video播放有声音无图像的解决方法，具有一定的参考价值，感兴趣的可以了解一下2024-02-21解决html5中的video标签ios系统中无法播放使用的问题
这篇文章主要介绍了解决html5中的video标签ios系统中无法播放使用的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-10- 这篇文章主要介绍了HTML5 video循环播放多个视频的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-08-06
- 这篇文章主要介绍了html5 video全屏播放/自动播放的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-08-06
- 这篇文章主要介绍了HTML5 video进入全屏和退出全屏的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编2020-07-28
这篇文章主要介绍了html5用video标签流式加载的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2020-05-20html5视频媒体标签video的使用方法及完整参数说明详解
这篇文章主要介绍了html5视频媒体标签video的使用方法及完整参数说明详解,需要的朋友可以参考下2019-09-27
最新评论