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

Posted 2023-03-05

【中文标题】删除 HTML5 视频上的黑色加载闪光

【英文标题】：Remove black load flash on HTML5 video

【发布时间】：2014-11-30 22:33:36

【问题描述】：

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

谢谢！

【问题讨论】：

***.com/questions/19974902/…

【参考方案1】：

此blog post 的海报部分指出：

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

因此，您似乎无法通过简单地将白色背景色添加到 video 元素来解决此问题...但您可以添加一个简单的白色海报图像，如下所示：

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

【讨论】：

我已经上传了更改，但它似乎仍然是以前的样子：/

您是否尝试刷新浏览器缓存？它在示例代码中的 chrome 中非常适合我。

它在第一次加载时工作正常，但是如果你刷新页面，或者点击其他链接，黑框又回来了。

我认为黑匣子是在视频卸载时出现的。如果它是一个交易破坏者，您可以尝试在页面的 beforeunload 事件中隐藏视频。

既然你已经在你的页面中使用了 jQuery，试试 $(window).on('beforeunload', function() $("video").hide(); );

【参考方案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 毫秒。

【讨论】：

这不起作用。它会闪烁黑色，然后在指定的时间内隐藏视频，使其适得其反。

@Darryl：您使用的是什么浏览器和操作系统？您可以尝试取消自动播放并手动启动视频。

这发生在我的 Firefox for Mac 上。我的视频应该在页面加载时播放。这就是我的客户想要的。

【参考方案3】：

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

这消除了黑色闪光。

【参考方案4】：

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

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

【讨论】：

尝试暂停视频。它不会隐藏它们，只是暂停。看起来更流畅。对我有帮助：$(window).on('beforeunload', function() $("video").each( function() $(this).get(0).pause(); ); );

【参考方案5】：

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

【讨论】：

我试过了，但我继续得到黑色闪烁屏幕。

【参考方案6】：

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

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

【参考方案7】：

我通过添加 style="background-color:white;" 摆脱了闪烁的黑框到视频元素。