多種視頻的不加載的所有視頻的Chrome

我的代碼片段是一樣的東西，

<div class="video_content left"> 
    <span style="font-weight:bold">1</span> 
    <video width="213" height="120" controls class="video_tag"> 
     <source src="<MY VIDEO SOURCE>" type="video/mp4" /> 
    </video> 
</div> 
<div class="video_content left"> 
    <span style="font-weight:bold">2</span> 
    <video width="213" height="120" controls class="video_tag"> 
     <source src="<MY VIDEO SOURCE>" type="video/mp4" /> 
    </video> 
</div> 
<div class="video_content left"> 
    <span style="font-weight:bold">3</span> 
    <video width="213" height="120" controls class="video_tag"> 
     <source src="<MY VIDEO SOURCE>" type="video/mp4" /> 
    </video> 
</div> 
<div class="video_content left"> 
    <span style="font-weight:bold">4</span> 
    <video width="213" height="120" controls class="video_tag"> 
     <source src="<MY VIDEO SOURCE>" type="video/mp4" /> 
    </video> 
</div>

有時我會得到20 +視頻在一個頁面上，這樣我就可以創建很多視頻標籤。

每當我在我的本地主機上試用這段代碼時，它可以正常工作，但是如果我在遠程服務器上託管這段代碼，並嘗試只加載少量視頻，但在我的chrome inspect元素中沒有錯誤消息。

我試着用一段時間間隔使用jQuery重新加載視頻，那時候我會在chrome的Inspect元素中看到「臨時頭文件」的警告。

任何人都可以請幫我解決這個問題嗎？

在此先感謝。

來源

2014-10-06 harishkumar329

這可能是瀏覽器一次全部下載的大量數據，具體取決於文件的大小以及服務器的速度和距離。嘗試給每個視頻標籤一個preload屬性並將其設置爲「元數據」。像這樣：

<video width="213" height="120" controls class="video_tag" preload="metadata">

這應該限制瀏覽器需要一次加載所有文件的數量，只加載每個視頻文件的標題。一旦你開始播放，文件的其餘部分將加載。如果這不起作用，請嘗試將預加載設置爲「無」。

另外，您需要確保遠程服務器正在使用HTTP字節服務。即視頻文件上的HTTP狀態標題應該是「206部分內容」，而不是「200 OK」。

來源

2014-10-06 12:16:41 brianchirls

鉻限制的視頻/音頻文件的數量爲4或6（我不記得是哪），因此，爲brianchirls提到，您需要設置preload屬性，雖然你需要將其設置爲none。

我的建議是爲所有視頻提供海報圖片（通過poster屬性）並將preload="none"設置爲全部。這樣，如果用戶主動點擊播放按鈕，瀏覽器實際上只會嘗試加載它們。

或者，您可以將第一個4/6視頻設置爲preload="metadata"，其餘的設置爲preload="none"。

來源

2014-10-06 12:29:10

多種視頻的不加載的所有視頻的Chrome

回答

相關問題