HTML 5 <video> 标签与 Flash 视频。优缺点都有什么？

HTML 5 <video> tag vs Flash video. What are the pros and cons?

提问by Vilx-

IMPORTANT UPDATE

重要更新

This question was made over 9 years ago. It made sense then, it doesn't make it now. Flash is hard on its way out; <video>support is ubiquitous, including mobile devices. Almost anything that Flash could do, HTML can now do too. HTML won, Flash lost. If you're pondering on how to embed video in your page, just use <video>and don't give it a second thought. This question is only preserved for historical value.

这个问题是9年前提出的。当时觉得有道理，现在不行了。Flash 很难走出去；<video>支持无处不在，包括移动设备。Flash 能做的几乎所有事情，HTML 现在也能做。HTML 赢了，Flash 输了。如果您正在考虑如何在您的页面中嵌入视频，只需使用即可<video>，不要再考虑了。这个问题只是为了历史价值而保留。

Original question

原始问题

Seems like the new <video>tag is all the hype these days, especially since Firefox now supports it. News of this are popping up in blogs all over the place, and everyone seems to be excited. But what about?

<video>这些天似乎新标签大肆宣传，尤其是因为 Firefox 现在支持它。这方面的消息在各地的博客中不断涌现，每个人似乎都很兴奋。但是关于？

As much as I searched I could not find anything that would make it better than the good old Flash video. In fact, I see only problems with it:

尽管我搜索了很多，但我找不到任何比旧的 Flash 视频更好的东西。事实上，我只看到它的问题：

• It will still be some time before all the browsers start supporting it, and much more time before most people upgrade;
• Flash is available already and everyone has it;
• You can couple Flash with whatever fancy UI you want for controlling the playback. I gather that the tag will be controllable as well (via JavaScript probably), but will it be able to go fullscreen?

• 所有浏览器开始支持它还需要一段时间，大多数人升级还需要更多时间；
• Flash 已经可用，每个人都拥有它；
• 您可以将 Flash 与任何您想要控制播放的精美 UI 结合使用。我认为标签也可以控制（可能通过 JavaScript），但它可以全屏显示吗？

The only two pros for a <video>tag that I can see are:

<video>我能看到的标签的唯一两个优点是：

• It is more "semantic" - which probably holds no importance to a whole lot of people, including me;
• It is not dependent on a single commercial 3rd party entity (Adobe) - which I also don't see as a compelling reason to switch, because free players and video converters are already available, and Adobe is not hindering the whole process in any way (it's not in their interests even).

• 它更“语义化”——这对包括我在内的很多人来说可能并不重要；
• 它不依赖于单个商业 3rd 方实体 (Adobe)——我也不认为这是一个令人信服的切换理由，因为免费播放器和视频转换器已经可用，而且 Adob​​e 不会以任何方式阻碍整个过程（这甚至不符合他们的利益）。

So... what's the big deal?

所以……有什么大不了的？

Added:

添加：

OK, so there is one more Pro... maybe. Support for mobile devices. Hard to say though. A number of thoughts race through my head about the subject:

好的，所以还有一位专业人士......也许吧。支持移动设备。不过很难说。关于这个主题，我的脑海中闪过许多想法：

• How many mobile devices are actually able to decode video at a decent speed anyway, Flash or otherwise?
• How long until mainstream mobile devices get the <video>support? Even if it is available through updates, how many people actually do that?
• How many people watch videos on web pages on their mobile phones at all?

• 有多少移动设备实际上能够以不错的速度解码视频，无论是 Flash 还是其他方式？
• 主流移动设备多久能得到<video>支持？即使它可以通过更新获得，但实际上有多少人这样做？
• 有多少人在手机上观看网页上的视频？

As for the semantics part - I understand that search engines might be able to detect videos better now, but... what will they do with them anyway? OK, so they know that there is a video in the page. And? They can't index a video! I'd like some more arguments here.

至于语义部分 - 我知道搜索引擎现在可能能够更好地检测视频，但是......无论如何他们会用它们做什么？好的，所以他们知道页面中有视频。和？他们无法索引视频！我想要更多的论据。

Added:

添加：

Just thought of another Cons. This opens up a whole new area of cross-browser incompatibility. HTML and CSS is quite messy already in this aspect. Flash at least is the same everywhere. But it's enough for at least one major browser vendor to decide against the <video>tag (can anyone say "Internet Explorer"?) and we have a nice new area of hell to explore.

