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標簽的另存下載進行真正的屏蔽；
單靠前端代碼是做不到真正屏蔽的，要在服務器端對視頻地址進行加密驗證。
而且就算屏蔽了另存下載，用戶也可以在瀏覽器的臨時緩存文件夾中找到已經播放過的視頻文件