使用 MediaSource API 处理不断增长的文件。答案

【问题标题】：Steaming a growing file using the MediaSource API.使用 MediaSource API 处理不断增长的文件。
【发布时间】：2013-10-23 16:16:18
【问题描述】：

所以我有一个正在下载的 .mp4 文件。我想使用 MediaSource API 将下载文件流式传输到视频元素中。我该怎么做？

const NUM_CHUNKS = 5;

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

video.addEventListener('webkitsourceopen', function(e) {
  var chunkSize = Math.ceil(file.size / NUM_CHUNKS);

  // Slice the video into NUM_CHUNKS and append each to the media element.
  for (var i = 0; i < NUM_CHUNKS; ++i) {
    var startByte = chunkSize * i;

    // file is a video file.
    var chunk = file.slice(startByte, startByte + chunkSize);

    var reader = new FileReader();
    reader.onload = (function(idx) {
      return function(e) {
    video.webkitSourceAppend(new Uint8Array(e.target.result));
    logger.log('appending chunk:' + idx);
    if (idx == NUM_CHUNKS - 1) {
      video.webkitSourceEndOfStream(HTMLMediaElement.EOS_NO_ERROR);
    }
      };
    })(i);

    reader.readAsArrayBuffer(chunk);
  }
}, false);

如何动态更改 NUM_CHUNKS 并切片视频？

【问题讨论】：

标签： javascript html google-chrome video media-source

【解决方案1】：

code you're using from Eric Bidelman 截取了浏览器已完全下载的视频，以演示 api 的工作原理。实际上，您会在服务器上slice 视频，客户端会按顺序下载每个块，可能带有AJAX request。

我首先建议您在演示代码中尝试使用 .mp4，因为 MediaSource 似乎对它接受的视频文件格式非常挑剔。请参阅Steven Robertson's answer，了解如何创建可以工作的 mp4。

然后由您决定是要事先手动切片视频，还是在服务器上动态切片（具体取决于您的服务器）。 javascript客户端不应该关心每个块有多少或有多大，只要它们是按顺序提供的（我认为规范甚至允许一些乱序附加）。

【讨论】：

【解决方案2】：

webkitMediaSourceURL; 现在在 Chrome 中已过时，现在需要使用 createObjectURL();。

这里的补丁：HTMLMediaElement to the new OO MediaSource API 给了我一些关于我需要在我的代码中更新什么的指示。

【讨论】：