1、實現效果 - 檢視原始碼

• 實現視訊可播放不能下載，禁止右鍵下載、F12原始碼開啟連結下載
• 實現只在當前視窗播放，切換視窗、視窗最小化、視窗被遮擋停止播放，恢復後繼續播放

線上demo：快取完再播放 、 邊播放邊快取 、 IE 測試防止播放作弊

相容情況：

2、Video 禁止滑鼠右鍵下載

<!-- 新增 oncontextmenu="return false" -->
<video src="地址" controls preload="auto" oncontextmenu="return false"
 
></video>

3、禁止原始碼開啟連結下載

主要使用 MediaSource 和 createObjectURL 實現。參考原始碼

html:

<video id="videoDemo" controls preload="auto" oncontextmenu="return false" ></video>

js: 

//video/webm;codecs = "vp8,vorbis"   表示webm視訊容器中的vp8視訊編解碼器和vorbis音訊編解碼器3
//video/ogg;codecs = "theora,vorbis" 表示ogg視訊容器中的theora視訊編解碼器和vorbis音訊編解碼器
 

//video/mp4;codecs = "avc1.42E01E,mp4a.40.2" 表示基本的MEPG-4視訊容器中的H.264視訊編解碼器和ACC音訊編解碼器
//video/mp4;codecs = "avc1.64001E,mp4a.40.2" 表示高質量的MEPG-4視訊容器中的H.264視訊編解碼器和ACC音訊編解碼器 
var video = document.getElementById("videoDemo");

    //mp4 格式 跟檔案編碼也有關
    var assetURL = "demo.mp4";
    var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    
    
 
//webm 格式
    // var assetURL = "demo.webm";
    // var mimeCodec = 'video/webm;codecs="vorbis,vp8"';
    
    if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
      var mediaSource = new MediaSource();
      video.src = URL.createObjectURL(mediaSource);
      mediaSource.addEventListener("sourceopen", sourceOpen);
    } else {
      console.error("Unsupported MIME type or codec: ", mimeCodec);
    }

    function sourceOpen() {
      console.log(this); // open
      var mediaSource = this;
      var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
      fetchAB(assetURL, function(buf) {
        console.log(buf);
        console.log(sourceBuffer);
        sourceBuffer.addEventListener("updateend", function() {
          console.log(mediaSource);
          mediaSource.endOfStream();
          //video.play();  //這裡會報錯就去掉了
          console.log(mediaSource.readyState); // ended
        });
        sourceBuffer.appendBuffer(buf);
      });
    }
    function fetchAB(url, cb) {
      console.log("fetchAB----",url);
      var xhr = new XMLHttpRequest();
      xhr.open("get", url);
      xhr.responseType = "arraybuffer";
      xhr.onload = function() {
        console.log(xhr.response);
        cb(xhr.response);
      };
      xhr.send();
    }

不相容：IE（提示 Unsupported MIME type or codec: video/mp4; codecs=”avc1.42E01E, mp4a.40.2”）

待解決: 發現network還是可以看到視訊連結的並且右鍵還是可以開啟並且下載
（Safari可以）

4、監聽瀏覽器最小化 - document.visibilityState

document.hidden：表示頁面是否隱藏的布林值。頁面隱藏包括 頁面在後臺標籤頁中 或者 瀏覽器最小化 （注意，頁面被其他軟體遮蓋並不算隱藏，比如開啟的 sublime 遮住了瀏覽器）。

document.visibilityState：表示下面 4 個可能狀態的值
hidden：頁面在後臺標籤頁中或者瀏覽器最小化
visible：頁面在前臺標籤頁中
prerender：頁面在螢幕外執行預渲染處理 document.hidden 的值為 true
unloaded：頁面正在從記憶體中解除安裝

Visibilitychange事件：當文件從可見變為不可見或者從不可見變為可見時，會觸發該事件。

這樣，我們可以監聽 Visibilitychange 事件，當該事件觸發時，獲取 document.hidden 的值，根據該值進行頁面一些事件的處理。

var videoPausedStatus;
document.addEventListener('visibilitychange', function () {
  var isHidden = document.hidden;
  if (isHidden) {
    videoPausedStatus = true;
    if (!video.paused) {
      videoPausedStatus = false;
      video.pause();
    }
  } else {
    if (!videoPausedStatus) {
      video.play();
    }
  }
});
// //IE
// document.addEventListener('msvisibilitychange',function(){
//   console.log(document.msVisibilityState);
// });
// //FF
// document.addEventListener('mozvisibilitychange',function(){
//   console.log(document.mozVisibilityState);
// });
// //chrome
// document.addEventListener('webkitvisibilitychange',function(){
//   console.log(document.webkitVisibilityState);
// });

5、判斷當前頁面是否被啟用 - document.hasFocus()

解決不能監聽頁面被其他軟體遮蓋

setInterval(function () {
  if (document.hasFocus() != pageFocus) {
    pageFocus = document.hasFocus();
    if (!pageFocus) {
      if (!video.paused) {
        videoPausedStatus = false;
        video.pause();
      }
    } else {
      if (!videoPausedStatus) {
        video.play();
      }
    }
  }
}, 1000);

原文：https://itguliang.github.io/post/1e5c2008.html