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

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

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

谢谢

乔

解决方法

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

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

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

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

原文地址：https://www.jb51.cc/html5/168886.html