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 Video Converter进行转换，但似乎可以使用正确的编解码器。

Answer 2

请Media formats了解哪种浏览器支持媒体格式。
您可以指定多个源文件。来自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>

Html5视频问题

2 个答案: