如何鼓勵瀏覽器緩存HTML5 <video>海報圖片？

我有一個網頁的一系列網頁上內嵌視頻：如何鼓勵瀏覽器緩存HTML5 <video>海報圖片？

<video controls preload="metadata" poster="/path/to/video1/poster-image-1.jpg"> 
<video controls preload="metadata" poster="/path/to/video2/poster-image-2.jpg"> 
<video controls preload="metadata" poster="/path/to/video3/poster-image-3.jpg">

後，我加入了視頻，頁面加載速度放慢了很多，所以我開始試圖確定的瓶頸。

在Firefox開發者工具的網絡標籤顯示，每個poster圖像將返回206部分內容和poster圖像總是被從服務器下載，永遠不會從本地瀏覽器緩存 - 這是這一點，正在減慢該頁面2-3秒。

如何確保從本地瀏覽器緩存中檢索到圖像<video>poster？

是有一系列不可見圖像的其他地方在頁面上唯一的解決辦法，就像這樣：

.preload {width: 1px; height: 1px; opacity: 0;} 

<img class="preload" src="/path/to/video1/poster-image-1.jpg" alt="" /> 
<img class="preload" src="/path/to/video2/poster-image-2.jpg" alt="" /> 
<img class="preload" src="/path/to/video3/poster-image-3.jpg" alt="" />

來源

2017-10-19 Rounin

是海報URL的完整鏈接（像'http：// example.com/images/image.jpg'）或相對的（像'images/image.png'）？ –

文件路徑是_relative-to-root_（如'/ images/image.svg'）。 – Rounin

我無法找到一個方法來緩存poster屬性的圖像，所以我嘗試刪除所有poster屬性。

然後我發現即使沒有poster，preload="metadata"屬性仍然顯着減慢了頁面加載時間。

所以，最終，我與preload="none"更換preload="metadata"並寫了一個簡短的腳本到poster屬性添加到DOM異步，幾秒鐘的頁面已經加載完成後：

function asyncVideo() { 
    var videos = document.getElementsByTagName('video'); 

    for (var i = 0; i < videos.length; i++) { 
     var posterSrc = videos[i].getElementsByTagName('source')[0].getAttribute('src'); 
     posterSrc = posterSrc.replace('.mp4', '.jpg'); 
     videos[i].poster = posterSrc; 
    } 
} 

setTimeout(asyncVideo, 6000);

來源

2017-10-23 08:35:43 Rounin

如何鼓勵瀏覽器緩存HTML5 <video>海報圖片？

回答

相關問題