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

Remove black load flash on HTML5 video

本文关键字：黑色 加载 闪光灯 HTML5 视频 删除      更新时间：2023-09-26

我一直在为我玩的一个在线游戏创建一个网站。在标题中，我有一个HTML5视频，播放时间很短（1秒）。在Internet Explorer中没有问题，但在Chrome中，当视频加载时，会出现短暂的黑屏闪烁。有没有什么方法可以去掉这个闪光灯，或者，如果没有，把它变成白色以匹配背景？你明白我的意思了http://testingfortagpro.meximas.com/。如果你在IE和Chrome中尝试，你会看到视频加载方式的不同。或者，有没有更好的方法来实现这一点？我尝试过使用GIF动画，但质量明显降低。

谢谢！

这篇博客文章的海报部分指出了以下内容：

"如果您没有指定海报图像，浏览器可能只会显示填充元素尺寸的黑框。"

因此，你似乎无法通过简单地在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>

您可以使用透明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毫秒。

我遇到了同样的问题，并通过使用CSS display:none隐藏视频元素来解决这个问题，直到视频元素通过其onLoadedData事件发出完成加载的信号，作为对该事件的响应，我设置了display:block。

这消除了黑色闪光。

当用户刷新页面时，在视频标签中添加海报属性并不能阻止黑框闪烁，但我在"beforeunload"事件中使用了隐藏功能，现在黑闪光灯消失了。

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

即使设置了海报属性，我在Firefox中也遇到了同样的闪烁问题。我通过在视频标签中添加背景图像来解决这个问题，该标签对应于我视频的第一帧。

$（window）.on（'beforeunload'，function（）{$（"video"）.hide（）；}）；

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

我通过添加style="背景颜色：白色"到视频元素。

相关文章：