"刪除 HTML5 視頻上的黑色加載閃光"

Question

我一直在為我玩的在線游戲創建一個網站。 在標題中，我有一個播放非常短暫（1 秒）的 HTML5 視頻。 在 Internet Explorer 中沒有問題，但在 Chrome 中加載視頻時會出現非常短暫的黑屏閃爍。 有什么辦法可以去掉這個閃光燈，或者如果做不到，讓它變成白色以匹配背景？ 你可以在這里看到我的意思http://testingfortagpro.meximas.com/ 。 如果您在 IE 和 Chrome 中嘗試它，您將看到視頻加載方式的不同。 或者有沒有更好的方法來實現這個？ 我曾嘗試使用動畫 GIF，但質量顯着降低。

謝謝！

Answer 1

本博文的海報部分顯示以下內容：

“如果你沒有指定海報圖像，瀏覽器可能只顯示填充元素尺寸的黑盒子。”

所以你似乎無法通過簡單地在video元素中添加白色的背景顏色來解決這個問題......但是你可以添加一個簡單的白色海報圖像，如下所示：

 <video width="320" height="240" autoplay="" poster="http://dummyimage.com/320x240/ffffff/fff" > <source src="http://testingfortagpro.meximas.com/movie2.mp4" type="video/mp4"> </video> 

Answer 2

你可以使用透明的gif海報：

poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

但這還不足以消除Firefox中的眨眼。 我最后隱藏了視頻直到它正在播放：

<video autoplay style="visibility:hidden;" onplay="var s=this;setTimeout(function(){s.style.visibility='visible';},100);">

根據需要調整超時。 不使用自動播放時，我不得不將其增加到400毫秒。

Answer 3

我遇到了同樣的問題並通過使用CSS display：none隱藏視頻元素來修復它，直到視頻元素通過其onLoadedData事件發出信號已完成加載，並且為了響應該事件我設置了display：block。

那擺脫了黑色閃光。

Answer 4

當用戶刷新頁面時，在視頻標簽中放置海報屬性並不會阻止黑盒子閃爍，但是我在'beforeunload'事件中使用了隱藏功能，現在黑色閃光燈消失了。

$(window).on('beforeunload', function() {
   $("video").hide();
});

Answer 5

即使設置了海報屬性，我在Firefox中也有同樣的閃爍問題。 我通過在視頻標記中添加背景圖像來修復此問題，該視頻標記對應於我視頻的第一幀。

Answer 6

$（window）.on（'beforeunload'，function（）{$（“video”）。hide（）;}）;

這將在窗口卸載並加載下一個文檔之前隱藏視頻元素。

Answer 7

我通過添加 style="background-color:white;" 擺脫了閃爍的黑框到視頻元素。