5

我知道 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 不支持自动播放。

4

4 回答 4

4

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

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

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

WebM 也值得一读，它将取代 theora。

于 2011-06-01T19:35:38.523 回答
4 
<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，但您可以使用您喜欢的任何老式格式。

于 2011-06-01T19:39:47.987 回答
1

这就是你说的指南吗？

于 2011-06-01T19:20:21.817 回答
1

所以如果 Flash 不是一个选项，你没有说为什么，但我想那没关系，什么是 IE 可以接受的？您是否乐于不为 IE 提供任何视频，或者您想要什么？

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

于 2011-06-02T08:43:32.610 回答