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

javascript - 完全从Safari中的CDN预加载html5视频,第1张

我正在寻找一种完全预加载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中运行的视频预加载解决方案?提前谢谢。

最佳答案:

1 个答案:

答案 0 :(得分:1)

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

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

DABAN RP主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
U19学习网站 » javascript - 完全从Safari中的CDN预加载html5视频