HTML5视频和Flash方法

Question

研究HTML5视频标签，了解哪些浏览器支持哪些视频文件类型，我的初步想法是这比使用Flash更加困难。

我想知道是否有一些基本代码（结合视频开发方法）可以实现以下目标：

1. 如果Flash可用，则使用Flash
2. 如果不行，则尝试使用html5视频ogg格式
3. 如果还不行，则尝试使用html5视频h.264格式
4. 如果还不行，则尝试使用html5视频webM格式

根据我所看到的，我是否正确地认为现在为了适应所有浏览器上的所有用户，一个视频需要以4种格式发布？如果是这样，那么HTML5视频就是一个失败的设计！

无论如何，感谢任何想法、流程、库链接等。

谢谢 -

- OneNerd

---

加一表示史诗级失败。在视频专利混乱得到解决之前，这是一个巨大的麻烦。 - spender

Answer 1

这并不难。您可以为单个<video>标签提供多个来源（以多种格式）。

<video width="320" height="240" controls>
  <source src="pr6.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>

还是先寻找 本地html5视频 为好选择，然后再回退到flash。

你需要的两种格式是WebM（免费，由Mozilla、Opera、Chrome等其他浏览器支持）和大型浏览器（IE和Safari）的H.264。您的备用选项（flash）也可以播放H.264。

如果您还没有阅读过此指南，我建议您先阅读一下。 编辑： 如果您正在寻找最低公共分母，那么肯定是使用 提示的 H.264 over HTTP 。Flash可以在没有媒体服务器的情况下播放它，并且它是iOS唯一支持的格式，因此您暂时只需要一个格式就可以了。

但是即使使用这种单一格式，您也可以在两个主流浏览器（Safari和IE）上支持基于HTML5的播放。我知道视频标签有点新，但它们是建立在操作系统的坚实基础之上的。即使处于这种状态，它们仍比Flash更好。

因此，真正的困境在于替代浏览器。您可以使用两种格式而不是一种格式（添加WebM），或者仅保留H.264并在非h264浏览器上使用Flash。

这实际上是个人偏好的问题（以及双倍存储的成本）。但是现在存储通常是免费的，带宽才是真正的成本因素。

- vbence

---

为什么先搜索 HTML5 更好？Flash 目前不是得到更广泛的支持吗？或者我有什么遗漏或好处吗？ - OneNerd

@OneNerd 如果只有其中一个存在，选择就很明显了。但是如果两者都可以，你会想要选择本地播放（HTML5），因为它更安全（免受可能的Flash崩溃）并且需要更少的CPU功率（这也转化为电池功耗）。 - vbence

我理解你的观点，但基于目前的情况，Flash优先于HTML5视频难道不意味着我可以将发布三次（格式）的视频转化为只需两次吗？（我想每个浏览器都支持Flash，除了iPad / iPhone，所以首选Flash，然后使用iOS支持的HTML5视频格式作为备用）。这可行吗，还是我漏掉了什么？谢谢。 - OneNerd

@OneNerd，这个问题已经存在一段时间了，所以我在编辑中回复了你。简而言之：是的，你是正确的 :) - vbence

Answer 2

你看到JWPlayer了吗？它可能会为你节省一些时间。

- spender