MediaSource按需加载demo及分析

MediaSource demo

按需加载demo如下：

js 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <video controls></video>
    <script>
      var video = document.querySelector('video');

      var assetURL = 'h265.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 totalSegments = 5;
      var segmentLength = 0;
      var segmentDuration = 0;
      var bytesFetched = 0;
      var requestedSegments = [];

      for (var i = 0; i < totalSegments; ++i) requestedSegments[i] = false;

      var mediaSource = null;
      if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
        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);
      }

      var sourceBuffer = null;
      function sourceOpen (_) {
        sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
        getFileLength(assetURL, function (fileLength) {
          console.log((fileLength / 1024 / 1024).toFixed(2), 'MB');
          //totalLength = fileLength;
          segmentLength = Math.round(fileLength / totalSegments);
          //console.log(totalLength, segmentLength);
          fetchRange(assetURL, 0, segmentLength, appendSegment);
          requestedSegments[0] = true;
          video.addEventListener('timeupdate', checkBuffer);
          video.addEventListener('canplay', function () {
            segmentDuration = video.duration / totalSegments;
            video.play();
          });
          video.addEventListener('seeking', seek);
        });
      };

      function getFileLength (url, cb) {
        var xhr = new XMLHttpRequest;
        xhr.open('head', url);
        xhr.onload = function () {
            cb(xhr.getResponseHeader('content-length'));
          };
        xhr.send();
      };

      function fetchRange (url, start, end, cb) {
        var xhr = new XMLHttpRequest;
        xhr.open('get', url);
        xhr.responseType = 'arraybuffer';
        xhr.setRequestHeader('Range', 'bytes=' + start + '-' + end);
        xhr.onload = function () {
          console.log('fetched bytes: ', start, end);
          bytesFetched += end - start + 1;
          cb(xhr.response);
        };
        xhr.send();
      };

      function appendSegment (chunk) {
        sourceBuffer.appendBuffer(chunk);
      };

      function checkBuffer (_) {
        var currentSegment = getCurrentSegment();
        console.log(123, currentSegment, video.currentTime)
        if (currentSegment === totalSegments && haveAllSegments()) {
          console.log('last segment', mediaSource.readyState);
          mediaSource.endOfStream();
          video.removeEventListener('timeupdate', checkBuffer);
        } else if (shouldFetchNextSegment(currentSegment)) {
          requestedSegments[currentSegment] = true;
          console.log('time to fetch next chunk', video.currentTime);
          fetchRange(assetURL, bytesFetched, bytesFetched + segmentLength, appendSegment);
        }
        //console.log(video.currentTime, currentSegment, segmentDuration);
      };

      function seek (e) {
        console.log(e);
        if (mediaSource.readyState === 'open') {
          sourceBuffer.abort();
          console.log(mediaSource.readyState);
        } else {
          console.log('seek but not open?');
          console.log(mediaSource.readyState);
        }
      };

      function getCurrentSegment () {
        return ((video.currentTime / segmentDuration) | 0) + 1;
      };

      function haveAllSegments () {
        return requestedSegments.every(function (val) { return !!val; });
      };

      function shouldFetchNextSegment (currentSegment) {
        return video.currentTime > segmentDuration * currentSegment * 0.8 &&
          !requestedSegments[currentSegment];
      };
    </script>
  </body>
</html>

最终效果如下：

可以看到，视频一开始只加载了一段视频资源，在快要加载完后又继续加载了。

Q & A

MeidaSource是如何实现视频播放的？

1.MediaSource为媒体资源接口，通过createObjectURL生成播放url.

js 复制代码

video.src = URL.createObjectURL(mediaSource)

SourceBuffer 接口表示通过 MediaSource 对象传递到 HTMLMediaElement 并播放的媒体分块。它可以由一个或者多个媒体片段组成。通过mediaSource.addSourceBuffer生成SourceBuffer.
ArrayBuffer 对象用来表示通用的原始二进制数据缓冲区，类似于c语言的数组。就是通过不断的SourceBuffer.appendBuffer(ArrayBuffer)实现分段操作的。（注意ArrayBuffer初始化后长度不能改变）.

如何在初始化的时候拿到视频长度？

通过head请求

该方法只返回资源的header信息，可以通过响应头的content-length字段获取资源长度。

如何实现分段请求？

使用请求头的Range字段，可以请求资源的特定字节区间的内容。

注意响应码206，表示表示请求已成功，并且主体包含所请求的数据区间，该数据区间是在请求的 Range 首部指定的。

然后通过HTMLMediaElement.timeupdate事件确定当前视频播放的时间，在当前缓存数据播放快完成时，加载下一段内容。

用户拖动进度条时如何处理

用户拖动进度条也能被HTMLMediaElement.timeupdate事件监听到，从而加载对应的代码片段，但是上面的demo会卡死。暂时不知原因（难道需要remove掉原有的片段？）

解码能力怎么样

参考codecs,应该也就只能支持浏览器原生支持的解码方式。

看了下没找到hevc,那h265格式的视频应该是不支持了。难道h265就只能用wasm硬解码？

和原生video比较如何？

1、比原生video灵活，按需加载不仅可以节省视频播放流量压力，在直播中也经常用到（例如flvjs） 2、解码能力感觉不相上下了，在测试过程中甚至出现了video原生可以播放但是MediaSource无法播放的情况（主要是视频的完整mimeType不知道确定）