html5视频播放,实现防止下载（一）

一、html5视频播放<video id="my-video" class="video-js vjs-default-skin vjs-big-play-button vjs-big-play-centered" controlspreload="auto" poster=""><source :src="mp4VideoUrl" type="video/mp4">&lt

psyuhen

12815人浏览 · 2021-08-18 16:54:50

psyuhen · 2021-08-18 16:54:50 发布

一、html5视频播放

<video id="my-video" class="video-js vjs-default-skin vjs-big-play-button vjs-big-play-centered" controls
               preload="auto" poster="">
  <source :src="mp4VideoUrl" type="video/mp4">
  <source :src="m3u8VideoUrl" type="application/x-mpegURL">
</video>

图片如下：

二、正常播放的时候，在PC端存在一些下载工具的时候，会显示能下载，如下图，点击可以直接下载对应的视频

三、还有一种右键保存下载。

四、既然知道了问题原因所在，那么就需要想想怎么防止别人下载呢？为什么要防止别人下载呀？当然是因为由于播放的视频涉及版权问题,所以需要禁止video标签自带的下载功能。好，到此，我们禁止自带下载功能。

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls="true" autoplay="autoplay">
  <source src="/i/movie.ogg" type="video/ogg" />
  <source src="/i/movie.mp4" type="video/mp4" />
  <source src="/i/movie.webm" type="video/webm" />
  <object data="/i/movie.mp4" width="320" height="240">
    <embed width="320" height="240" src="/i/movie.swf" />
  </object>
</video>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls="true" controlslist="nodownload" autoplay="autoplay">
  <source src="/i/movie.ogg" type="video/ogg" />
  <source src="/i/movie.mp4" type="video/mp4" />
  <source src="/i/movie.webm" type="video/webm" />
  <object data="/i/movie.mp4" width="320" height="240">
    <embed width="320" height="240" src="/i/movie.swf" />
  </object>
</video>

</body>
</html>

五、需要禁止了控制条中的下载，但右键的视频保存还是存在的。这个也需要屏蔽一下，简单粗暴一下，如下：

<!DOCTYPE html>
<html>
<body>
<div id="videoDiv">
<video id="video1" width="320" height="240" controls="true" controlslist="nodownload" autoplay="autoplay">
  <source src="/i/movie.ogg" type="video/ogg" />
  <source src="/i/movie.mp4" type="video/mp4" />
  <source src="/i/movie.webm" type="video/webm" />
  <object data="/i/movie.mp4" width="320" height="240">
    <embed width="320" height="240" src="/i/movie.swf" />
  </object>
</video>
</div>
</body>
</html>
<script>
window.oncontextmenu=function(e){
    //取消默认的浏览器自带右键 很重要！！
    e.preventDefault();
}
// 如果使用jquery,如下代码也可以
//$('#video1').bind('contextmenu',function() { return false; });
</script>

但事实上这个方法不能做到真正的屏蔽。使用如下方法即可破解，F12，打开开发者工具，在控制台里面输入window.οncοntextmenu=null，托托的就破解了

如果使用$('#video1').bind('contextmenu',function() { return false; });那么直接$('#video1').unbind('contextmenu');即可。

至此，是不是很神奇！！！

六、怎么才能够对video标签的另存下载进行真正的屏蔽；

（1）、服务器端对视频地址加密。

（2）、增加视频下载的难度。