Javascript 删除 HTML5 视频上的黑色负载闪光
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26220080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove black load flash on HTML5 video
提问by Tom
I have been creating a website for an online game that I play. In the header I have a HTML5 video that plays very briefly (1second). In Internet Explorer there is no issue, however in Chrome as the video is loading there is a very brief flash of black screen. Is there any way that I can remove this flash, or, failing that, make it white to match the background? You can see what I mean here http://testingfortagpro.meximas.com/. If you try it in IE and the Chrome you will see the difference in how the video loads. Alternatively is there any better way of implementing this? I have tried using a animated GIF however quality is significantly reduced.
我一直在为我玩的在线游戏创建一个网站。在标题中，我有一个播放非常短暂（1 秒）的 HTML5 视频。在 Internet Explorer 中没有问题，但是在 Chrome 中加载视频时会出现非常短暂的黑屏闪烁。有什么方法可以去除这个闪光灯，或者，如果失败，让它变成白色以匹配背景？你可以在这里看到我的意思http://testingfortagpro.meximas.com/。如果您在 IE 和 Chrome 中尝试，您会看到视频加载方式的不同。或者有没有更好的方法来实现这个？我曾尝试使用动画 GIF，但质量显着降低。
Thanks!
谢谢！
回答by TimHayes
The Poster section of this blog postindicates the following:
这篇博文的海报部分指出了以下内容：
"If you do not specify a poster image the browser may just display a black box filling the dimensions of the element."
“如果您不指定海报图像，浏览器可能只会显示一个填充元素尺寸的黑框。”
So you can't seem to fix this by simply adding a background-color of white to the videoelement... but you can add a simple white poster image like so:
因此，您似乎无法通过简单地向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>回答by user
You can use transparent gif poster:
您可以使用透明的 gif 海报：
poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
But that wasn't enough to eliminate blinking in Firefox. I ended up by hiding the video until it's playing:
但这还不足以消除 Firefox 中的闪烁。我最终隐藏了视频，直到它播放：
<video autoplay style="visibility:hidden;" onplay="var s=this;setTimeout(function(){s.style.visibility='visible';},100);">
Adjust the timeout as you see fit. When not using autoplay, I had to increase it up to 400 ms.
根据您的需要调整超时。不使用自动播放时，我不得不将其增加到 400 毫秒。
回答by Duke Dougal
I had the same problem and fixed it by hiding the video element using CSS display:none until the video element signalled it had finished loading via its onLoadedData event, and in response to that event I set display:block.
我遇到了同样的问题，并通过使用 CSS display:none 隐藏视频元素来修复它，直到视频元素通过其 onLoadedData 事件表示它已完成加载，并响应该事件我设置了 display:block。
That got rid of the black flash.
就这样摆脱了黑色闪光。
回答by Darryl Mendonez
Putting in a poster attribute in the video tag did not stop the black box from flashing when the user refreshes the page however I used the hide function on the 'beforeunload' event and now the black flash is gone.
当用户刷新页面时，在视频标签中放入海报属性并没有阻止黑框闪烁，但是我在 'beforeunload' 事件中使用了隐藏功能，现在黑框消失了。
$(window).on('beforeunload', function() {
$("video").hide();
});
回答by user3350623
I had the same blinking problem in Firefox, even with a poster attribute set. I fixed this by adding a background-image to the video tag that corresponded to the first frame of my video.
即使设置了海报属性，我在 Firefox 中也遇到了同样的闪烁问题。我通过向与我的视频的第一帧相对应的视频标签添加背景图像来解决此问题。
回答by user990967
$(window).on('beforeunload', function() { $("video").hide(); });
$(window).on('beforeunload', function() { $("video").hide(); });
This will hide the video element just before the window unloads and loads the next document.
这将在窗口卸载和加载下一个文档之前隐藏视频元素。
