HTML5中video标签克制右键和下载视频的题目办理

2024-11-3 16:54| 发布者: 4d5a8576d| 查看: 64| 评论: 0

摘要: 近期做了一个关于在线文件管理的项目，类似网盘，基本功能包罗用户、消息、项目、分享、文件提取、收藏、回收站等重要功能，领挖另有一些office、压缩包、图片、文本、音频和视频的预览功能。音频我使用的是APlaye

近期做了一个关于在线文件管理的项目，类似网盘，基本功能包罗用户、消息、项目、分享、文件提取、收藏、回收站等重要功能，领挖另有一些office、压缩包、图片、文本、音频和视频的预览功能。

音频我使用的是APlayer，视频使用的是DPlayer，为了做个兼容，视频另有html5中的video标签类型的预览，由于原生的video标签添加了controls属性后，右下角的 …点击后会出现‘下载’ ，‘播放速率’，‘画中画’ 的功能选项，但是由于有只读权限的题目，必要关闭掉‘下载功能，摸索了半天办理了

增加 controlsList=“nodownload” 属性

[code]<video controlsList="nodownload" >[/code]

也可以具体指定

[code]<video ref="video" controls :poster="videoInfo.poster" controlslist="nofullscreen nodownload noremoteplayback" > <source :src="videoSrc" type="video/mp4" />[/code]

固然页面中也可以右键‘另存为’ 也必要做处理处罚，使用oncontextmenu事件，禁用鼠标右键的菜单
oncontextmenu事件禁用右键菜单

[code]document.oncontextmenu = function(){ event.returnValue = false; }// 大概直接返回整个事件 document.oncontextmenu = function(){ return false; }[/code]

拓展一下另外两种鼠标事件
onselectstart事件，克制使用右键在网页上选取内容；
oncopy事件，克制使用右键举行复制。
都可以捕捉到事件举行处理处罚，假如你想单纯的禁用掉，那可以直接在body大概div中 return false掉操作即可：

[code]<body oncontextmenu = "return false" ></body> <body onselectstart = "return false" ></body> <body oncopy = "return false" ></body>[/code]

别的，针对必要还可以对video标签的其他按钮举行潜伏

[code] // 潜伏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; }[/code]

到此这篇关于HTML5中video标签克制右键和下载视频的题目办理的文章就介绍到这了,更多相干HTML5 video克制右键内容请搜刮脚本之家以前的文章或继承浏览下面的相干文章，希望各人以后多多支持脚本之家！

来源：https://www.jb51.net/html5/928177.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：html5 video标签controlslist的详细利用下一篇：html网页播放多个视频的几种方法

账号		自动登录	找回密码
密码			立即注册

HTML5中video标签克制右键和下载视频的题目办理

相关分类

站长推荐 /6