video标签在h5中被劫持问题

将video的视频链接转为blob

---

export const encryptionVideo = (options: URL) => {
    return new Promise((resolve, reject) => {
        window.URL = window.URL || window.webkitURL;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', options.url, true);
        xhr.responseType = 'blob';
        xhr.onload = function() {
            if (this.status == 200) {
                var blob = this.response;
                var u = window.URL.createObjectURL(blob);
                resolve(u);
            }
        };
        xhr.send();
    });
}

注：如果出现跨域问题需要在服务器上设置一下不让跨域 

视频标签中设置相应属性

---

<video
  id="video" 
  src="video.mp4" 
  controls = "true"
  poster="images.jpg" /*视频封面*/
  preload="auto" 
  webkit-playsinline="true" /*这个属性是ios 10中设置可以
                     让视频在小窗内播放，也就是不是全屏播放*/  
  playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  /*启用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true" /*全屏设置，
                     设置为 true 是防止横屏*/
  x5-video-orientation="portraint" //播放器支付的方向， landscape横屏，portraint竖屏，默认值为竖屏
  style="object-fit:fill">
</video>

更多信息：https://zhuanlan.zhihu.com/p/166014722?utm_id=0