Question

据我所知，HTML5视频比其支持者希望我们相信的更为复杂。 Safari使用专有的H.264编解码器，而Firefox，Chrome和Opera都支持开源的Theora。 Internet Explorer也不支持，因此需要回退，例如.mov或Flash。

我找到了一个精湛的指南，在所有这些浏览器上汇总了HTML5的分步指南，但我无法在任何地方找到它。非常讨厌:(

实施HTML5视频的最佳方式是什么，以便涵盖所有这些浏览器？（不幸的是，Flash不是一种选择。）

编辑：好的，根据我的阅读，这是我自己的答案：这是实施HTML 5视频的最佳方式...

    <video id="video" width="450" height="170" preload="auto" autoplay="autoplay">
        <source src="../static/video/video.mp4" />
        <source src="../static/video/video.webm" type='video/webm; codecs="vp8, vorbis"' />
        <source src="../static/video/video.ogv" type='video/ogg; codecs="theora, vorbis"' />
        <!-- Fallback (either Flash, an image, or a "Video not supported" message, etc.) -->
    </video>

到目前为止，这是在每个浏览器上按预期工作的唯一方式。不幸的是，自动播放似乎不适用于Chrome？：（

更新：Chrome不支持自动播放。

Answer 1

我怀疑Kroc Camen的这本指南是您想要的http://camendesign.com/code/video_for_everybody。

如果您乐意使用Flash来支持旧的IE，那就不像他在那里概述的那么难。

每个视频的两个版本，一个Theora和一个H.264将涵盖所有可能的内容。如果您不介意使用Flash而不是Theora的浏览器，那么一个H.264就足够了。

值得在WebM上阅读，它将取代theora。

Answer 2

<video id="movie" width="320" height="320" preload controls>
  <source src="pr6.mp4" type='video/mp4; codecs=avc1.42E01E, mp4a.40.2"' />
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf">
    <param ... />
  </object>
</video>

此示例取自 HTML5 Up and Running 一书。您可以在单个<video>标记中单独列出每个支持的视频编码。浏览器将尝试每个，从第一个开始。此示例显示了三种编码。您需要自己进行实际的视频编码。要支持多种浏览器，您需要多种编码。

最终条目是不支持新HTML5视频代码的浏览器的后备条目。在这个例子中，我使用了flash，但你可以使用你喜欢的任何旧式格式。

Answer 3

你正在谈论this the guide吗？

Answer 4

因此，如果Flash不是一个选项，你没有说明为什么，但我认为这无关紧要，什么是IE的aceptable？你是否乐意为IE提供视频，或者你想要什么？

上面给出的例子都是好的和有效的。在输入Flash选项的地方，您可以将其替换为您想要的任何内容，图像，一些文本通知用户他们的浏览器不受支持，并为他们提供指向要下载的视频的链接。无论你想要什么，基本上浏览器都会忽略任何它不理解的东西，直到它达到它所做的事情。

实现HTML5视频的最佳方式

4 个答案: