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

Question

我一直在为我玩的在线游戏创建一个网站.在标题中,我有一个HTML5视频播放非常短暂(1秒).在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 毫秒。