只是想到了另一个缺点。这开辟了一个全新的跨浏览器不兼容领域。HTML 和 CSS 在这方面已经很混乱了。Flash 至少到处都是一样的。但是至少有一个主要的浏览器供应商决定反对这个<video>标签就足够了（有人能说“Internet Explorer”吗？），我们有一个很好的地狱新领域需要探索。

Added:

添加：

A Pro just came in. More competition = more innovation. That's true. Giving Adobe more competition will probably force them to improve Flash in areas it has been lacking so far. Linux seems to be a weak spot for it, cited by many.

Pro 刚进来。更多的竞争 = 更多的创新。确实如此。给予 Adob​​e 更多的竞争可能会迫使他们在 Flash 迄今为止缺乏的领域进行改进。许多人都提到，Linux 似乎是它的一个弱点。

采纳答案by Max Bellasys

There are many good points here, and like a Martial Arts fighting style, each point has its thrust, and each can be defended; but each can be defeated with the proper moves.

这里的优点很多，就像武林格斗，每一点都有它的推力，每一点都可以防守；但每个人都可以通过适当的动作击败。

Anyone standing on arguments about "propietary" plugins will fall quickly. Microsoft, Apple, and Adobe all bear the guilt, but that's just BUSINESS. You won't change business overnight, and each layer of complexity added by a new tag such as <video> which supports a very technical interface will result in * slightly * different implementations by each browser.

任何站在关于“专有”插件的争论上的人都会很快陷入困境。微软、苹果和 Adob​​e 都负有愧疚，但这只是生意。您不会在一夜之间改变业务，并且由支持非常技术性界面的新标签（例如 <video> ）添加的每一层复杂性将导致每个浏览器*略微*不同的实现。

HTML 5 works now, and so does Flash. Howit is implemented, the skill it requires- this defines each resource, whether it's an employee's performance, a webmaster's power, or a domain's influence.

HTML 5 现在可以使用，Flash 也可以。它是如何实施的，它需要的技能——这定义了每个资源，无论是员工的表现、网站管理员的权力还是域的影响力。

Although I'm only 40, I began programming when orange or green monochrome monitors were the color choice, and hardware installation came with prayer books instead of instruction manuals. Maybe you could figure out AT commands for the modem when it wouldn't configure with your hardware, and 64K RAM was like, WOWWWWW!

虽然我只有 40 岁，但当橙色或绿色单色显示器是颜色选择时，我开始编程，硬件安装随附祈祷书而不是使用说明书。也许你可以在调制解调器没有配置你的硬件时找出它的 AT 命令，而 64K RAM 就像，WOWWWWW！

HTML 5/Flash is a minor nuisance compared to that crap. Let's all learn how to collaborate in community toward a better resource. There is an Open Source Flash Project, it will have bugs. So will HTML 5...

与那些垃圾相比，HTML 5/Flash 是一个小麻烦。让我们都学习如何在社区中合作以获得更好的资源。有一个开源 Flash 项目，它会有错误。HTML 5 也是如此...

Every argument here is true, but not necessarily productive. Use that energy toward a solution.

这里的每一个论点都是正确的，但不一定富有成效。将这种能量用于解决方案。

回答by Rich Bradshaw

Imagine if there was no imgtag. If you want images, you have to use a 3rd party plugin, that is really slow and has no standard way to embed it in a page. You can't easily copy images in this way, and search engines basically have no clue what if it's an image or a game or anything.

想象一下，如果没有img标签。如果您想要图像，则必须使用第 3 方插件，这真的很慢，并且没有将其嵌入页面的标准方法。你不能用这种方式轻松复制图像，搜索引擎基本上不知道它是图像还是游戏或任何东西。

Without this, no images were available.

没有这个，就没有可用的图像。

Then imagine that a browser was released that just let you use this fancy new imgtag.

然后想象一下发布了一个浏览器，它只是让你使用这个花哨的新img标签。

The video (and audio) tag are a logical sensible way for things to work. We shouldn't need a third party plugin to use a completely standard media format.

视频（和音频）标签是使事情工作的合乎逻辑的合理方式。我们不需要第三方插件来使用完全标准的媒体格式。

回答by Xanthir

The biggest benefit of <video>? It's easy.Crazy easy. Ridiculously easy. Your-grandma-can-code-a-video-tag easy. <video src="myfile.ogv"></video> and you're done.

