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，虽然我不确定这个bug是否仍然有效。使用上述解决方案，页面上没有提到Safari错误。我已经看到了另一种方法，它基本上暂停了视频并等待它缓冲到100％，但Chrome似乎并没有完全缓冲视频。

我查看了PreloadJS，它显然支持视频预加载，但我找不到任何有用的例子。我也查看了html5Preloader，但是一旦完成事件被触发，我再也无法弄清楚要做什么。

我不确定它是否有任何区别，但我正在使用Videogular播放我的视频，需要提供视频网址。我想如果我使用一些预载器库，比如PreloadJS或html5Preloader，我猜测它会反过来使用xhr作为视频，我需要在我完成的处理程序中访问一个新的blob url。

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

Answer 1

事实证明问题是由来自Amazon S3的视频上的内容类型响应标头引起的。它们设置为八位字节流，Chrome和Firefox能够处理，但Safari引发了媒体错误4.将Amazon S3管理站点中的内容类型更改为“video / mp4”解决了我的问题。

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

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

1 个答案: