在Safari中完全預加載CDN中的html5視頻

我正在尋找一種解決方案來完全預加載html5視頻，以便我可以播放並尋求不同時間而不存在任何緩衝風險。我見過solutions，它涉及到使用xhr將視頻文件下載爲「blob」類型，然後使用createObjectURL方法爲該blob創建一個url。這是解決我上面提到的代碼示例：在Safari中完全預加載CDN中的html5視頻

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();

使用託管在CDN視頻時，這對我的作品在Chrome和Firefox，而不是在Safari瀏覽器。如果我使用託管在同一服務器上的視頻，此解決方案在Safari中也可以使用。我發現這Safari bug，雖然我不知道該錯誤是否仍然有效。上面的解決方案沒有提到頁面上的Safari錯誤。我已經看到另一種方法，它基本上暫停了視頻，並等待它緩衝到100％，但Chrome似乎沒有完全緩衝視頻。

我看着PreloadJS，它顯然支持視頻預加載，但我找不到任何工作示例。我也看了一下html5Preloader，但是一旦結束事件被解僱了，我再也找不到該怎麼做了。

我不確定它是否有任何區別，但我使用Videogular播放我的視頻，需要輸入視頻網址。我猜想如果我使用PreloadJS或html5Preloader等預加載器庫，我猜測它會反過來使用xhr進行視頻處理，我需要在完成的處理程序中訪問新的blob url。

有沒有人想出一個在Safari中工作的視頻預加載解決方案？提前致謝。

來源

2015-06-11 thasher

事實證明，問題是由來自Amazon S3的視頻上的內容類型響應標題引起的。他們被設置爲octet-stream，Chrome和Firefox能夠處理，但Safari發佈媒體錯誤4.將Amazon S3管理站點中的內容類型更改爲「video/mp4」解決了我的問題。

有關Safari和octet-stream的詳細信息，請參見「已知問題」選項卡：http://caniuse.com/#feat=bloburls

來源

2015-06-15 21:13:09 thasher

在Safari中完全預加載CDN中的html5視頻

回答

相關問題