关于mediaSource

Question

在mdn上看到的一个例子，很纳闷这个和正常使用src直链有啥区别？都是流媒体，支持边加载边播放
https://developer.mozilla.org...

var video = document.querySelector('video');

var assetURL = 'frag_bunny.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"';

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

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();
};

Answer 1

将传统直链转换成流媒体可以增加视频的盗取门槛，可以无刷新、不暂停的更换分辨率，不用担心浏览器的视频格式（只要是支持fragment视频分段的就可以）。总之就是更灵活的在前端控制流媒体的播放。
他这个例子只是个media source的hello world

Answer 2

链接给的 是 hls 分片 好处是 按需(清晰度)加载，载入快(MP4 文件 头包身子 无限嵌套 必须要获得全部 头才能初始化 这个头跟文件大小成 正比关系)

分片就是帮 完整MP4 分成 很小的片段 这样头就很小，hack点的前端自己都能生成，然后后面的分片，自己对好时间(hls的M3U8 就是干这个的)按需加载 某个时间段的分段即可

坏处就是 碎片文件 贼TM多。