html5 video标签如何禁止视频下载

一、总结

一句话总结：bing方法给video对象绑定return false的匿名方法。

1、html5 video标签如何禁止视频下载？

bing方法给video对象绑定return false的匿名方法。

这样的效果是禁止鼠标右键的另存为功能。

23 $('#video1').bind('contextmenu',function() { return false; });

二、html5 video标签如何禁止视频下载

1、代码

 1 <!DOCTYPE html> 
 2 <html> 
 3 <head>
 4 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 5 </head>
 6 <body> 
 7 
 8 <div style="text-align:center;">
 9   <button onclick="playPause()">播放/暂停</button> 
10   <button onclick="makeBig()">大</button>
11   <button onclick="makeNormal()">中</button>
12   <button onclick="makeSmall()">小</button>
13   <br /> 
14   <video id="video1" width="420" style="margin-top:15px;">
15     <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
16     <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
17     Your browser does not support HTML5 video.
18   </video>
19 </div> 
20 
21 <script type="text/javascript">
22 var myVideo=document.getElementById("video1");
23 $('#video1').bind('contextmenu',function() { return false; });
24 function playPause()
25 { 
26 if (myVideo.paused) 
27   myVideo.play(); 
28 else 
29   myVideo.pause(); 
30 } 
31 
32 function makeBig()
33 { 
34 myVideo.width=560; 
35 } 
36 
37 function makeSmall()
38 { 
39 myVideo.width=320; 
40 } 
41 
42 function makeNormal()
43 { 
44 myVideo.width=420; 
45 } 
46 </script> 
47 
48 </body> 
49 </html>

2、实现介绍

网页使用了html5的video标签进行视频播放，由于播放的视频涉及版权问题，所以需要禁止video标签自带的下载功能。

有种做法是屏蔽掉video标签域的右键操作。
具体代码如下：
$('#videoArea').bind('contextmenu',function() { return false; });

该代码确实可以屏蔽掉右键另存，不过提供该方案的作者又神秘地说：不能做到真正的屏蔽（你懂的）

我用firebug去修改页面上的js，但死活都不能再右键另存，与提供方案的作者所述有矛盾。后来又找了下资料，描述如下：js为一次性执行，非即时渲染。

问题如下：
1、不能真正屏蔽，要怎么做才能够看到不能真正屏蔽的效果；
2、怎么才能够对video标签的另存下载进行真正的屏蔽；

1、不能真正屏蔽，要怎么做才能够看到不能真正屏蔽的效果；
按F12 在控制台中输入
$('#videoArea').unbind('contextmenu');

2、怎么才能够对video标签的另存下载进行真正的屏蔽；
单靠前端代码是做不到真正屏蔽的，要在服务器端对视频地址进行加密验证。
而且就算屏蔽了另存下载，用户也可以在浏览器的临时缓存文件夹中找到已经播放过的视频文件