不支持视频格式或MIME类型

Question

这是运行视频的相关代码:

<video id="video" src="videos/clip.mp4" type='video/mp4' controls='controls'>
    Your brwoser doesn't seems to support video tag
</video> 

这段代码可以单独使用,但在尝试淡入时:

function showVideoPlayer(){          
    console.log('video displayed');      
    $("#video").fadeIn('medium');
}

它似乎不起作用,我得到了这个:

如你看到的: Video format or MIME type is not supported.

视频容器隐藏在css中:

#video{
    position:fixed;
    border:solid 1px #000000;
    width:654px;
    height:454px;
    background-color:#FFFFFF;
    left:23%;
    top:11%;
    display:none;
}

这是一个想法,视频容器是隐藏的(display:none),当需要时,我调用该函数showVideoPlayer来显示视频容器.然而,这不起作用,FireFox并在Chrome和IE9中产生了这个错误和一个空白屏幕.

我错过了什么吗？是fadeIn功能似乎让我错了？

Answer 1

Firefox目前不支持MPEG H.264(mp4)格式,因为对格式的封闭源性质存在哲学上的不同意见.

要在不使用插件的情况下在所有浏览器中播放视频,您需要以不同的格式托管每个视频的多个副本.您还需要使用video标记的替代形式,如上面@TimHayes的JSFiddle中所示,转载如下.Mozilla声称只有mp4和WebM才能确保完全覆盖所有主流浏览器,但您可能希望查看W3C HTML5视频页面上的视频格式和浏览器支持标题,以查看哪种浏览器支持哪种格式.

此外,有必要查看维基百科上的HTML5视频页面,以便对主要文件格式进行基本比较.

下面是相应的video标签(您需要以WebM或OGG格式以及现有的mp4格式重新编码视频):

<video id="video" controls='controls'>
  <source src="videos/clip.mp4" type="video/mp4"/>
  <source src="videos/clip.webm" type="video/webm"/>
  <source src="videos/clip.ogv" type="video/ogg"/>
  Your browser doesn't seem to support the video tag.
</video>

2013年11月8日更新

网络基础设施巨头思科已宣布计划开源H.264编解码器的实施,取消迄今为止被证明是Mozilla使用障碍的许可费.如果没有深入了解它的政治(请参阅以下链接),这将允许Firefox从"2014年初"开始支持H.264.但是,如该链接所述,这仍然需要注意.H.264编解码器仅用于视频,而在MPEG-4容器中,它通常与闭源AAC音频编解码器配对.因此,H.264视频的播放将起作用,但音频将取决于最终用户是否已在其计算机上存在AAC编解码器.

这方面的长期和短期是正在取得进展,但你仍然无法避免在不使用插件的情况下使用多种编码.