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

Question

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

谢谢！

原文由 Tom 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 TimHayes 发布，翻译遵循 CC BY-SA 3.0 许可协议

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 毫秒。

原文由 user 发布，翻译遵循 CC BY-SA 3.0 许可协议