使用H5+Mse,可以以流的形式播放视频,而不一定要文件。今天对他的主要api进行了一下研究。
查询浏览器是否支持Mse
if (!window.MediaSource) {
console.error('No Media Source API available');
return;
}
设置H5的视频源为Mse
var ms = new MediaSource();
video.src = window.URL.createObjectURL(ms);
设置MSE的sourceopen事件
ms.addEventListener('sourceopen', onMediaSourceOpen);
再onMediaSourceOpen里面准备相关的媒体相关数据
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
新建websocket准备接收数据
ws = new WebSocket(url);
ws.binaryType = "arraybuffer";
websocket接收数据赋值给sourcebuffer
ws.onmessage = function (e) {
sourceBuffer.appendBuffer(buf);
};
现在的难点在于如果一段文件播放完之后,再播出另外一段