最佳实现HTML5视频的方法

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不支持自动播放。更新更新：使用“muted”属性可以实现自动播放。

- Chuck Le Butt

---

http://camendesign.com/code/video_for_everybody 可能会引起您的兴趣。 - jessegavin

为什么没有Flash选项？我和其他人一样讨厌Flash，但对于在XP上使用最新版本IE的用户来说，如果不使用其他插件（如QuickTime），就没有选择。 - Rich Bradshaw

我只是使用我所提供的...没有Flash文件，再加上客户对Flash有厌恶感。 - Chuck Le Butt

Answer 1

<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起步与运用》。您需要单独列出每种支持的视频编码格式，放在一个<video>标签中。浏览器将尝试每一种格式，从第一种开始。此示例显示了三种编码方式。您需要自己进行实际的视频编码。为支持多种浏览器，您需要多种编码方式。

最后一个条目是针对不支持新的HTML5视频标签的浏览器的备用方案。在这个示例中，我使用了Flash，但您可以使用任何老式格式。

- Michael Venable

---

太棒了，谢谢你的回答。不过正如我所说，Flash 不是一个选择，但我想我可以在那里放一张图片吧？ - Chuck Le Butt

@django 使用图像应该可以工作。不识别新视频标签的浏览器应该只是忽略它，并解释其中找到的任何标签。虽然我还没有测试过。 - Michael Venable

Answer 2

我猜想您需要的是Kroc Camen的这篇指南：http://camendesign.com/code/video_for_everybody。如果你愿意使用Flash来支持老版本IE浏览器，那么它并不像他所概述的那样难。每个视频都有两个版本，一个是Theora格式的，另一个是H.264格式的，这样就可以涵盖所有可能性。如果您不介意浏览器使用Flash而不是Theora，则只需一个H.264即可。值得了解WebM，因为它将取代Theora。

- Rich Bradshaw

---

那个指南看起来有点有用，但不是我找到的那一个。另外，正如我在问题中所说，很遗憾Flash不是一个选项。 - Chuck Le Butt

Answer 3

你说的是这个指南吗？

- keyboardP

Answer 4

如果Flash不是一个选项，你没有说为什么，但我想这并不重要，那么对于IE来说什么是可接受的呢？你是否愿意在IE上不提供任何视频，或者你想要什么？

上面给出的示例都很好和有效。在输入Flash选项的地方，您可以用任何您想要的东西替换它，比如一张图片，一些文字告诉用户他们的浏览器不受支持，并提供一个链接让他们下载视频。基本上，浏览器会忽略它不理解的任何内容，直到它遇到它理解的内容。

- Ian Devlin

---

是的，我可能会选择静态图像。我只是使用我所提供的内容。 - Chuck Le Butt

然后，人们提供的示例将正常工作，并只需用您需要的图像替换Flash内容（<object>元素）。就这样。 - Ian Devlin

确实如此，但现在我有一个新的问题：Chrome中没有自动播放。唉。 - Chuck Le Butt

奇怪，它在Chrome中可以工作：http://html5laboratory.com/s/advanced2-html5-video-test.html - Ian Devlin

嗯，我觉得这可能与我的视频最初被隐藏有关。在其他所有浏览器上都可以正常工作...真烦人。 - Chuck Le Butt

Answer 5

这可能有些晚了，但这是你需要的一些CSS控件。享受吧。

video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{display: none;}
video::-webkit-media-controls-time-remaining-display {display: none;}
video::-webkit-media-controls-time-remaining-display {display: none;}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}

<video width="400" height="260" controls disablePictureInPicture controlsList="nofullscreen nodownload noplaybackrate">
    <source src="http://cdn.papercut.com/video/home/home2.mp4"type="video/mp4" />
        <source src="http://clips.vorwaerts-gmbh.de/VfE.webm"type="video/webm" />
        <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv"type="video/ogg" />
</video>

- Ayoub ELKEBBAR