注意点
1. 获取编码信息比较重要:
var mimeCodec = 'video/mp4; codecs="avc1.42C00D,mp4a.40.5"';
可以通过mp4info工具得到:
mp4info test.mp4 | grep Codec
2.mp4源文件
mp4的需要为fragment类型；
可以通过mp4fragment工具去转换生成：文档https://www.bento4.com/documentation/
MSE中使用blob url去实现播放的代码：
<!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标签的src为自动生成的一个blob链接
