Javascript 如何将加载器图像添加到 HTML5 视频？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8230748/
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 add loader image to HTML5 video?
提问by Rajat Gupta
Along with the poster image I want a loader image(an animated gif) to be displayed while the video is being downloaded. How is it possible ?
与海报图像一起，我希望在下载视频时显示加载器图像（动画 gif）。这怎么可能 ？
回答by a paid nerd
A cheap way could be to use an animated GIF in the posterattribute which will be replaced when the video begins to play. Example:
一种廉价的方法可能是在poster属性中使用动画 GIF，当视频开始播放时，该属性将被替换。例子：
<video poster="loading.gif" preload="auto" controls autoplay>
<source type="video/mp4" src="video.mp4"/>
</video>
回答by Jamie-505
Here is my solution for this problem since pixelearth's answer doesn't seem to work on firefox (probably a problem with the fake poster)
这是我对这个问题的解决方案，因为 pixelearth 的答案似乎不适用于 firefox（可能是假海报的问题）
HTML
HTML
<video id="video1" height="236" preload="auto" controls>
<source src="yourVideo.mp4">
Your browser does not support HTML5 video.
</video>
JS
JS
$('#video1').on('loadstart', function (event) {
$(this).addClass('background');
$(this).attr("poster", "/your/loading.gif");
});
$('#video1').on('canplay', function (event) {
$(this).removeClass('background');
$(this).removeAttr("poster");
});
CSS
CSS
video.background {
background: black
}
With this answer you don't have to mess around with fake poster or abuse attributes for purposes that they were not made for. Hope this helps.
有了这个答案，您就不必为了非目的而乱用虚假海报或滥用属性。希望这可以帮助。
P.S. You could of course add some more events to add the poster attribute e.g. if it can't play further in the middle of the video and needs more buffering
PS您当然可以添加更多事件来添加海报属性，例如如果它无法在视频中间进一步播放并且需要更多缓冲
You can find a jsfiddle which shows my code here
您可以在此处找到显示我的代码的 jsfiddle
回答by Mike Green
You could attach a listener to the video's loadstartevent and use it to overlay an animated GIF on top of the video element, then hide the loading overlay once the loadeddataevent fires. See The W3C's media events draftfor a list of events you can hook into.
您可以将侦听器附加到视频loadstart事件，并使用它在视频元素顶部覆盖动画 GIF，然后在loadeddata事件触发后隐藏加载覆盖。请参阅W3C 的媒体活动草案，了解您可以参与的活动列表。
They also have a demo page for media events.
回答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 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 ExpExc
This is quite complicated, you must listen to various video events to show/hide & update width of the loader image correctly. Those events include (but may not limited to): loadstart, progress, loadeddata, waiting, seeking, seeked. You can use a certain open source player (e.g. jPlayer) or download its source to examine further.
这非常复杂，您必须监听各种视频事件才能正确显示/隐藏和更新加载程序图像的宽度。这些事件包括（但可能不限于）： ，loadstart，progress，loadeddata，waiting，。seekingseeked您可以使用某个开源播放器（例如jPlayer）或下载其源代码以进一步检查。
回答by Vishesh Mishra
<video id="mainVideo" width="100%"
style="max-width: 100%; max-height: 100%;" preload="auto"
autoplay="autoplay" (loadeddata)=
"checkVideoLoaded()">
<source [src]="assets?.video?.urlMP4" type="{{videoType}}">
</video>
on isVideoLoadedflag show and hide loader
在isVideoLoaded标志上显示和隐藏装载机
this.isVideoLoaded = false;
checkVideoLoaded(){
this.isVideoLoaded = true;
}
