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标签禁止右键和下载视频的问题解决