HTML5中关于解决video标签禁止右键和下载视频的办法

最新推荐文章于 2024-07-23 03:50:02 发布

kirinlau

最新推荐文章于 2024-07-23 03:50:02 发布

阅读量4.8k

点赞数 1

分类专栏： html5 文章标签： html5 音视频 javascript

本文链接：https://blog.csdn.net/kirinlau/article/details/129688431

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章介绍了如何在在线文件管理系统中，特别是涉及到视频预览时，通过添加controlsList属性和处理oncontextmenu事件来禁用video标签的下载功能以及阻止右键另存为。同时，提到了可以使用CSS隐藏其他控制按钮，并禁止选取和复制内容的方法，以适应只读权限的需求。

摘要由CSDN通过智能技术生成

近期做了一个关于在线文件管理的项目，类似网盘，基本功能包含用户、消息、项目、分享、文件提取、收藏、回收站等主要功能，领挖还有一些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;
  }