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
}

通过这个答案，您不必为了不是为了这些目的而制作假海报或滥用属性。希望这会有所帮助。

P.S。您当然可以添加更多事件来添加海报属性，例如如果它无法在视频中间进一步播放并需要更多缓冲

您可以找到一个显示我的代码的{jsfiddle} {/ 3}}

Answer 3

您可以在视频的loadstart事件中附加一个监听器，并使用它在视频元素顶部叠加动画GIF，然后在loadeddata事件触发后隐藏加载叠加层。有关您可以加入的事件列表，请参阅The W3C's media events draft。

他们也有demo page for media events。

Answer 4

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

我认为应该有效的原始理论（但不会）是

通过js和css
准备好时播放

简单，对吧？问题是我无法在设置源元素或设置video.src属性时显示背景图像。天才/运气的最后一击就是找出（通过实验）如果将海报设置为某种东西，背景图像将不会消失。我使用的是假海报图片，但我想它可以使用透明的1x1图像（但为什么要担心另一张图像）。所以这可能是一种破解，但它有效，我不必为我的代码添加额外的标记，这意味着它将使用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。如果有人发现错误或改进，请告诉我们！

Answer 5

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

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

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

6 个答案: