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

Question

随着视频播放器花费时间加载mp4视频。加载视频时，HTML5支持播放“加载”徽标吗？

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

感谢

乔

Answer 1

使用标签ID海报

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

更多信息，可以发现http://www.w3schools.com/html5/att_video_poster.asp

Answer 2

你也许可以用JavaScript做它通过与创建图像叠加动画“加载”gif，您只能在视频加载并且未准备好播放时才显示。

您必须编写JavaScript来与Media API进行链接，以检测视频何时可以播放等等（因此您可以再次隐藏图像），但应该可以。

Answer 3

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

我原来的理论，我认为应该有工作（但不会）是这个

1. 添加加载BG图像视频通过JS和CSS
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', ''); 
    }); 

这完全适用于我，但仅适用于Chrome和Safari浏览器上测试苹果电脑。让我知道是否有人发现错误或改进！

Answer 4

另外一个简单的解决方案来添加预加载图像，同时加载的视频： 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 5

我的解决办法是添加了内部继window.fbAsyncInit =（）函数：

var finished_rendering = function() { 
    var el = document.querySelector('div#loading_msg'); 
    el.style.display="none"; 
} 

FB.Event.subscribe('xfbml.render', finished_rendering); 

发现：https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.12