HTML 5視頻 - 回退圖像總是下載

Question

我正在使用HTML5視頻標記，其中有一個圖像標記作爲不支持它的瀏覽器（如IE8）的後備。

代碼如下所示：

<video loop="loop" preload="auto"> 
    <source src="/videos/home-slider-1.mp4" type="video/mp4"> 
    <img src="/images/png-jpg/home-slide-1.jpg" width="100%"> 
</video> 

回退形象工程根據需要，它不會顯示在支持視頻標籤的現代瀏覽器。但它確實顯示在IE8中，沒有問題。

但是，當我查看Chrome或Firefox時，當我使用此代碼加載頁面時正在下載的內容是什麼，它顯示它也下載了回退圖像......我不明白爲什麼，這是浪費帶寬。

我在這裏幹什麼什麼了嗎？我應該用另一種方式提供備用圖片嗎？ 此問題是否也存在其他HTML5後備方案？

Answer 1

瀏覽器下載文檔中的所有資產，所以你看到的是正常的。 你沒有做錯任何事，相反，大多數人並沒有實現這個後備，所以實際上你已經超越了，並且做了正確的事情。
如果你擔心它，我想你可以加載後備圖像後頁面加載，但我認爲這是非常極端的。除非你將大量資產投入到你的文檔中，並且你的負載速度非常令人傷心，否則我不會擔心它。