Js实现Blob视频加密(附代码,精讲)
一、原理
把video的src属性以blob形式给显示出来,这样就可以实现加密效果。示例效果如下:
二、过程
- 利用Ajax方法,请求一个视频地址,并设置返回值为Blob类型
- 把请求的数据传给video的src属性
- 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>