顯示：沒有視頻元素，它會被緩衝嗎？

我有一個網站在頭版頭部下方播放視頻，視頻非常大，我正在使用媒體查詢將其從移動瀏覽器中刪除。顯示：沒有視頻元素，它會被緩衝嗎？

它顯示正常，就像我想要的一樣。

但我想知道，如果我簡單地將它設置爲顯示：無，它仍然會在後臺緩衝？因此，電話用戶無需任何理由就會有更慢的加載時間？我應該怎麼做，如果是這樣的話？

我搜索了這個問題，我只發現一個遠程相關。但是，問題在於代碼是否會被加載。而且我可以忍受加載額外的一行HTML。所以這不是問題。

來源

2017-03-07 Colobri

使用瀏覽器的開發人員工具，看看會發生什麼 – j08691

通常瀏覽器不加載元素至少加載爲「display：none;」但檢查它像j08691告訴你。 – MFGSparka

如果你不通過JavaScript動態播放它，它不應該。 – sTx

爲了安全起見，我先寫了一個其中有display: none視頻容器一般的CSS規則，然後添加一個規則，一個媒體查詢（@media screen and (min-width: 768px) {...}）的屏幕內上述 768px（或任何你的breakpont是）包含display: block。

這將是一個移動優先的方法，確保它不會加載到較小的屏幕上。

來源

2017-03-07 16:07:20 Johannes

感謝您的移動優先 - allthough，它不直接回答這個問題？ :-) – Colobri

直到前段時間，我確定如果在移動設備上有一個圖像/視頻會被加載，如果首先出現一個帶有「display：block」的通用CSS規則，然後是移動設備的媒體查詢'display：none'爲同一個元素。但是接下來在另一個問題上對此進行了一些討論，似乎已經有一些較新的瀏覽器版本可以避免在這種情況下加載內容。我不確定這一點，正如我所說的，爲了安全起見，請使用這種移動優先方法 - 在這種情況下，我確信桌面內容不會在移動設備上加載。 – Johannes

太棒了！我想那是最安全的方式，非常感謝，從現在開始我會這樣做！ :-) – Colobri

看起來像火狐（51.0.1桌面）正在加載圖像display:none。如果設備是移動設備，只是在視頻不真實的情況下才加載視頻會不會更好？

事情是這樣的：

//only load video if screen width is greater than 768px 
if(screen.width > 768){ 
    $('#video-container').html(videoHtml); 
}

其中videoHtml是您的視頻元素。

而且你可以選擇加載一個較低分辨率視頻在移動設備上：

//only load video if screen width is greater than 768px 
if(screen.width > 768){ 
    $('#video-container').html(videoHtml); 
} 
else{ 
    $('#video-container').html(lowResVideoHtml); 
}

但也有許多其他更好的方法來檢測設備是否是移動設備不是看屏幕的寬度。看到這個問題的一些方法：https://stackoverflow.com/a/3540295/7353781

來源

2017-03-07 16:25:26 user7353781

顯示：沒有視頻元素，它會被緩衝嗎？

回答

相關問題