hidden-xs hidden-sm中的視頻是否已下載？

我正在創建一個網站，在div裏面我有一個視頻，但我不想在移動設備上顯示此視頻，所以我使用隱藏x和隱藏sm，迄今爲止這麼好。hidden-xs hidden-sm中的視頻是否已下載？

但是，我的問題是，當我使用這些類視頻不下載或只是不顯示？因爲它們之間存在巨大差異，考慮移動數據計劃的數據消耗。

在Chrome上使用開發工具，在使用3G的網絡選項卡上，不顯示它是否下載。

那麼，如何100％確定要使用什麼？ hidden-xs和sm或CSS媒體查詢？

而且，我完全知道useragent，但有一千個。所以我需要指定它們中的每一個。我有專門的片段，但我不認爲這是一個好主意，在所有... ...不幸

歡呼= d

來源

2015-10-19 Fabrizio Tofanelli

這是一個依賴於瀏覽器的情況。一般來說，即使在媒體查詢中，瀏覽器也不會顯示隱藏的內容。

，並防止視頻下載你不需要的JavaScript，簡單的添加preload: none或preload: metadata（如果您想檢索有關文件的基本信息）作爲video屬性。

報價從the <video> specification

preload = 「無」或「元數據」或「自動」或「」（空串）或空表示一個暗示給UA關於是否樂觀下載視頻本身或其元數據是否值得考慮。

「無」：提示給UA用戶預計不會需要的視頻，或儘量減少不必要的流量是可取的。

「元數據」：提示向UA用戶預期不會需要的視頻，但獲取其元數據（尺寸，第一幀，曲目列表，持續時間等）是理想的。

*「auto」：提示UA樂觀地下載整個視頻被認爲是可取的。**

指定空字符串等同於指定值「auto」。

來源

2015-10-19 05:09:46

膨脹....它似乎比使用任何其他方式更合理....非常感謝！ –

我剛剛在Chrome上做了一個測試，使用「preload = none」，但仍然在網絡和資源上加載......這是越來越怪異.... –

它的下載，它是通過使用連接到手機瀏覽器調試工具驗證，該文件仍在下載。所以解決方案是用js添加視頻。

使用這個網站添加視頻：

<video preload="none" class="hidden-xs" autoplay="autoplay" poster="fallback-image.jpg" loop="loop" id="myVideo"> 
</video>

但首先檢測移動設備使用JavaScript和添加視頻時，它不是手機瀏覽器：

function detect() { 
    if(navigator.userAgent.match(/Android/i) 
     || navigator.userAgent.match(/webOS/i) 
     || navigator.userAgent.match(/iPhone/i) 
     || navigator.userAgent.match(/iPad/i) 
     || navigator.userAgent.match(/iPod/i) 
     || navigator.userAgent.match(/BlackBerry/i) 
     || navigator.userAgent.match(/Windows Phone/i)){ 

     // If mobile browser 

    } else { 
     // If not mobile 
     document.getElementById("myVideo").innerHTML = '<source src="video.webm" type="video/webm"><source src="video.mp4" type="video/mp4">'; 
    } 
}

來源

2015-10-19 05:06:34 kakajan

也許是因爲您要求提供元數據信息而下載。 –

@kakajan .....你是否介意重做同樣的測試，但是使用「preload = none」來確定嗎？我昨天打破了我的手機，我不能在這個時候做這個測試...乾杯 –

opps，對不起，使用preload = none做，不要使用元數據 – kakajan

hidden-xs hidden-sm中的視頻是否已下載？

回答

相關問題