加载HTML5视频时如何制作加载图片？

Question

因为视频播放器需要时间来加载mp4视频.HTML5是否支持在加载视频时播放"加载"徽标？

因为我的asp.net应用程序是一个移动页面,它需要用户点击视频才能播放视频(android,iphone不支持自动播放).这样我就不能将"加载"标识作为海报,否则,用户会对此感到困惑.我想在用户点击iPad上的播放按钮时显示加载徽标.

谢谢

乔

Answer 1

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

我认为应该有效(但不会)的原始理论是这样的

1. 通过js和css加载时,将加载bg图像添加到视频中
2. 准备好比赛时删除

简单吧？问题是我无法在设置源元素或设置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');
    $(this).attr('poster', '');
  });

这对我来说非常适合,但只能在Mac上测试chrome和safari.如果有人发现错误或改进,请告诉我们!

Answer 2

还有一个在加载视频时添加预加载器图像的简单解决方案：HTML：

<video class="bg_vid" autoplay loop poster="images/FFFFFF-0.png">

海报是1px的透明图像。

CSS：

video {
    background-image: url(images/preload_30x30.gif);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: center;
}

Answer 3

使用标签 ID 海报

    <video controls="controls" poster="/IMG_LOCATION/IMAGENAME">

更多信息请访问http://www.w3schools.com/html5/att_video_poster.asp