注意點(diǎn)
1. 獲取編碼信息比較重要:
var mimeCodec = 'video/mp4; codecs="avc1.42C00D,mp4a.40.5"';
可以通過(guò)mp4info工具得到:
mp4info test.mp4 | grep Codec
2.mp4源文件
mp4的需要為fragment類(lèi)型；
可以通過(guò)mp4fragment工具去轉(zhuǎn)換生成：文檔https://www.bento4.com/documentation/
MSE中使用blob url去實(shí)現(xiàn)播放的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<video controls></video>
<script>
function sourceOpen(_) {
console.log(this.readyState); // open
var mediaSource = this;
var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
fetchAB(assetURL, function(buf) {
sourceBuffer.addEventListener('updateend', function(_) {
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() {
cb(xhr.response);
}
xhr.send();
}
var video = document.querySelector('video');
var assetURL = 'output.mp4';
// var assetURL = 'fmp4.mp4';
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
// var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
var mimeCodec = 'video/mp4; codecs="avc1.42C00D,mp4a.40.5"';
if ('MediaSource'in window && MediaSource.isTypeSupported(mimeCodec)) { //
var mediaSource = new MediaSource;
console.log(mediaSource.readyState); // closed
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
console.error('Unsupported MIME type or codec: ', mimeCodec);
}
</script>
</body>
</html>
最終效果
如圖：
image.png
如圖中，最終video標(biāo)簽的src為自動(dòng)生成的一個(gè)blob鏈接
