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

【问题标题】：Fully preload html5 video from CDN in Safari在 Safari 中从 CDN 完全预加载 html5 视频
【发布时间】：2015-08-27 16:26:10
【问题描述】：

我正在寻找一种完全预加载 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 播放我的视频，需要为其提供视频网址。我想如果我使用一些预加载器库，例如 PreloadJS 或 html5Preloader，我猜这又会使用 xhr 来处理视频，我需要在我完成的处理程序中访问一个新的 blob url。

有没有人想出适用于 Safari 的视频预加载解决方案？提前致谢。

【问题讨论】：

标签： javascript html video safari html5-video

【解决方案1】：

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

有关 Safari 和八位字节流的更多信息，请参见“已知问题”标签：http://caniuse.com/#feat=bloburls

【讨论】：