javascript - 不支持视频格式或 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');
}

它似乎不起作用，我明白了:

如您所见:不支持视频格式或 MIME 类型。

视频容器隐藏在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's HTML5 Video page 上的视频格式和浏览器支持标题。查看哪个浏览器支持哪些格式。

此外，值得查看 HTML5 Video page on Wikipedia对主要文件格式进行基本比较。

下面是适当的 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 日更新

网络基础设施巨头思科宣布 plans to open-source an implementation of the H.264 codec ，取消了迄今为止被证明是 Mozilla 使用障碍的许可费用。无需深入了解它的政治(请参阅以下链接)this will allow Firefox to support H.264 starting in "early 2014" .但是，如该链接中所述，这仍然需要注意。 H.264 编解码器仅用于视频，在 MPEG-4 容器中，它最常与闭源 AAC 音频编解码器搭配使用。因此，可以播放 H.264 视频，但音频将取决于最终用户的机器上是否已安装 AAC 编解码器。

总而言之，这方面正在取得进展，但您仍然无法避免在不使用插件的情况下使用多种编码。