如何将加载器图像添加到HTML5视频？

Question

随着海报图像，我想要一个加载程序图像（动画gif）在视频下载时显示。这怎么可能 ？

Answer 1

您可以将侦听器附加到视频的loadstart事件，并用它在视频元素顶部叠加动画GIF，然后在触发loadeddata事件时隐藏加载叠加层。请参阅The W3C's media events draft了解您可以接入的事件列表。他们也有demo page for media events。

Answer 2

这是相当复杂的，你必须听各种视频事件正确显示/隐藏&更新加载器映像的宽度。这些事件包括（但不限于）：loadstart,progress,loadeddata,waiting,seeking,seeked。您可以使用某个开源播放器（例如jPlayer）或下载其来源以进一步检查。

Answer 3

一个便宜的方法可能是在poster属性中使用动画GIF，该属性在视频开始播放时将被替换。例如：

<video poster="loading.gif" preload="auto" controls autoplay> 
    <source type="video/mp4" src="video.mp4"/> 
</video> 

Answer 4

我花了太长时间才弄明白如何做到这一点，但我会在这里分享它，因为我最终找到了一个方法！当你考虑它时，这是荒谬的，因为加载是所有视频必须做的事情。你会认为他们会在创建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') 
    }); 

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

Answer 5

这是我对于这个问题的解决方案，因为pixelearth的回答似乎并没有对Firefox浏览器（可能是用假海报的问题）

HTML

<video id="video1" height="236" preload="auto" controls> 
    <source src="yourVideo.mp4"> 
    Your browser does not support HTML5 video. 
</video> 

JS

$('#video1').on('loadstart', function (event) { 
    $(this).addClass('background'); 
    $(this).attr("poster", "/your/loading.gif"); 
}); 

$('#video1').on('canplay', function (event) { 
    $(this).removeClass('background'); 
    $(this).removeAttr("poster"); 
}); 

CSS

video.background { 
    background: black 
} 

有了这个答案，你就不必为了他们没有做的目的而乱搞假海报或滥用属性。希望这可以帮助。

P.S.您当然可以添加更多的活动来添加海报属性，例如如果它不能在视频的中间进一步发挥，需要更多的缓冲

你可以找到的jsfiddle这表明here