Question

我一直在为我玩的在线游戏创建一个网站。在标题中，我有一个HTML5视频播放非常短暂（1秒）。在Internet Explorer中没有问题，但是在Chrome中，由于视频正在加载，因此会出现非常短暂的黑屏闪烁。有什么方法可以删除这个闪光灯，或者，如果没有这个，让它变成白色以匹配背景？你可以在这里看到我的意思http://testingfortagpro.meximas.com/。如果您在IE和Chrome中试用它，您会看到视频加载方式的差异。或者有没有更好的方法来实现这个？我尝试使用动画GIF，但质量显着降低。

谢谢！

Answer 1

此blog post的海报部分表示以下内容：

“如果您没有指定海报图片，浏览器可能只显示海报图片填充元素尺寸的黑匣子。“

所以你似乎无法通过简单地在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

$（窗口）.on（＆＃39; beforeunload＆＃39;，function（）{$（＆＃34; video＆＃34;）。hide（）;}）;

这将在窗口卸载并加载下一个文档之前隐藏视频元素。

删除HTML5视频上的黑色加载闪存

6 个答案: