因为视频播放器需要时间来加载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.如果有人发现错误或改进,请告诉我！