Youtube的HTML5視頻播放器如何控制緩衝？

我在觀看YouTube視頻，並決定調查其視頻播放器的某些部分。我注意到，與大多數HTML5視頻不同，Youtube的視頻播放器不會執行正常的視頻源，而是使用blob網址作爲源。Youtube的HTML5視頻播放器如何控制緩衝？

此前我測試過HTML5視頻，並且我發現服務器開始從一開始就將整個視頻進行流式傳輸，並在後臺緩衝整個視頻的其餘部分。這意味着如果您的視頻爲300 megs，則會下載所有300 megs。如果你尋求中間的話，它會開始從尋找位置一路下載到最後。

Youtube不能這樣工作（至少在鉻）。相反，它設法控制緩衝，所以它只在暫停時緩衝一定量。它也似乎只緩衝相關的部分，所以如果你跳過它將確保不緩衝不可能被觀看的部分。

在我試圖調查這是如何工作的，我注意到視頻src標記的值爲blob:http%3A//www.youtube.com/ee625eee-2802-49b2-a13f-eb374d551d54，它指向我blobs，然後導致我到typed arrays。使用這兩種資源，我可以將mp4視頻加載到blob中，並將其顯示在HTML5視頻標籤中。

但是，我現在堅持的是Youtube如何處理這些作品。看着網絡流量，它似乎發送請求到http://r6---sn-p5q7ynee.c.youtube.com/videoplayback，它將二進制視頻數據以1.1mb的塊返回。同樣值得注意的是，由於HTML5視頻請求導致的大多數正常請求似乎在流式傳輸時收到了206響應代碼，而YouTube的playvideo呼叫則回到了200。

我試圖嘗試只加載一個字節範圍（通過設置Range http頭），但不幸失敗（我假設因爲沒有與視頻一起出現的視頻的元數據）。

在這一點上我堅持搞清楚Youtube是如何實現這一點的。我想出了幾個想法，但我沒有完全賣出：

1）Youtube發送每個/videoplayback調用自我包含的視頻和音頻塊。這似乎是上傳方面的一個相當沉重的負擔，看起來它們很難將它們拼接在一起，使它看起來像是一個無暇的視頻。此外，視頻標籤似乎認爲這是一個完整的視頻，從呼籲$('video').duration和$('video').currentTime判斷，這導致我相信視頻標籤認爲它是一個單一的視頻文件。最後，vidoe src標籤永遠不會改變，這使我相信它正在使用一個單一的blob，而不是交換blob。

2）Youtube構建了一個空的blob，預先大小爲完整的視頻陣列，並在下載它時更新blob。然後它會確保用戶沒有接近最後下載的部分（以防止用戶進入blob的未下載部分）。我看到這個問題，我沒有看到任何方式通過JavaScript動態更新blob（雖然也許我只是麻煩搜索它）

3）Youtube下載元數據，然後開始構建通過在下載視頻片段時按順序添加blob。我用這種方法看到的問題是我不明白它如何處理後緩衝區域的搜索。。

也許我「米只是缺少一個明顯的答案這是正確的在我的面前任何人有任何想法

編輯：我只是想第四個選項。另一個想法是，他們可能會使用文件API將二進制塊寫入文件並使用該文件進行流式處理。文件API似乎有能力尋找特定的位置，因此允許您填充空字節的視頻並在收到時填入它們。這絕對適用於視頻搜索。

來源

2013-10-08 KallDrexx

我以爲他們使用[MediaStream API]（https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_API），但到目前爲止我一直懶得無法完全調查。請做，讓我知道！ =） – Rudie

與[MediaSource API]（http://updates.html5rocks.com/2011/11/Stream-video-using-the-MediaSource-API）不同... – Rudie

有趣的API，儘管它缺乏相當的有些東西是需要的（比如開始的一種方式），除非我錯誤地閱讀東西。無論哪種方式，我不在我工作的公司工作，在那裏我正在進行這項研究，不知道我什麼時候會回到這種類型的東西:) – KallDrexx

當您查看GoogleChrome的AppData時，在播放YouTube視頻時，您會看到它緩衝在分段文件中。上傳到YouTube的視頻是分段的，這就是爲什麼如果該時間段超出當前分段，您無法在第一次點擊欄上完全確定時間範圍。

段的數量取決於視頻的長度以及開始和停止播放視頻的時間。

當您鏈接到視頻的時間範圍時，它將簡單地跳過緩衝在該時間範圍之前出現的片段。

不幸的是，我不太瞭解視頻播放的編碼，但我希望這可以指導您正確的方向。

來源

2013-10-09 08:58:09 MilanSxD

有趣的是，我看到許多文件被添加到我的AppData \ Local \ Google \ Chrome \ User Data \ Default \ Cache目錄中，並根據網絡流量判斷1.1MB文件是視頻塊。現在問題仍然是如何將它們縫合在一起。謝謝:) – KallDrexx

Youtube僅在支持Media Source Extensions的瀏覽器中使用此功能，因此由瀏覽器根據此功能決定所有其他功能。

來源

2014-04-02 22:47:51

沒有在頁面畫布元素，也許這將有助於 http://html5doctor.com/video-canvas-magic/

我們知道視頻是被分割的，問題是如何將它們拼接together.i認爲真正的視頻元素不會做劇中工作，它支持數據源，每幀繪製seagments的canvas元素。

var v = document.getElementById('v'); 
var canvas = document.getElementById('c'); 
v.addEventListener('play', function(){ 
    if(v.paused || v.ended) return false; 
    c.drawImage(v,0,0,w,h); 
    setTimeout(draw,20,v,c,w,h); 
},false);

來源

2014-10-28 03:21:23 vetch

請再解釋一下你的答案（可能是通過你提供的鏈接添加一些信息）。不鼓勵鏈接的答案。 – soktinpk

對不起，我的英文很差。我們知道視頻被分割了，問題是如何將它們拼接在一起。我認爲真正的視頻元素不會做播放工作，它支持數據源，並繪製每幀到畫布元素... – vetch

如果你把它放到你的答案中，我會恢復downvote。 – soktinpk

好，所以很少，你需要知道的事情是，YouTube正基於這個偉大的開源Project。它對每個瀏覽器都有不同的表現，如果你的瀏覽器支持更加密集的解碼，比如WEBM，它將使用它來保存Google的帶寬。此外，如果你看看這個Demo 然後你會發現一個部分，將整個視頻下載到一個名爲「離線存儲」的東西。我知道chrome有它，而其他一些瀏覽器在某些情況下並不是每個都需要使用整個視頻源而不是blob。所以這個blob是流媒體，取決於用戶與視頻的交互。是的，視頻只有一個文件，它們具有該視頻的元數據，就像一個小數據庫，可以告訴視頻的時間以及塊的分割點。

您可以通過閱讀項目文檔。我真的建議你看看演示。

來源

2016-12-20 12:45:19 Adminy

Youtube的HTML5視頻播放器如何控制緩衝？

回答

相關問題