是否可以在JS中为HTML5视频源生成比特流？

Question

我想在JavaScript中动态生成比特流,例如大型OGG视频.是否有可能告诉浏览器向比特流询问JavaScript函数而不是向某个位置发出HTTP-GET-Request？

我发现,将数据提供给视频标记的唯一可能方法是包含数据:-URLs.但这需要整个视频在文档中进行编码.

对于通常会流式传输的大型视频来说,这是一个糟糕的解决方案.AFAIK您无法动态地向数据网址添加更多数据.

有谁知道这是否可能以某种方式？

Answer 1

现在使用MediaSource API应该可以实现这一点。

这是上面链接中的示例：

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