<video> 最大的好处是什么？ 这很简单。疯狂容易。轻而易举。您的祖母可以轻松编码视频标签。<video src="myfile.ogv"></video> 大功告成。

<video> also has clear benefits for your users. They get a browser-native video player, which can potentially be very efficient. They get a consistent UI that won't change from site to site. Mobile browsers that may not implement flash can still implement <video>.

<video> 对您的用户也有明显的好处。他们获得了浏览器原生视频播放器，这可能非常高效。他们获得一致的 UI，不会因站点而异。可能没有实现 Flash 的移动浏览器仍然可以实现 <video>。

The only con is a temporary one, and that is compatibility. IE8 doesn't support <video>, and it will be some time before IE9 is widely installed. As well, there's some fight over which codecs to support for the videos - Firefox, Chrome, and Opera all support both Ogg Theora and WebM, while Safari and IE are shipping H.264 (though either can support Theora/WebM with proper codecs). For now, this just means that you have to post your video in two formats and provide them both with the source element, i.e.:

唯一的缺点是暂时的，那就是兼容性。IE8 不支持<video>，要广泛安装IE9 还需要一段时间。同样，在支持视频的编解码器方面也存在一些争论——Firefox、Chrome 和 Opera 都支持 Ogg Theora 和 WebM，而 Safari 和 IE 正在提供 H.264（尽管两者都可以通过适当的编解码器支持 Theora/WebM） . 目前，这仅意味着您必须以两种格式发布视频并为它们提供源元素，即：

<video>
  <source src='video.webm' type='video/webm'>
  <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

To add support for IE 8 and earlier, and other downlevel clients (like older versions of FF/Safari/Opera/etc), just put your standard video embed code inside the <video> tag, below the <source> elements. If the browser supports <video>, it'll ignore the embed. If it doesn't, it'll ignore the <video> and run the embed instead.

要添加对 IE 8 及更早版本和其他下层客户端（如旧版本的 FF/Safari/Opera/等）的支持，只需将您的标准视频嵌入代码放在 <video> 标签中，在 <source> 元素下方。如果浏览器支持 <video>，它将忽略嵌入。如果没有，它将忽略 <video> 并运行嵌入。

回答by Seth Johnson

Flash is slow and inefficient on non-Windows platforms. It has potential security flaws. It stores "flash cookies" on your computer that you don't know about. There is no flash on the iPhone and unlikely ever will be (as a result of its being proprietary and its high CPU consumption).

Flash 在非 Windows 平台上运行缓慢且效率低下。它有潜在的安全漏洞。它在您的计算机上存储您不知道的“闪存 cookie”。iPhone 上没有闪存，而且以后也不可能有（因为它是专有的，而且 CPU 消耗很高）。

HTML 5: Could it kill Flash and Silverlight?is an article that might answer your question.

HTML 5：它能否杀死 Flash 和 Silverlight？是一篇可能会回答您的问题的文章。

There are probably more reasons out there.

可能还有更多原因。

回答by Alex Basson

Flash is a real headache on non-Windows platforms. Not only is it slow and inefficient (as someone else pointed out), but it isn't very stable, either. As we learned at the most recent Apple WWDC, "browser plugins" (read: Flash) account for the majority of allapplication crashes across allof Mac OS X (and by "majority", I mean some absurdly high number like 80% or something, can't remember the exact figure offhand). This is such a problem on Mac OS X that for Snow Leopard, Apple has re-engineered Safari so that Flash runs, not just sandboxed, but in fact as an entirely separate process, so that when (not if) Flash crashes, Safari as a whole remains unaffected.

Flash 在非 Windows 平台上是一个真正令人头疼的问题。它不仅缓慢且效率低下（正如其他人指出的那样），而且也不是很稳定。正如我们在最近的 Apple WWDC 上了解到的那样，“浏览器插件”（阅读：Flash）占所有Mac OS X中所有应用程序崩溃的大部分（“多数”，我的意思是一些荒谬的数字，例如 80% 或有些东西，不记得确切的数字了）。这是 Mac OS X 上的一个问题，对于 Snow Leopard，Apple 重新设计了 Safari 以便 Flash 运行，不仅是沙盒化的，而且实际上是作为一个完全独立的进程运行，这样当（不是如果）Flash 崩溃时，Safari 作为整体不受影响。

The instability of Flash on OS X, coupled with its poor performance, is why...

Flash 在 OS X 上的不稳定性，加上其性能不佳，是为什么...

