HTML5视频不支持所有浏览器

Question

HTML 5视频在Chrome、Mozilla和Android设备上可以正常工作，但在Safari和IE上无法正常工作。

有一种视频格式可以在所有设备和平台上播放吗？ 请提供相关代码或链接。

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
      <source src="//cdn.foo.com/bar-video.mp4" type="video/mp4">
      <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

- lakshmi prasanna

---

尝试添加.ogg格式并保持视频大小更优化。 - Saravanan Kasi

我是HTML的新手，我应该在哪里添加那个.ogg文件？ - lakshmi prasanna

Answer 1

很遗憾，目前还没有一种格式可以在所有浏览器上播放。如果您想了解当前情况，请参考此链接页面中的表格，该表格通常是最新的（请勿复制表格，而应包含链接，因为信息变化如此之快）：https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats。总的来说，MP4 是最受支持的容器格式，但即使在这里，您也可以有多个编解码器和多个配置文件。有一个资源可以生成尽可能支持多个浏览器的示例 HTML5 代码（通常称为“Video for Everybody”）。我不确定它更新的频率如何：http://v4e.thewikies.com。这里是仅针对 HTML5 播放的示例（没有 Flash 回退，但如果您想要，可以添加）：

<!-- "Video For Everybody" http://camendesign.com/code/video_for_everybody -->
<video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
    <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
</video>
<p>
    <strong>Download video:</strong> <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">MP4 format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv">Ogg format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm">WebM format</a>
</p>

您会发现，为了获得最大的支持，特别是对于旧浏览器，您实际上需要将视频保存在多种不同的格式中。

然而，对于大多数人来说，使用MP4作为容器和H.264作为编解码器将覆盖大多数用户。

- Mick

Answer 2

考虑到可能存在一些老旧的浏览器和不符合标准的浏览器，考虑“所有浏览器”可能有些过度。

如果您想确保客户端浏览器可以播放您的视频，可以尝试以下几个方法：

• 实现modernizerhttps://modernizr.com/
• 为旧版浏览器使用“回退”，例如<object>或<embed>标签

如果上述方法无效，请尝试重新编码您的视频文件，因为它可能是使用不太流行的容器进行编码；至少确保视频编码格式与文件扩展名匹配。同时确保您的视频画面和音频分辨率不要过高。

- user4244405

---

亲爱的“扶手椅将军”们 - 为什么不在投票之前先做好你们的研究呢？ - user4244405

需要对这些无知的家伙采取一些行动；例如，如果您投票否定，则必须强制发表评论。 - user4244405

Answer 3

你的IE和Safari版本是多少？

请尝试在视频标签中添加一条消息，看看是否能看到它：

 <video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> 

- Sébastien Demoustiez

---

Safari 5.1.7和IE 8.0 - lakshmi prasanna

请不要混淆制定Web标准的W3C和发布低质量教程的W3Schools。在这种情况下，他们是错误的。Firefox本身不支持mp4（或者更确切地说，h.264是mp4常用的编解码器），它可以使用第三方mp4解码器...但前提是有可用的解码器。 - Quentin

@lakshmiprasanna，IE 8.0中没有HTML5视频标签（它太旧了，在标签被发明之前就存在了，因此无法理解它）。在我的测试中，支持是在IE 11.0中添加的。要在IE 8.0中播放mp4文件，请使用一些通过_Flash Player_浏览器插件运行的视频播放器进行编码。这将是一个嵌入到您的网页中的SWF文件。 - VC.One