Html 加载 HTML5 视频时如何制作加载图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9097605/
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
How to make a loading image when loading HTML5 video?
提问by Joe Yan
As it takes time for the video player to load the mp4 video, does HTML5 support playing a "loading" logo when loading the video ?
由于视频播放器加载 mp4 视频需要时间，HTML5 是否支持在加载视频时播放“正在加载”标志？
Since my asp.net apps is a mobile page, it needs the user to click on the video to play the video (android, iphone not support autoplay). So, I cannot make a "loading" logo as poster, otherwise, the user will be confused about it. I want to display a loading logo when user click play button on iPad.
由于我的 asp.net 应用程序是一个移动页面，它需要用户点击视频来播放视频（android、iphone 不支持自动播放）。所以，我不能制作一个“加载”标志作为海报，否则用户会对此感到困惑。我想在用户单击 iPad 上的播放按钮时显示加载徽标。
thanks
谢谢
Joe
乔
回答by pixelearth
It took me a way too long to actually figure out how to do this, but I'm going to share it here because I FINALLY found a way! Which is ridiculous when you think about it, because loading is something that all videos have to do. You'd think they would have taken this into account when creating the html5 video standard.
我花了很长时间才真正弄清楚如何做到这一点，但我将在这里分享它，因为我终于找到了一种方法！当你想到它时，这很荒谬，因为加载是所有视频都必须做的事情。您会认为他们在创建 html5 视频标准时会考虑到这一点。
My original theory that I thought should have worked (but wouldn't) was this
我认为应该有效（但不会）的原始理论是这样的
- Add loading bg image to video when loading via js and css
- Remove when ready to play
- 通过js和css加载时添加加载bg图片到视频
- 准备播放时删除
Simple, right? The problem was that I couldn't get the background image to show when the source elements were set, or the video.src attribute was set. The final stroke of genius/luck was to find out (through experimentation) that the background-image will not disappear if the poster is set to something. I'm using a fake poster image, but I imagine it would work as well with a transparent 1x1 image (but why worry about having another image). So this makes this probably a kind of hack, but it works and I don't have to add extra markup to my code, which means it will work across all my projects using html5 video.
很简单吧？问题是我无法在设置源元素或设置 video.src 属性时显示背景图像。天才/运气的最后一击是（通过实验）发现如果海报设置为某些东西，背景图像不会消失。我使用的是假海报图像，但我想它也适用于透明的 1x1 图像（但为什么要担心有另一张图像）。所以这使得这可能是一种黑客行为，但它有效，我不必在我的代码中添加额外的标记，这意味着它可以在我所有使用 html5 视频的项目中工作。
HTML
HTML
<video controls="" poster="data:image/gif,AAAA">
<source src="yourvid.mp4"
</video>
CSS (loading class applied to video with JS)
CSS（使用JS应用于视频的加载类）
video.loading {
background: black url(/images/loader.gif) center center no-repeat;
}
JS
JS
$('#video_id').on('loadstart', function (event) {
$(this).addClass('loading');
});
$('#video_id').on('canplay', function (event) {
$(this).removeClass('loading');
$(this).attr('poster', '');
});
This works perfectly for me but only tested in chrome and safari on mac. Let me know if anyone finds bugs and or improvements!
这对我来说非常有效，但仅在 mac 上的 chrome 和 safari 中进行了测试。如果有人发现错误和/或改进，请告诉我！
回答by Rob
Also a simple solution to add a preloader image while loading the video: HTML:
还有一个在加载视频时添加预加载器图像的简单解决方案：HTML：
<video class="bg_vid" autoplay loop poster="images/FFFFFF-0.png">
the poster is a transparent image 1px.
海报是1px的透明图像。
CSS:
CSS：
video {
background-image: url(images/preload_30x30.gif);
background-repeat: no-repeat;
background-size: 30px 30px;
background-position: center;
}
回答by Simon Davies
Use the tag id poster
使用标签 ID 海报
<video controls="controls" poster="/IMG_LOCATION/IMAGENAME">
More info can be found http://www.w3schools.com/html5/att_video_poster.asp
更多信息可以在http://www.w3schools.com/html5/att_video_poster.asp找到
回答by Ian Devlin
You could probably do it with JavaScript by creating an image overlay with an animated "loading" gif which you only display when the video is loading and is not ready to play.
您可以使用 JavaScript 创建带有动画“加载” gif 的图像叠加层，仅在视频加载且尚未准备好播放时显示该图像。
You'd have to write JavaScript to link up with the Media API for detecting when the video is ready to play and so forth though (so you could hide the image again), but it should be possible.
您必须编写 JavaScript 来与媒体 API 链接以检测视频何时可以播放等等（这样您就可以再次隐藏图像），但应该是可能的。
回答by user1574371
My solution was to add the following inside of the window.fbAsyncInit = function():
我的解决方案是在 window.fbAsyncInit = function() 中添加以下内容：
var finished_rendering = function() {
var el = document.querySelector('div#loading_msg');
el.style.display="none";
}
FB.Event.subscribe('xfbml.render', finished_rendering);
Found: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.12
找到：https: //developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.12
回答by TheLinguist
Personally I think the most elegant way to do this is by using some code like this,
我个人认为最优雅的方法是使用这样的代码，
<video src="myVideo.fileExtension" onplaying="hideControls(this)" onwaiting="showControls(this)" preload="auto" poster="myAnimatedWebpOrGifThatSaysVideoIsNotYetReady.fileExtension">No video support?</video>
<script type="text/javascript">
//We hide the video control buttons and the playhead when the video is playing (and enjoyed by the viewer)
function hideControls(event){ event.controls=false; }
//If the video has to pause and wait for data from the server we let controls be seen if the user hovers or taps on the video. As a bonus this also makes the built-in loading animation of the browser appear e.g. the rotating circular shape and we give it a little delay (like 1 sec) because we don't want the controls to blink and the delayed show-up actually looks nicer.
function showControls(event){ setTimeout(function(){ event.controls=true; },1000); }
</script>
To make it even better you could use ontimeupdateinstead of onplayingwhich would fire continuously.
As for the delay time actually not 1 but 4 seconds -to me- is the best.
为了使它更好，您可以使用它ontimeupdate来代替onplayingwhich 会连续发射。至于延迟时间实际上不是1秒而是4秒——对我来说——是最好的。
