Js实现Blob视频加密（附代码，精讲）

Js实现Blob视频加密（附代码，精讲）

一、原理

把video的src属性以blob形式给显示出来，这样就可以实现加密效果。示例效果如下：

二、过程

1. 利用Ajax方法，请求一个视频地址，并设置返回值为Blob类型
2. 把请求的数据传给video的src属性
3. video接收到src属性后，就立即释放请求到的数据，以免泄露。

三、示例代码

 <video id="my-video" class="video-js" playsinline controls preload="auto" controlslist="nodownload"
        controlslist="nofullscreen" width="100%" height="240" poster="./public/images/cover.png">
    </video>
    <script type="text/javascript">
        var video = document.getElementById("my-video");
        window.URL = window.URL || window.webkitURL; //用来判断电脑系统window.webkitURL和window.URL是一样的，window.URL标准定义，window.webkitURL是webkit内核的实现，一般手机上就是使用这个，还有火狐等浏览器的实现。
        var xhr = new XMLHttpRequest();  // 实现数据请求 进行http协议的通信
        var play_url = 'http://vd2.bdstatic.com/mda-jkeurbef5w532tib/sc/mda-jkeurbef5w532tib.mp4'; //网上的视频地址
        xhr.open("GET", play_url, true);  //打开一个地址，请求类型 地址 异步或同步 
        xhr.responseType = "blob";  // 设置返回值 为blob对象
        xhr.onload = function (e) { //请求后要执行的函数
            if (this.status == 200) { //成功 
                var blob = this.response;  // 请求成功获取的参数 赋值给 “blob”
                console.log(blob);
                video.src = window.URL.createObjectURL(blob); //创建一个对象 视频只需要获取一次， 获取一次后，就需要释放这个对象。
                // video.onload = function () { //获取到video 后执行的函数 ？
                    // window.URL.revokeObjectURL(video.src); //释放这个对象
                // };
            }
        }
        xhr.send(); //发送请求
    </script>