视频无法在浏览器中播放答案

【问题标题】：Videos not playing in browsers视频无法在浏览器中播放
【发布时间】：2013-03-05 06:18:49
【问题描述】：

我有 6 种不同类型的视频格式，分别是 .avi、.mkv、.mov、.ogv、.wmv、.mp4。我尝试使用 HTML5 中的视频标签将这些视频嵌入到浏览器中。但没有在任何浏览器中播放视频。在 Firefox 中，它显示“没有支持的 mime 类型的视频”。在 Chrome 中仅播放 .mp4 视频，其余视频未播放。在 IE8 中它什么也不显示。这是我的 HTML 代码：

<video width="300" height="200" controls>
    <source src="videos/airhorse_avi.avi" type="video/avi" title="Avi Videos">
</video>
<video width="300" height="200" controls>
    <source src="videos/airhorse_mkv.mkv" type="video/mkv" title="Mkv Videos">
</video>
<video width="300" height="200" controls>
    <source src="videos/airhorse_mov.mov" type="video/mov" title="Mov Videos">
</video>
<video width="300" height="200" controls>
    <source src="videos/airhorse_ogv.ogv" type="video/ogv" title="Ogv Videos">
</video>
<video width="300" height="200" controls>
    <source src="videos/airhorse_wmv.wmv" type="video/wmv" title="Wmv Videos">
</video>
<video width="300" height="200" controls>
    <source src="videos/spielberg_mp4.mp4" type="video/mp4" title="Mp4 Videos">
</video>

是否可以在任何浏览器（如 firefox、chrome、IE、safari、opera）中播放所有这些视频。

【问题讨论】：

MP4、webm 和 ogg 不是唯一支持的格式吗？我也知道 Firefox 不支持 mp4。
这不是 .wmv 文件的正确 MIME 类型。应该是video/x-ms-wmv

标签： html video html5-video mime-types

【解决方案1】：

看，我已经做了一些测试（我有时间只测试 AVI 和 MP4 格式），出于某种原因，在 Google Chrome 上，到目前为止只有 mp4 格式有效。

另外一件事，像你那样写代码是非常不必要的，试着那样做（就像我说的那样对我来说很好。）：

<video width="300" height="200" controls>
<source src="video/movie.mp4" type="video/mp4">
<source src="videos/movie.mp4" type="video/avi">
Your browser does not support the video tag.
</video>

【讨论】：

videos/movie.mp4 不应该是videos/movie.avi吗？

【解决方案2】：

简单的答案是，由于各种原因，并非所有浏览器都支持所有可用的编解码器/容器。

这里有一个相当最新的列表http://en.wikipedia.org/wiki/HTML5_video 这个答案显示了您如何自己测试特定支持Mobile detection for specific parts of websites

你提到（在其中一个 cmets 中）你得到一个错误抛出......如果你让我们知道那是什么错误（如果 canPlayType() 没有回答问题）那么我们可以研究更多

【讨论】：

【解决方案3】：

这应该足以在所有浏览器中播放视频（video support in browsers）：

<video width="300" height="200" controls> 
    <source src="videos/airhorse_ogv.ogv" type='video/ogg; codecs="theora, vorbis"'/> 
    <source src="videos/spielberg_mp4.mp4" type='video/mp4'/> 
    <p> Video is not visible, most likely your browser does not support HTML5 video </p> 
</video>

如果你加上这一行，那就太好了：

<source src="videos/spielberg_webm.webm" type='video/webm' />

【讨论】：

【解决方案4】：

为了涵盖大多数情况，将每个视频转换为 Ogg、Webm 和 MP4 版本，使用以下方法将其显示在网页上：

<video width="300" height="200" controls preload="none">
    <source src="video/myvideo.ogv" type="video/ogg">
    <source src="video/myvideo.webm" type="video/webm">
    <source src="video/myvideo.mp4" type="video/mp4">
</video>

对于 IE8 及更早版本，使用 flash（请参阅http://videojs.com）

对于 IE9，preload 标签必须存在并设置为 auto 或 none。

【讨论】：