目前很多視頻網(wǎng)站都是采用video標(biāo)簽形式，src是blob://http開頭,效果如下

實(shí)現(xiàn)方式，用用H5的MediaSource方法

blob

var?video?=?document.querySelector('video');

var?assetURL?=?'https://adtuu-blog.oss-cn-shenzhen.aliyuncs.com/v0-new.mp4';

//?Need?to?be?specific?for?Blink?regarding?codecs

//?./mp4info?frag_bunny.mp4?|?grep?Codec

//?video/mp4;?codecs="avc1.42E01E,?mp4a.40.2

//var?mimeCodec?=?'video/webm;codecs="vorbis,vp8"';

var?mimeCodec?=?'video/mp4;?codecs="avc1.42E01E,?mp4a.40.2"';

if('MediaSource'?in?window?&&?MediaSource.isTypeSupported(mimeCodec))?{

var?mediaSource?=?new?MediaSource();

video.src?=?URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen',?sourceOpen);

}?else?{

console.error('Unsupported?MIME?type?or?codec:?',?mimeCodec);

}

function?sourceOpen()?{

console.log(this);?//?open

var?mediaSource?=?this;

var?sourceBuffer?=?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);

});

};

function?fetchAB(url,?cb)?{

console.log(url);

var?xhr?=?new?XMLHttpRequest;

xhr.open('get',?url);

xhr.responseType?=?'arraybuffer';

xhr.onload?=?function()?{

console.log(xhr.response);

cb(xhr.response);

};

xhr.send();

};

另外，有網(wǎng)友寫了一個(gè)demo，可以看下

源代碼

總結(jié)

以上是生活随笔為你收集整理的js修改video的source_利用 javascript MediaSource 将 HTML video标签的src转成加载blob的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。