• ...Flash is not now, nor unlikely to be soon, available for the iPhone. I disagree with the premise that people don't want to watch video on their mobile devices -- this is why Apple made a special arrangement for YouTube to serve their content in h.264 for the purposes of allowing it to play on the iPhone. I, for one, happily paid the $10 for MLB 2009 exactly because I could watch video on my iPhone, and if they made every game available for live viewing, I'd pay much much more.
• ...so many Mac OS X users (like me) are installing Flash blockers for their browsers. By my choice, Flash content no longer even loads in my browser without my explicit permission. Since installing it, my CPU usage has dropped considerably, and my browser crashes have basically gone away. This is great news for me, of course, but it's bad news for any advertisers hoping to serve me Flash-based ads.

• ...Flash 现在还没有，也不太可能很快，可用于 iPhone。我不同意人们不想在他们的移动设备上观看视频的前提——这就是为什么 Apple 为 YouTube 做出特殊安排，以 h.264 格式提供他们的内容，以便允许它在 iPhone 上播放。一方面，我很高兴为 MLB 2009 支付了 10 美元，正是因为我可以在我的 iPhone 上观看视频，如果他们让每场比赛都可以实时观看，我会支付更多。
• ...许多 Mac OS X 用户（如我）正在为他们的浏览器安装 Flash 拦截器。根据我的选择，未经我的明确许可，Flash 内容甚至不再加载到我的浏览器中。安装后，我的 CPU 使用率大幅下降，浏览器崩溃基本消失。当然，这对我来说是个好消息，但对于任何希望为我提供基于 Flash 的广告的广告商来说，这是个坏消息。

As far as users having to know anything about codecs is concerned, you can avoid this issue and serve them the appropriate codec (including Flash, if their browser doesn't support OGG or h.264) by using the simple non-Javascript html code found in this article.

就必须了解编解码器的用户而言，您可以避免此问题并使用简单的非 JavaScript html 代码为他们提供适当的编解码器（包括 Flash，如果他们的浏览器不支持 OGG 或 h.264）在这篇文章中找到。

回答by hannson

Pros:

优点：

1. You can easily use the tag and let it degrade to flash or other filetypes/codecs for backwards compatibilitywithout using javascript.
   • Doesn't need a proprietary plug-in
   • Is platform-independent while flash is not (see nr. 2)
   • Using it will encourage other browser vendors to implement it (read as IE)
   • The tag has semantic meaning.
   • Comes built into the browser.
   • No vendor lockin

1. 您可以轻松使用该标签并让它降级为 flash 或其他文件类型/编解码器，以实现向后兼容性，而无需使用 javascript。
   • 不需要专有插件
   • 是平台独立的，而闪存不是（参见 nr. 2）
   • 使用它会鼓励其他浏览器供应商实施它（阅读为 IE）
   • 标签具有语义意义。
   • 内置于浏览器中。
   • 没有供应商锁定

Cons:

缺点：

1. It's a part of an unfinished standard.
   • A very small percentage of installed browsers support it <-- not an issue (See pro nr. 1)
   • Browser vendors have yet to agree on a standard codec <-- not an issue either, see link in nr. 1)

1. 它是未完成标准的一部分。
   • 一小部分已安装的浏览器支持它 <-- 不是问题（参见 pro nr. 1）
   • 浏览器供应商尚未就标准编解码器达成一致<-- 也不是问题，请参阅 nr 中的链接。1)

回答by doekman

It's also an advantage the video-tag is nativeto html, so it integrates nicely. This sounds like a non-issue, but it's not. You can for example overlay the video with some HTML caption. And the HTML caption can use the same styles as other captions on the same page.

视频标签是html原生的也是一个优势，因此它可以很好地集成。这听起来不是问题，但事实并非如此。例如，您可以使用一些 HTML 标题覆盖视频。并且 HTML 标题可以使用与同一页面上的其他标题相同的样式。

You also can apply some (future) CSS transitions to the video element: look at this demo.

您还可以将一些（未来的）CSS 转换应用于视频元素：查看此演示。

回答by Arjan

Adobe's Flash player (being a plugin) does not take anyof the browser's privacy settings into account, while Adobe is not actively making clear to normal users what is being stored. This alone is a good reason to stop using Flash (or any video plugin) and welcome <video>.

Adobe 的 Flash 播放器（作为插件）不会考虑浏览器的任何隐私设置，而 Adob​​e 并未主动向普通用户说明所存储的内容。仅此一项就是停止使用 Flash（或任何视频插件）并欢迎<video>.

