Html5 视频问题

Question

我在演示视频中遇到了html问题：

视频一直处于瘫痪状态，直到完全加载，然后开始播放。

在某些浏览器中它可以工作，而其他浏览器则不起作用。有人可以帮我修复它吗？

.HTML

<div class="videoContainer">
<video autoplay loop preload='auto'>
<source src="video/Rio_Energy_Apresentacao.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
Video não suportado.
</video>
</div>

.CSS

.videoContainer
{
    position:absolute;
    height:100%;
    width:100%;
    overflow: hidden;
}
.videoContainer video
{
    min-width: 100%;
    min-height: 100%;
}

现场： http://ec2-54-71-170-71.us-west-2.compute.amazonaws.com/

Answer 1

对于HTML5视频，您需要创建三种格式的视频：webm，mp4和ogg。大多数浏览器将使用MP4，但其他浏览器将需要其他格式之一(这可以解释为什么它不适用于某些用户(。

<video>
    <source src="movie.webm" type="video/webm">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
</video>

还应该注意的是，这些格式的顺序很重要;始终在列表中首先声明 webm 格式(主要是 Chrome 问题(。

最后，用于视频格式的编解码器可以在浏览器兼容性中发挥作用。我已经成功地使用应用程序 Miro 视频转换器 进行转换，它似乎有正确的编解码器可用。

Answer 2

参考媒体格式以了解哪个浏览器支持媒体格式。
您可以指定多个源文件。参考自HTML5Rocks
source 元素允许您指定多种格式作为回退，以防用户的浏览器不支持其中一种格式。
例：

<video controls>
   <source src="devstories.webm" type='video/webm;codecs="vp8, vorbis"'/>
   <source src="devstories.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
</video>