用Javascript博客大型视频文件视频

Question

当前，我正在尝试将视频文件放置为blob src。为什么？因为，我正在尝试防止人们对我的视频文件进行热链接，所以我知道不可能将链接保持100％的安全，但是我正在尽最大努力避免任何相关的事情。

HTML：

<video width="320" height="240" controls></video>

脚本：

var videoURL = 'https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4';
var video = document.querySelector('video');

var assetURL = videoURL;
// Need to be specific for Blink regarding codecs
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();
};

此代码完美运行！但是，例如，当视频大小大于200MB时，视频将加载，直到视频缓冲区下载结束。

我如何才能使此代码“逐段”加载，而不是将整个视频下载到此后，再生成blob？

谢谢。