如何在加載HTML5視頻時製作加載圖片？

隨着視頻播放器花費時間加載mp4視頻。加載視頻時，HTML5支持播放「加載」徽標嗎？如何在加載HTML5視頻時製作加載圖片？

enter image description here

，因爲我的asp.net應用程序是移動頁面，它需要用戶點擊視頻播放視頻（Android設備，iPhone不支持自動播放）。這樣我就無法制作一個「加載」標誌作爲海報，否則，用戶會對此產生混淆。我想在用戶點擊iPad上的播放按鈕時顯示加載標誌。

感謝

喬

來源

2012-02-01 Joe Yan

使用標籤ID海報

<video controls="controls" poster="/IMG_LOCATION/IMAGENAME">

更多信息，可以發現http://www.w3schools.com/html5/att_video_poster.asp

來源

2012-02-01 14:37:21

嗨，我已經到位一張海報。但用戶點擊「播放」按鈕後可能會有時間間隔，然後開始播放。 – 2012-02-01 14:39:57

然後您看到視頻本身的黑色，您最好裁剪視頻以消除開始的黑色或將相同的地點圖像添加到開始視頻，如果用戶按播放然後視頻正在播放，所以他們看到，如果它然後暫停緩衝，他們看到它正在播放的最後一個圖像 – 2012-02-01 14:43:39

，因爲我的asp.net應用程序是一個移動頁面，它需要用戶點擊視頻播放視頻（android，iphone不支持自動播放）。這樣我就無法制作一個「加載」標誌作爲海報，否則，用戶會對此產生混淆。我想在用戶點擊iPad上的播放按鈕時顯示加載標誌。 – 2012-02-01 14:46:12

你也許可以用JavaScript做它通過與創建圖像疊加動畫「加載」gif，您只能在視頻加載並且未準備好播放時才顯示。

您必須編寫JavaScript來與Media API進行鏈接，以檢測視頻何時可以播放等等（因此您可以再次隱藏圖像），但應該可以。

來源

2012-02-01 16:05:42

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

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

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

簡單，對吧？問題在於我無法獲取背景圖像以顯示何時設置了源元素或設置了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; 
}

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

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

來源

2014-06-28 19:38:01 pixelearth

這是非常優雅/簡單。 – 2014-11-22 20:46:20

在loadstart上只會激發一次，但如果你想裝載器，只要視頻停止，那麼你應該使用等待和canplay事件。 – 2017-12-17 17:21:00

另外一個簡單的解決方案來添加預加載圖像，同時加載的視頻： HTML：

<video class="bg_vid" autoplay loop poster="images/FFFFFF-0.png">

海報是透明圖像1px的。

CSS：

video { 
    background-image: url(images/preload_30x30.gif); 
    background-repeat: no-repeat; 
    background-size: 30px 30px; 
    background-position: center; 
    }

來源

2014-10-01 10:29:14 Rob

我的解決辦法是添加了內部繼window.fbAsyncInit =（）函數：

var finished_rendering = function() { 
    var el = document.querySelector('div#loading_msg'); 
    el.style.display="none"; 
} 

FB.Event.subscribe('xfbml.render', finished_rendering);

發現：https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.12

來源

2018-03-10 16:07:26 user1574371

如何在加載HTML5視頻時製作加載圖片？

回答

相關問題