在 Safari 中从 CDN 完全预加载 html5 视频

Question

我正在寻找一种完全预加载 html5 视频的解决方案，这样我就可以播放它并寻找不同的时间，而不会出现任何缓冲风险。我看到 solutions 涉及使用 xhr 将视频文件下载为 'blob' 类型，然后使用 createObjectURL 方法为该 blob 构造一个 url。这是我上面提到的解决方案中的代码示例：

var r = new XMLHttpRequest();
r.onload = function() {
  myVid.src = URL.createObjectURL(r.response);
  myVid.play();
};
if (myVid.canPlayType('video/mp4;codecs="avc1.42E01E, mp4a.40.2"')) {
  r.open("GET", "slide.mp4");
}
else {
  r.open("GET", "slide.webm");
}

r.responseType = "blob";
r.send();

这对我在 Chrome 和 Firefox 中有效，但在使用 CDN 上托管的视频时在 Safari 中无效。如果我使用同一服务器上托管的视频，此解决方案在 Safari 中确实有效。我发现了这个 Safari bug，虽然我不确定这个错误是否仍然有效。上面的解决方案页面上没有提到 Safari 错误。我见过另一种方法，它基本上暂停视频并等待它缓冲到 100%，但 Chrome 似乎从未完全缓冲过视频。

我查看了 PreloadJS，它显然支持视频预加载，但我找不到任何可用的示例。我还查看了 html5Preloader，但我还是不知道一旦完成事件被触发该怎么做。

我不确定这是否有任何区别，但我正在使用 Videogular 播放我的视频，需要输入视频 url。我想如果我使用一些预加载器库，例如 PreloadJS 或 html5Preloader，我猜它会反过来将 xhr 用于视频，我将需要在我完成的处理程序中访问一个新的 blob url。

有没有人想出可以在 Safari 中运行的视频预加载解决方案？提前致谢。

Answer 1

原来问题是由来自 Amazon S3 的视频的内容类型响应 header 引起的。它们被设置为 octet-stream，Chrome 和 Firefox 能够处理，但 Safari 抛出媒体错误 4。将 Amazon S3 管理站点中的内容类型更改为 'video/mp4' 解决了问题对我来说。

有关 Safari 和 octet-stream 的更多信息位于 'Known issues' 选项卡中：http://caniuse.com/#feat=bloburls

在 Safari 中从 CDN 完全预加载 html5 视频

Fully preload html5 video from CDN in Safari

javascript

html

video

safari

html5-video