可以在JS中为HTML5视频源生成码流吗？

Question

我想在JavaScript中动态生成一个比特流，比如一个大的OGG视频。有没有可能告诉浏览器向JavaScript函数请求比特流，而不是向某个位置发出HTTP-GET-请求？

我发现，向video-tag提供数据的唯一可能方式是包含data:-URLs。但这需要在文档中对整个视频进行编码。

对于大视频来说，这是一个糟糕的解决方案，通常会流媒体播放。AFAIK你不能动态地将更多的数据添加到数据URL。

有谁知道这是不是可能的呢？

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

Answer 2

我不知道使用Javascript是否可行，但您可能可以使用Java或Javascript (?)像科尔塔多那样的球员。

http://www.flumotion.net/cortado/

Answer 3

如果您的视频是针对流进行编码的，则任何请求它的浏览器都会逐步下载它。这就是它的工作方式。您将同时需要OGG和MP4来实现

FF/Chrome/IE9。

http://www.mediacollege.com/video/streaming/http.html

“在文档上编码”没有任何意义。视频由您的编码器编码，并且可以进一步优化流式传输的设置(即，它以较低的比特率对前XX秒进行编码，以更快地开始)。