网页视频之H5+Mse

使用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);
        };

现在的难点在于如果一段文件播放完之后，再播出另外一段