Question

我正在寻找通过HTML5视频播放相对较大（最高500mb）MP4 / WebM的方法。复杂的是视频不能作为URL或文件使用，而是作为Blob s的序列。

该应用主要面向桌面（Chrome）和移动（Android / iOS Webview）离线使用。没有能力在本地流式传输视频，我完全依靠客户端JS（没有原生平台扩展）。

视频存储在资源容器中（存储实现超出了问题的范围）并且由于其大小而无法立即加载，但可以将其作为多个Blob块进行检索和缓冲。

从未分割的MP4 / WebM读取块而不是分割它会更方便，但我想这种方法需要本地流服务器。

如果有必要，可以事先将视频分割成较小的片段（~10Mb），但它们应该无缝播放。

我最初尝试的方法看起来像那样

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

getBlob('webm-chunk1')
.then(function (chunk1) {
  var url = URL.createObjectURL(chunk1); 
  player.src = url;
  player.play();

  return getBlob('webm-chunk2');
})
.then(function (chunk2) {
  var url = URL.createObjectURL(chunk2); 

  player.addEventListener('ended', handler, false);

  function handler() {
    player.removeEventListener('ended', handler);

    player.src = url;
    player.load();
    player.play();
  }
});

以下是展示它的a plunker，目前适用于Chrome。无缝播放存在问题，两个块之间的间隙是显而易见的。即使有两个<video>开启ended事件，仍然存在~100ms的差距。

如何将一系列逐步加载Blob作为无缝HTML5视频播放？

使用MP4 / WebM Blob块播放本地HTML5视频

0 个答案: