如何避免在同一頁面重複加載HTML視頻？

在同一頁面中使用相同的視頻兩次似乎強制不必要的媒體重新加載。如何避免在同一頁面重複加載HTML視頻？

比較加載視頻加載圖像：

<img src="image.png"/> 
<img src="image.png"/> 
<video src="video.webm"></video> 
<video src="video.webm"></video>

據火狐5的Web控制檯，這一次加載圖像，但視頻的兩倍。

我從http://www.w3.org/TR/html5/video.html#dom-media-mediagroup瞭解到，規範的作者希望在這兩種情況下（「引用相同媒體資源的多個媒體元素將共享單個網絡請求」）期待單次重新載入，但這不會發生在我身上。

我試圖玩弄服務器緩存參數（我使用香草web.py），無濟於事，我懷疑這是在錯誤的樹上吠叫。有什麼具體的我應該看？ HTML元素？

請注意，這與具有多個相同視頻源的常見問題相反。這裏我關心的是有多個視頻元素具有相同的源並排播放（例如，在不同的時間點）。

來源

2011-08-12 Jaga Waterskin

有趣的問題。你會使用JavaScript來控制兩個視頻元素嗎？我很想知道如果在第一個視頻加載完成後動態添加第二個視頻元素會發生什麼情況。 – BumbleB2na

@ BumbleB2na我試過，'$（「＃hook」）。append（video_html）.append（video_html）'（其中video_html是一個視頻元素）實際上發出了四個GET請求，其中兩個需要很長的時間。 –

4 GET請求.. yikes。是的，有關於特殊媒體緩存

如果您檢查下載的視頻的大小，他們都下載完整的視頻？

在我的測試中，大多數瀏覽器會下載一個小塊（足以顯示拇指），然後在需要時下載完整視頻 - 所以我想知道是否將這個數字計爲兩次完整下載，實際上只有一次完整下載和一個部分。

在Bruce Lawson的幫助下，我在6月份做了一些測試，發現有些瀏覽器執行的負載比我上面介紹的兩個更多。

HTML 5 Video In Real Life (Tests)

來源

2011-10-10 13:59:25 Fenton

你當然可以把視頻中的縮略圖，並有當有人點擊了他們加載，它可能會幫助，如果你不能找到別的東西。

來源

2011-10-10 15:00:41

這樣的聲音是您使用的瀏覽器中的一個錯誤，因爲它顯然不遵守W3C HTML 5規範。我建議你爲該瀏覽器的開發人員提交一份錯誤報告，並測試該行爲與其他瀏覽器的比較情況。

來源

2011-12-06 19:41:38

如果您使用Html 5，那麼最好使用Canvas。它會加載視頻一次。

來源

2011-12-28 14:31:51

這項工作：

<video id="video" class="videohtml5" width="720" height="500" controls="controls" preload="auto" poster=""> 
     <source src="path(1)" /> 
     <source src="path(2)" /> 
     <source src="path(3)" /> 
</video>

來源

2011-12-31 13:27:23 drake

使用代碼格式化代碼（Ctrl + K）:) –

我認爲，人們在這裏誤讀規範。

如果你看看規範中的例子，他們特別談論包含多個軌道的單個資源（文件）。這兩個視頻元素包含對同一文件的引用，但包含該文件中的不同音軌。然後通過媒體組同步播放兩首曲目。

如果你有兩個視頻標籤引用同一個文件的同一個音軌，我不希望他們默認同步播放。我可以想象，通過在同一個媒體組中指定它們可以實現這一點，並因此允許這兩個元素使用單一連接與一個請求流。

如果兩個視頻不會同步播放，期望瀏覽器通過單個請求集加載兩個視頻是不合理的。請注意，這是一個請求集，視頻可能會以視頻或媒體會話的方式向服務器生成很多請求（請考慮停止，暫停和重新啓動），這可能比服務器長得多，或者客戶端願意保持打開單個連接。

想象一下，如果兩個元素有不同的控制。您暫停第一個視頻並保留第二個視頻。 30分鐘過去了，你重新開始第一個視頻。瀏覽器根本不會緩存來自服務器的超過一百兆字節的內容，以允許它在不向服務器發出新請求的情況下播放第一個視頻。

如果您希望通過使用HTTP的單個連接發送兩個離散的流內容片段，那麼我不認爲這是可能的（當然，目前已經實現）。這將是多路複用，最後我檢查，HTTP服務器不支持多路複用。請注意，這與保持活動連接不同，在該連接中多個內容串行服務，多路複用描述的是並行服務的多個內容。實現這一點的通常方法是打開兩個套接字，這對於客戶端和服務器來說都要比解決單個數據流更簡單。

來源

2011-12-31 14:38:34 PlexQ

如何避免在同一頁面重複加載HTML視頻？

回答

相關問題