如何将加载程序图像添加到HTML5视频？

Question

与海报图像一起,我希望在下载视频时显示加载程序图像(动画gif).这怎么可能 ？

Answer 1

一种便宜的方式可能是在poster属性中使用动画GIF,当视频开始播放时将被替换.例:

<video poster="loading.gif" preload="auto" controls autoplay>
   <source type="video/mp4" src="video.mp4"/>
</video>

Answer 2

这是我对这个问题的解决方案,因为pixelearth的答案似乎不适用于firefox(可能是假海报的问题)

HTML

<video id="video1" height="236" preload="auto" controls>
  <source src="yourVideo.mp4">
  Your browser does not support HTML5 video.
</video>

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

video.background {
  background: black
}

有了这个答案,您就不必为了没有制作假海报或滥用属性而弄乱它们.希望这可以帮助.

PS你当然可以添加更多的事件来添加海报属性,例如,如果它不能在视频中间进一步播放并需要更多缓冲

你可以在这里找到一个显示我的代码的jsfiddle

Answer 3

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.

My original theory that I thought should have worked (but wouldn't) was this

1. Add loading bg image to video when loading via js and css
2. Remove when ready to play

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.

HTML

<video controls="" poster="data:image/gif,AAAA">
    <source src="yourvid.mp4"
</video>

CSS (loading class applied to video with JS)

video.loading {
  background: black url(/images/loader.gif) center center no-repeat;
}

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!

Answer 4

您可以将侦听器附加到视频的loadstart事件，并使用它在视频元素顶部覆盖动画 GIF，然后在事件loadeddata触发后隐藏加载覆盖。请参阅W3C 的媒体活动草案，了解您可以参与的活动列表。

他们还有一个媒体活动演示页面。