实现HTML5视频的最佳方式 [英] Best way to implement HTML5 video

问题描述

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

I understand that HTML5 video is way more complicated than its proponents would like us to believe. Safari uses the proprietary H.264 codec, whereas Firefox, Chrome and Opera all support the open-source Theora. Internet Explorer doesn't support either, so needs a fallback, such as .mov or Flash.

我在某个地方找到了一个精彩的指南所有这些浏览器上的HTML5指南，但我无法在任何地方找到它。非常讨厌：（

I found a superb guide somewhere that put together a step-by-step guide for HTML5 on all these browsers, but I can't find it anywhere. Very annoying :(

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

What's the best way to implement HTML5 video so that all these browsers are covered? (Unfortunately, Flash is not an option.)

编辑：好的，从我读过的，这是我自己的答案：这是最好的方法实现HTML 5视频......

Ok, from what I've read, here is my own answer: This is the best way to implement HTML 5 video...

    <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中？:(

It's the only way that's worked as expected on every browser so far. Unfortunately autoplay doesn't seem to be working in Chrome? :(

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

Update: Chrome doesn't support Autoplay.

推荐答案

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

I suspect this guide from Kroc Camen is the one you want http://camendesign.com/code/video_for_everybody.

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

It's not quite as hard as he outlines there if you are happy to use Flash to support older IEs.

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

Two versions of each video, one Theora and one H.264 will cover everything possible. One H.264 is enough if you don't mind browsers using Flash instead of Theora.

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

Worth reading up on WebM as well, it's set to replace theora.

这篇关于实现HTML5视频的最佳方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！