Video 视频播放防作弊和禁止下载

1、实现效果 - 查看源码

实现视频可播放不能下载，禁止右键下载、F12源码打开链接下载
实现只在当前窗口播放，切换窗口、窗口最小化、窗口被遮挡停止播放，恢复后继续播放

兼容情况：

2、Video 禁止鼠标右键下载

1<!-- 添加 oncontextmenu="return false" -->
2<video src="地址" controls preload="auto" oncontextmenu="return false"></video>

3、禁止源码打开链接下载

主要使用 MediaSource 和 createObjectURL 实现。参考源码

html:

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

js:

1//video/webm;codecs = "vp8,vorbis"   表示webm视频容器中的vp8视频编解码器和vorbis音频编解码器3
2//video/ogg;codecs = "theora,vorbis" 表示ogg视频容器中的theora视频编解码器和vorbis音频编解码器
3//video/mp4;codecs = "avc1.42E01E,mp4a.40.2" 表示基本的MEPG-4视频容器中的H.264视频编解码器和ACC音频编解码器
4//video/mp4;codecs = "avc1.64001E,mp4a.40.2" 表示高质量的MEPG-4视频容器中的H.264视频编解码器和ACC音频编解码器 
5var video = document.getElementById("videoDemo");
6
7    //mp4 格式 跟文件编码也有关
8    var assetURL = "demo.mp4";
9    var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
10    
11    //webm 格式
12    // var assetURL = "demo.webm";
13    // var mimeCodec = 'video/webm;codecs="vorbis,vp8"';
14    
15    if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
16      var mediaSource = new MediaSource();
17      video.src = URL.createObjectURL(mediaSource);
18      mediaSource.addEventListener("sourceopen", sourceOpen);
19    } else {
20      console.error("Unsupported MIME type or codec: ", mimeCodec);
21    }
22
23    function sourceOpen() {
24      console.log(this); // open
25      var mediaSource = this;
26      var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
27      fetchAB(assetURL, function(buf) {
28        console.log(buf);
29        console.log(sourceBuffer);
30        sourceBuffer.addEventListener("updateend", function() {
31          console.log(mediaSource);
32          mediaSource.endOfStream();
33          //video.play();  //这里会报错就去掉了
34          console.log(mediaSource.readyState); // ended
35        });
36        sourceBuffer.appendBuffer(buf);
37      });
38    }
39    function fetchAB(url, cb) {
40      console.log("fetchAB----",url);
41      var xhr = new XMLHttpRequest();
42      xhr.open("get", url);
43      xhr.responseType = "arraybuffer";
44      xhr.onload = function() {
45        console.log(xhr.response);
46        cb(xhr.response);
47      };
48      xhr.send();
49    }

不兼容：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 的值，根据该值进行页面一些事件的处理。

1var videoPausedStatus;
2document.addEventListener('visibilitychange', function () {
3  var isHidden = document.hidden;
4  if (isHidden) {
5    videoPausedStatus = true;
6    if (!video.paused) {
7      videoPausedStatus = false;
8      video.pause();
9    }
10  } else {
11    if (!videoPausedStatus) {
12      video.play();
13    }
14  }
15});
16// //IE
17// document.addEventListener('msvisibilitychange',function(){
18//   console.log(document.msVisibilityState);
19// });
20// //FF
21// document.addEventListener('mozvisibilitychange',function(){
22//   console.log(document.mozVisibilityState);
23// });
24// //chrome
25// document.addEventListener('webkitvisibilitychange',function(){
26//   console.log(document.webkitVisibilityState);
27// });

5、判断当前页面是否被激活 - document.hasFocus()

解决不能监听页面被其他软件遮盖

1setInterval(function () {
2  if (document.hasFocus() != pageFocus) {
3    pageFocus = document.hasFocus();
4    if (!pageFocus) {
5      if (!video.paused) {
6        videoPausedStatus = false;
7        video.pause();
8      }
9    } else {
10      if (!videoPausedStatus) {
11        video.play();
12      }
13    }
14  }
15}, 1000);

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