IT俱乐部 HTML5 HTML5中video标签禁止右键和下载视频的问题解决

HTML5中video标签禁止右键和下载视频的问题解决

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

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

增加 controlsList=“nodownload” 属性

也可以详细指定

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

document.oncontextmenu = function(){
    event.returnValue = false;
}// 或者直接返回整个事件
document.oncontextmenu = function(){
    return false;
}

拓展一下另外两种鼠标事件
onselectstart事件,禁止利用右键在网页上选取内容;
oncopy事件,禁止利用右键进行复制。
都可以捕捉到事件进行处理,如果你想单纯的禁用掉,那可以直接在body或者div中 return false掉操作即可:


此外,针对需要还可以对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禁止右键内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章,希望大家以后多多支持IT俱乐部!

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/html5/10339.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部