如何將加載器圖像添加到HTML5視頻？

Question

隨着海報圖像，我想要一個加載程序圖像（動畫gif）在視頻下載時顯示。這怎麼可能 ？

Answer 1

您可以將偵聽器附加到視頻的loadstart事件，並用它在視頻元素頂部疊加動畫GIF，然後在觸發loadeddata事件時隱藏加載疊加層。請參閱The W3C's media events draft瞭解您可以接入的事件列表。他們也有demo page for media events。

Answer 2

這是相當複雜的，你必須聽各種視頻事件正確顯示/隱藏&更新加載器映像的寬度。這些事件包括（但不限於）：loadstart,progress,loadeddata,waiting,seeking,seeked。您可以使用某個開源播放器（例如jPlayer）或下載其來源以進一步檢查。

Answer 3

一個便宜的方法可能是在poster屬性中使用動畫GIF，該屬性在視頻開始播放時將被替換。例如：

<video poster="loading.gif" preload="auto" controls autoplay> 
    <source type="video/mp4" src="video.mp4"/> 
</video> 

Answer 4

我花了太長時間才弄明白如何做到這一點，但我會在這裏分享它，因爲我最終找到了一個方法！當你考慮它時，這是荒謬的，因爲加載是所有視頻必須做的事情。你會認爲他們會在創建html5視頻標準時考慮到這一點。

我原來的理論，我認爲應該有工作（但不會）是這個

1. 添加加載BG圖像視頻通過JS和CSS
2. 刪除加載時準備時播放

簡單，對吧？問題在於我無法獲取背景圖像以顯示何時設置了源元素或設置了video.src屬性。天才/運氣的最後一招是（通過實驗）發現，如果海報設置爲某種東西，背景圖像不會消失。我正在使用一張假海報圖片，但我想它可以和一張透明的1x1圖片一起使用（但爲什麼還要擔心有另一張圖片）。所以這使得這可能是一種破解，但它的工作原理，我不必爲我的代碼添加額外的標記，這意味着它將適用於我所有使用html5視頻的項目。

HTML

<video controls="" poster="data:image/gif,AAAA"> 
    <source src="yourvid.mp4" 
</video> 

CSS（適用於視頻與JS裝載類）

video.loading { 
    background: black url(/images/loader.gif) center center no-repeat; 
} 

JS

$('#video_id').on('loadstart', function (event) { 
    $(this).addClass('loading') 
    }); 
    $('#video_id').on('canplay', function (event) { 
    $(this).removeClass('loading') 
    }); 

這完全適用於我，但僅適用於Chrome和Safari瀏覽器上測試蘋果電腦。讓我知道是否有人發現錯誤或改進！

Answer 5

這是我對於這個問題的解決方案，因爲pixelearth的回答似乎並沒有對Firefox瀏覽器（可能是用假海報的問題）

HTML

<video id="video1" height="236" preload="auto" controls> 
    <source src="yourVideo.mp4"> 
    Your browser does not support HTML5 video. 
</video> 

JS

$('#video1').on('loadstart', function (event) { 
    $(this).addClass('background'); 
    $(this).attr("poster", "/your/loading.gif"); 
}); 

$('#video1').on('canplay', function (event) { 
    $(this).removeClass('background'); 
    $(this).removeAttr("poster"); 
}); 

CSS

video.background { 
    background: black 
} 

有了這個答案，你就不必爲了他們沒有做的目的而亂搞假海報或濫用屬性。希望這可以幫助。

P.S.您當然可以添加更多的活動來添加海報屬性，例如如果它不能在視頻的中間進一步發揮，需要更多的緩衝

你可以找到的jsfiddle這表明here