Some details about the privacy issues (not to be confused with security issues or vulnerabilities) can be found at How to automatically remove Flash history trail?on Super User.

有关隐私问题的一些详细信息（不要与安全问题或漏洞混淆）可以在如何自动删除 Flash 历史记录中找到？在超级用户上。

Like Vilxnoted in the comments: these privacy issues remain when replacing Flash-video by <video>, as Flash is used in many more ways. Still, once <video>is supported then site owners who offer video (and don't use Flash in any other way) will have a choice not to burden their visitors with this poorly documented record of visited Flash-sites.

就像Vilx在评论中指出的那样：当用 替换 Flash-video 时，这些隐私问题仍然存在<video>，因为 Flash 的使用方式更多。尽管如此，一旦<video>获得支持，提供视频的站点所有者（并且不以任何其他方式使用 Flash）将可以选择不让访问者使用这种不良记录的访问 Flash 站点记录来增加他们的访问者的负担。

(EDIT: I replaced the details with a link to SU, which gives some more insight; some of the comments below will only make sense with respect to a previous revision.)

（编辑：我用指向 SU 的链接替换了详细信息，这提供了更多见解；下面的一些评论仅对之前的修订版有意义。）

回答by pupeno

For me, it'd be very nice to have the computer built-in or another third party player play the video much more efficient than Flash can do. Not all platforms have Flash: iPhone and Android (for now at least), where the tag may work sooner rather than later. Not talking about Linux either, where Flash works quite badly.

对我来说，让计算机内置或其他第三方播放器比 Flash 播放视频的效率高得多是非常好的。并非所有平台都有 Flash：iPhone 和 Android（至少现在是这样），标签可能会早日发挥作用。也不是在谈论 Linux，在那里 Flash 工作得非常糟糕。

Regarding the Internet being more semantic, it may be important to you. I'm not sure how search engines likes Google and Bing find videos but probably they just know about a bunch of Flash video implementations, so third party small players have no chance. If we are all using the same standard tag, then everybody is on a level playing field.

关于互联网更具语义性，这对您来说可能很重要。我不确定像 Google 和 Bing 这样的搜索引擎如何找到视频，但可能他们只知道一堆 Flash 视频实现，所以第三方小播放器没有机会。如果我们都使用相同的标准标签，那么每个人都处于公平的竞争环境中。

回答by hsivonen

Pros:

优点：

• Ogg/Theora/Vorbis is royalty-free for all parties is the chain (the H.264 grace period for hostingH.264 ends at the end of 2015 and encoding and decoding are alreadysubject to royalty)
• Once fallback for IE is no longer necessary, <video>will be easier than Flash
• No need for the plug-in prison—browser vendors can fix their own bugs
• Integrates with CSS effects
• Integrates with SVG effects
• Integrates with JavaScript
• Can be ported to any platform without permission from Adobe
• User can save the video to disk easily
• Can be made work safely in syndication feeds (but software not ready yet)

• Ogg/Theora/Vorbis 对链上各方都是免版税的（托管H.264的H.264宽限期在2015年底结束，编码和解码已经需要缴纳版税）
• 一旦不再需要 IE 的回退，<video>将比 Flash 更容易
• 无需插件监狱——浏览器厂商可以自行修复bug
• 与 CSS 效果集成
• 与 SVG 效果集成
• 与 JavaScript 集成
• 可以在未经 Adob​​e 许可的情况下移植到任何平台
• 用户可以轻松地将视频保存到磁盘
• 可以在联合提要中安全地工作（但软件尚未准备好）

Cons:

缺点：

• IE support for the video element has to wait until IE9; current IE-compatible Ogg fallback renderer relies on Java until the ActiveX solution or the Silverlight solution is finalized
• Safari needs XiphQT to play Ogg, because Apple hasn't shipped Theora.
• Royalty-encumbered format needed with the iPhone (but no worse than Flash)
• Can't go full-screen in every desktop implementation shipping today

• IE对视频元素的支持要等到IE9；当前与 IE 兼容的 Ogg 回退渲染器依赖于 Java，直到 ActiveX 解决方案或 Silverlight 解决方案最终确定
• Safari 需要 XiphQT 来玩 Ogg，因为 Apple 还没有发布 Theora。
• iPhone 需要版权费的格式（但不比 Flash 差）
• 无法在今天交付的每个桌面实现中全屏显示