如何在HTML5视频中添加加载图像？

Question

除海报图像外，我希望在视频下载时显示一个加载器图像（动画gif）。 有什么办法吗？

如何实现？

- Rajat Gupta

Answer 1

一个便宜的方法是在poster属性中使用一个动态GIF，当视频开始播放时将其替换。例如：

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

- a paid nerd

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
}

使用这个答案，您就不必担心虚假海报或滥用属性的问题。希望这可以帮助您。

附言：当然，您可以添加一些事件来添加海报属性，例如如果视频在中间不能继续播放并需要更多缓冲

您可以在这里找到展示我的代码的jsfiddle

- Jamie-505

Answer 3

我花了太长时间才弄清楚如何做到这一点，但我要在这里分享它，因为我终于找到了一种方法！当你想到加载是所有视频都必须做的事情时，这是荒谬的。你会认为他们在创建html5视频标准时会考虑到这一点。

我原来认为应该起作用（但不会）的理论是这样的

1. 通过js和css在加载时将背景图像添加到视频中
2. 准备播放时删除

很简单，对吧？问题是，当设置源元素或video.src属性时，我无法使背景图像显示出来。最后的天才/幸运之举是通过实验发现，如果poster被设置为某个东西，背景图片将不会消失。我使用了一个假的海报图像，但我想一个透明的1x1图像也可以工作（但为什么要担心再有另一张图像）。所以这可能是一种hack，但它有效，我不需要向我的代码添加额外的标记，这意味着它将在使用html5视频的所有项目中工作。

HTML

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

CSS（应用于带有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')
  });

这对我来说运行得非常好，但只在Mac上的Chrome和Safari中进行了测试。如果有人发现错误或改进，请告诉我！

- pixelearth

---

感谢您提供的代码，顺便说一句，不需要JS代码，您可以使用div容器包装video块并更改其背景。 - Salem

Answer 4

你可以在视频的loadstart事件上附加一个监听器，并使用它在视频元素上叠加一个动画GIF，然后在loadeddata事件触发后隐藏加载覆盖层。请参见W3C媒体事件草案以获取可以连接的事件列表。

他们还有一个媒体事件演示页面。

- Mike Green

Answer 5

这很复杂，你必须监听各种视频事件以正确显示/隐藏和更新加载器图像的宽度。这些事件包括（但不限于）：loadstart、progress、loadeddata、waiting、seeking、seeked。你可以使用某个开源播放器（例如jPlayer）或下载其源代码进行进一步检查。

- ExpExc

Answer 6

<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>

在 isVideoLoaded 标志位上展示或隐藏加载器

this.isVideoLoaded = false;
    
checkVideoLoaded(){
  this.isVideoLoaded = true;
}

- Vishesh Mishra