我正在寻找一种完全预加载 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 的 bug。我见过另一种方法，它本质上是暂停视频并等待其缓冲到 100%，但 Chrome 似乎从未完全缓冲视频。
我研究了 PreloadJS，它显然支持视频预加载，但我找不到任何有效的示例。我还研究了 html5Preloader，但我再次不知道触发完成事件后该怎么做。
我不确定这是否有任何区别，但我正在使用 Videogular 播放我的视频，需要输入视频网址。我想如果我使用一些预加载器库，例如 PreloadJS 或 html5Preloader(我猜它们会反过来使用 xhr 来播放视频)，我将需要在完成的处理程序中访问新的 blob url。
有人提出了适用于 Safari 的视频预加载解决方案吗？提前致谢。
最佳答案
事实证明，问题是由来自 Amazon S3 的视频上的内容类型响应 header 引起的。它们被设置为八位字节流，Chrome 和 Firefox 能够处理，但 Safari 抛出媒体错误 4。将 Amazon S3 管理站点中的内容类型更改为“视频/mp4”为我解决了这个问题。
有关 Safari 和 octet-stream 的更多信息，请参见“已知问题”选项卡:http://caniuse.com/#feat=bloburls
关于javascript - 在 Safari 中从 CDN 完全预加载 html5 视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30789875/