加载HTML5视频时如何制作加载图片？ [英] How to make a loading image when loading HTML5 video?

问题描述

随着视频播放器花费时间加载mp4视频。 HTML5是否支持在加载视频时播放加载徽标？

as the video player take time to load the mp4 video. can HTML5 support to play a "loading" logo when loading video ?

因为我的asp.net应用程序是一个移动页面，需要用户点击视频才能播放视频（android，iphone）不支持自动播放）。这样我就无法制作一个加载标志作为海报，否则用户会对此产生混淆。我想在用户点击iPad上的播放按钮时显示加载标志。

because my asp.net apps is a mobile page, it need user click on the video to play the video (android, iphone not support autoplay). so that i cannot make a "loading" logo as poster, otherwise, user will confuse about it. i want to display a loading logo when user click play button on iPad.

谢谢

Joe

推荐答案

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

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. 通过js和css加载时将加载bg图像添加到视频中


2. 准备好播放时删除

简单，对吧？问题在于我无法获取背景图像以显示何时设置了源元素或设置了video.src属性。天才/运气的最后一招是（通过实验）发现，如果海报设置为某种东西，背景图像不会消失。我正在使用一张假海报图片，但我想它可以和一张透明的1x1图片一起使用（但为什么还要担心有另一张图片）。所以这使得这可能是一种黑客攻击，但它可以工作，我不需要在我的代码中添加额外的标记，这意味着它可以在我的所有项目中使用html5视频。

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（使用JS应用于视频的加载类）

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).attr('poster', '');
  });

这对我来说非常合适，但只能在mac上用chrome和safari进行测试。如果有人发现错误或改进，请告诉我！

This works perfectly for me but only tested in chrome and safari on mac. Let me know if anyone finds bugs and or improvements!

这篇关于加载HTML5视频时如何制作加载图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！