"删除 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;" 摆脱了闪烁的黑框到视频元素。