目前很多视频网站都是采用video标签形式，src是blob://http开头,效果如下
实现方式，用用H5的MediaSource方法
blob
varvideo=document.querySelector('video');
varassetURL='https://adtuu-blog.oss-cn-/v0-new.mp4';
//NeedtobespecificforBlinkregardingcodecs
//./mp4infofrag_bunny.mp4|grepCodec
//video/mp4;codecs="avc1.42E01E,mp4a.40.2
//varmimeCodec='video/webm;codecs="vorbis,vp8"';
varmimeCodec='video/mp4;codecs="avc1.42E01E,mp4a.40.2"';
if('MediaSource'inwindow&&MediaSource.isTypeSupported(mimeCodec)){
varmediaSource=newMediaSource();
video.src=URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen',sourceOpen);
}else{
console.error('UnsupportedMIMEtypeorcodec:',mimeCodec);
}
functionsourceOpen(){
console.log(this);//open
varmediaSource=this;
varsourceBuffer=mediaSource.addSourceBuffer(mimeCodec);
fetchAB(assetURL,function(buf){
console.log(buf)
console.log(sourceBuffer);
sourceBuffer.addEventListener('updateend',function(){
console.log(mediaSource);
mediaSource.endOfStream();
video.play();
console.log(mediaSource.readyState);//ended
});
sourceBuffer.appendBuffer(buf);
});
};
functionfetchAB(url,cb){
console.log(url);
varxhr=newXMLHttpRequest;
xhr.open('get',url);
xhr.responseType='arraybuffer';
xhr.onload=function(){
console.log(xhr.response);
cb(xhr.response);
};
xhr.send();
};
另外，有网友写了一个demo，可以看下
源代码
