H5 qq浏览器video拦截处理

QQ浏览器中如果使用video标签，那么浏览器会将video劫持，使用他们浏览器自带的video，那么层级会很高，之前写在video上面的样式就会被覆盖，因此可以把视频url转成blod，那么就可以解决

从虎牙直播发现的，他们转为blod后，上面就可以加弹幕，滚动条等，因此发现了这个

 

1、将video的视频链接转为blod

encryptionVideo(url) {
            return new Promise((resolve, reject) => {
                window.URL = window.URL || window.webkitURL;
                var xhr = new XMLHttpRequest();
                xhr.open('GET', 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();
            });
        }

 2、但是用了之后，会出现一个问题，那就是视频过大，上面的方法等同于把视频下载在转blob,对于超过100M的视频，显示会非常缓慢，因此在研究之后，可以使用Range，和MediaSource来处理

    MediaSource 文档  https://developer.mozilla.org/zh-CN/docs/Web/API/MediaSource

　即创建一个arraybuffer，然后往里面不断添加数据，但是目前有个问题那就是不是FMP4，使用Range后，添加不进去，目前不知道什么原因

　测试是否是FMP4网址  https://gpac.github.io/mp4box.js/test/filereader.html