HTML 5 <video> 标签与 Flash 视频,其优缺点是什么?

117

重要更新

这个问题是9年前提出的。当时它有意义,但现在已经没有了。Flash正在退出历史舞台;<video>支持已经无处不在,包括移动设备。几乎所有Flash可以做到的事情,HTML现在也可以了。HTML赢了,Flash输了。如果您在考虑如何在网页中嵌入视频,请使用<video>,不要再考虑第二次。此问题仅为保留历史价值而存在。

原始问题

看起来新的<video>标签这些天很火,特别是自Firefox开始支持以来。关于这个的新闻在各种博客上纷纷涌现,每个人都似乎很兴奋。但是呢?

我搜索了很多,但始终找不到任何比老旧的Flash视频更好的东西。事实上,我只看到了一些问题:

  • 所有浏览器开始支持它还需要一些时间,大多数人升级的时间更长;
  • Flash已经可用,每个人都有它;
  • 您可以将Flash与任何想要控制回放的花哨UI结合使用。我认为<video>标签也将是可控的(可能通过JavaScript),但它能全屏吗?

我唯一看到的使用<video>标签的两个优点是:

  • 它更具“语义性” - 对于包括我在内的许多人来说可能都不重要;
  • 它不依赖于单一商业第三方实体(Adobe) - 我也不认为这是一个强制转换的充分原因,因为已经有免费播放器和视频转换器可用,并且Adobe没有以任何方式阻碍整个过程(甚至与其利益相悖)。

所以...这有什么大不了的?

添加:

好吧,还有一个可能是正面因素...支持移动设备。不过很难确定。我的脑海中闪过了很多关于这个主题的想法:

  • 有多少移动设备实际上能够以良好的速度解码视频,无论是Flash还是其他格式?
  • 主流移动设备何时获得<video>支持?即使通过更新可用,有多少人真正会这样做?
  • 有多少人在其移动电话上查看网页上的视频?

至于语义部分-我明白搜索引擎现在可能能够更好地检测视频,但是...他们究竟会对它们做什么呢?好吧,他们知道页面中有一个视频。然后呢?他们不能索引视频!我希望在这里有更多的论据。

新增:

刚刚想到另一个缺点。这将开启一个全新的跨浏览器不兼容领域。在这方面,HTML和CSS已经相当混乱了。Flash至少在任何地方都是一样的。但只要有至少一个主要的浏览器供应商反对<video>标签(有人可以说“Internet Explorer”吗?),我们就有了一个好新的研究领域。

新增:

还有一个优点。更多的竞争=更多的创新。这是真的。给Adobe带来更多的竞争可能会迫使他们在Flash至今一直存在缺陷的领域改进。Linux似乎是其中一个弱点,被许多人引用。


29
应该设为社区维基。 - SilentGhost
1
同意,听起来应该是一个社区维基。 - Gab Royer
4
关于您提到的“缺点”之一 - 危险并不在于IE不支持<video>。危险在于IE、FF、Opera、Chrome和Safari以稍微不同的方式支持<video>,就像CSS一样。 :( - fenomas
Vilx:DivX/XviD存在许可证/专利问题,这将阻止它们“获胜”。关键是它们不能自动捆绑某些法律风险的编解码器,因此像FFMpeg这样的东西完全不可能。这些公司太富有和高调了,无法在没有因专利纠纷而被起诉的情况下使用可疑的编解码器。 - aehlke
Flash已经可用,每个人都有它 - 但我的Linux机器上没有。 - alternative
显示剩余15条评论
31个回答

113

想象一下,如果没有img标签。如果您想要图片,您必须使用第三方插件,这非常缓慢,而且没有标准的方式将其嵌入页面中。您不能轻松地以这种方式复制图像,并且搜索引擎基本上不知道它是图像还是游戏或其他任何东西。

没有这个,就没有可用的图片。

然后想象一个浏览器发布了,只让您使用这个花哨新的img标签。

视频(和音频)标签是一种逻辑合理的工作方式。我们不应该需要第三方插件来使用完全标准的媒体格式。


14
有趣的比喻。从这个角度来看,<video> 标签确实有意义。 - Vilx-
3
具有讽刺意味的是,实际上有SVG浏览器插件 :) - hannson
15
不是一个好的比喻。视频和图像并不相同。图像是静态的,而视频是交互式的,并需要一个接口。图像被对齐在一起形成更大的模式和背景,而视频通常是中心件,更不用说它们嵌入声音,我们只能同时听取一种声音来理解它。静态图像很像文本,事实上文本经常被嵌入为图像。视频非常不同;它与图像唯一共同之处就是像素,但这对于任何在计算机屏幕上显示的内容都是真实的。 - Triynko
3
在某种意义上,它们是“相同的”,因为浏览器(或插件)需要解压缩二进制数据并将其显示给用户,并且所有图像格式在所有浏览器中的支持程度与浏览器中视频支持的不规则性相当。你冗长的反驳仅仅是令人烦恼的元话。 - Stu Thompson
2
@Stu: 这个类比不好,因为它过于简单化了问题。向浏览器添加“视频”标签(和编解码器)并不能改变视频是图形化和交互性的,需要一个 G.U. 接口来控制它。没有一种银弹式的视频播放接口能让所有人放弃他们的创造力并屈服于它之前。如果你尝试添加自定义接口,你就成功地打败了易于使用,“只需工作”的标签的目的。此外,视频并不总是按线性方式访问,这个标签将必须支持所有支持的格式的流和随机访问。G.L. - Triynko
显示剩余5条评论

49
<video>有什么最大的好处?它非常简单。超级简单。你奶奶都可以编写视频标签。只需<video src="myfile.ogv"></video>即可完成。
<video>还有明显的用户优势。他们可以获得一个在浏览器中本地播放视频的播放器,这可能非常高效。他们可以获得一个一致的用户界面,无论从哪个站点进入都不会改变。可能不支持Flash的移动浏览器仍然可以实现<video>。
唯一的缺点是临时性的,那就是兼容性问题。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>

为了支持IE 8及更早版本,以及其他下级客户端(如较旧版本的FF / Safari / Opera等),只需将标准视频嵌入代码放在<source>元素下面的<video>标签中即可。如果浏览器支持<video>,它会忽略嵌入式代码。如果不支持,则会忽略<video>并运行嵌���式代码。


29
换句话说,为了获得合理的跨浏览器兼容性,需要做到从“非常简单”到“非常复杂”。此外,现在您至少需要以三种不同的格式编码视频。而且你仍然没有摆脱旧的Flash播放器-你只是在周围添加了一些混乱的代码。没错…… - Vilx-
11
兼容性问题并不是问题(请查看我回答中的链接)。@Vilx - 我不同意,转向适当的标准是互联网进化的重要部分。你的论点在一段时间前曾被人们听到,当人们开始从基于表格的布局转向使用div和css时。 - hannson
2
@Vilx,虽然这只是暂时的,但<video>成为主流可能需要至少5年的时间。 - hasen
3
多种质量和编解码器的编码正在迅速成为现实。当人们还满足于256kbps的Real流,并且手机只有单色液晶屏幕时,这是可以接受的。现在我们有各种质量和设备——网页、iPod、手机,很快还会有电视。抱怨将内容编码成多种格式的理由是薄弱的。 - Stu Thompson
2
Vilx:是的,现在要兼容使用还是比较困难的(虽然不至于像“意大利面条式”的混乱)。毕竟它现在才开始被大家采用,这很正常。如果你想要我在回答中提到的便捷性,那就再等几年,等浏览器稳定下来。非IE浏览器应该会在几年后加入一起,当他们结束编解码器之争时,带着兼容的编解码器,IE9也有可能会包含<video>。然后你只需要等待,直到可以忽略IE<9,你就可以开始了。 - Xanthir
显示剩余2条评论

37

Flash 在非 Windows 平台上运行缓慢且效率低下,有潜在的安全漏洞。它会在计算机上储存“Flash Cookie”,用户并不知情。由于 iPhone 是专有技术且 CPU 消耗高,因此不可能有 Flash 应用。

HTML5:何以取代 Flash 和 Silverlight?这篇文章或许能回答你的问题。

或许还有其他原因存在。


6
最新版本的Linux上Flash似乎比以前更差(在Ubuntu Jaunty中明显更糟)。YouTube现在的性能不可接受(100% CPU占用和跳帧现象)。 - Craig McQueen
完全偏题,但我在Jaunty下甚至无法流畅地观看Hulu,我的C2D。 - prestomation
http://www.infoworld.com/d/developer-world/html-5-could-it-kill-flash-and-silverlight-291 - Esteban Küber
7
对我而言,无论在哪里使用Flash,它都显得缓慢且效率低下,即使在Windows系统上也是如此。 - pupeno
所有的观点都很好,但我认为没有Flash在iPhone上的主要原因是应用商店以及苹果在每一笔销售中收取的30%佣金。如果有免费的Flash应用程序和游戏,为什么要冒着危及这个佣金制度的风险呢? - Pekka
嗯,你有没有意识到iPhone上有免费(广告支持的)游戏吗?我不认为苹果从中收取佣金。 - Seth Johnson

36

这里有很多好的观点,就像武术战斗风格一样,每个观点都有其重点,并且每个观点都可以被辩护;但是,每个观点都可以通过适当的动作来打败。

任何纠缠于“专有”插件的争论都会很快失败。微软、苹果和Adobe都有罪,但这只是商业行为。你不可能在一夜之间改变商业行为,而每一个新标签(如支持非常技术界面的<video>)增加的复杂性层次将导致每个浏览器实现略有不同。

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

虽然我只有40岁,但我开始编程时,橙色或绿色的单色显示器是颜色选择,硬件安装带着祷告书而不是说明书。也许你可以在调制解调器不能与硬件配置时找出AT命令,而64K RAM就像,哇哇哇!

与那些垃圾相比,HTML 5/Flash只是小小的麻烦。让我们学习如何在社区中合作,共同创造更好的资源。有一个开源的Flash项目,它会有错误。HTML 5也会有...

这里的每个论点都是正确的,但不一定是有生产力的。将那种能量用于解决问题。


2
阿门!我没想到这个问题会有一个被接受的答案,但我认为这些智慧的话语值得置顶。 - Vilx-

25

Flash在非Windows平台上是一个真正的难题。它不仅速度慢且效率低(正如其他人所指出的那样),而且也不太稳定。正如我们在最近的苹果WWDC上所学到的,“浏览器插件”(即Flash)占据了所有Mac OS X应用程序崩溃的大部分原因(“大部分”意味着某个荒谬地高的数字,例如80%之类的数字,我现在无法记住确切的数字)。这在Mac OS X上是一个如此严重的问题,以至于对于Snow Leopard,苹果已经重新设计了Safari,使Flash运行在完全独立的过程中,因此当(而不是如果)Flash崩溃时,整个Safari不会受到影响。

Flash在OS X上的不稳定性,加上其较差的性能,是为什么...

  • ...Flash现在不可用于iPhone,并且不太可能很快推出。我不同意人们不想在移动设备上观看视频的前提-这就是为什么苹果与YouTube达成特殊协议,以便允许它使用h.264服务提供其内容以在iPhone上播放。我很高兴为MLB 2009支付了10美元,因为我可以在iPhone上观看视频,如果他们使所有游戏可供实时查看,我会支付更多的费用。
  • ...许多Mac OS X用户(如我)正在为其浏览器安装Flash拦截器。出于我的选择,Flash内容甚至不需要我的明确许可就无法加载到我的浏览器中。自从安装以来,我的CPU使用率已大大降低,我的浏览器崩溃基本上已经消失了。这对我来说是个好消息,当然,这对希望向我提供基于Flash的广告的任何广告商来说都是个坏消息。

至于用户必须知道编解码器的任何事情,您可以通过使用此文章中的简单的非JavaScript html代码,为他们提供适当的编解码器(包括Flash,如果他们的浏览器不支持OGG或h.264),以避免此问题。


2
+1 对于总体上的好观点,但我在OSX和Safari上大量使用Flash(作为一个ActionScript开发者)。在所有应用程序崩溃中占80%的浏览器插件中,也许是Flash Player的原因,也可能不是。我没有遇到很多浏览器崩溃,而且像我说的那样,我经常使用FP。而且,在OS X上,所有应用程序崩溃的80%并不是一个很大的数字。至少对我来说不是。最后,虽然有可能,但我从未注意过Flash Player在Mac上的缓慢或低效问题。 - Ross Henderson

13

优点:

  1. 您可以轻松地 使用标签,并使其向后兼容到Flash或其他文件类型/编解码器 而无需使用JavaScript
    • 不需要专有插件
    • 是平台独立的,而Flash则不是(请参见第2点)
    • 使用它将鼓励其他浏览器供应商实现它(如IE)
    • 标签具有语义含义。
    • 内置于浏览器中。
    • 没有供应商锁定

缺点:

  1. 它是未完成的标准的一部分。
    • 安装的浏览器中仅有非常小的比例支持它<--不是问题(请参见优点1)
    • 浏览器供应商尚未就标准编解码器达成一致<--也不是问题,请参见第1点中的链接)

1
所有这些关于平台独立性的谈论都是可笑的。HTML比Flash更依赖于平台,因为每个平台对HTML的实现都不同,并且每个平台上都由不同的公司实现!Flash是一个独立的平台(连同Java一起),由单个实体跨平台开发,因此显示相同的跨平台内容...例如来自Flash原始版本的内容仍然可以在最新的插件中正确播放。Flash是一种福音,并且在99%的浏览器上都可用(http://www.adobe.com/products/player_census/flashplayer/version_penetration.html)。 - Triynko
为什么要让用户安装一个不安全、缓慢和资源消耗大的浏览器插件,当他们本来不需要的时候呢?参见专业号1。那么对于Adobe不支持或将来取消支持的平台呢?作为Web开发人员,我想你也不会使用CSS吧?毕竟根据你自己的说法,CSS比Flash更依赖于平台,因为每个平台都以不同的方式实现CSS。我并不是说我们应该忽略Flash,但我们不应该忽视开放标准的可能性,特别是在这种情况下,Flash可以用于向后兼容。 - hannson
1
那么强制用户下载新的编解码器会更容易吗?这就是 Flash 起飞之前的情况 - 每种媒体类型(Real、WMP、Quicktime)都有一个非常简单的标签触发,插件处理它。 - aronchick
1
我明确表示不需要这样做。可以同时支持许多编解码器(包括Flash),因此用户无需参与。 - hannson

11

视频标签是 HTML 的本地标签,这也是一个优点,因为它很好地集成了进去。这听起来可能不是个问题,但实际上不是这样的。例如,您可以使用一些 HTML 标题覆盖在视频上面。此外,HTML 标题可以使用与页面上其他标题相同的样式。

您还可以对视频元素应用一些(未来的)CSS 过渡效果: 看看这个演示


1
将视频与HTML/CSS混合使用确实是一个很好的理由。当所有浏览器都支持它时,这将允许一些非常不错的效果! - Vilx-

7
对我来说,如果电脑内置或其他第三方播放器能够比Flash更高效地播放视频,那将是非常好的。并非所有平台都支持Flash:iPhone和Android(至少目前如此),其中标签可能会更快地起作用。也不谈论Linux,在那里Flash效果相当糟糕。
关于互联网变得更语义化,这可能对您很重要。我不确定像Google和Bing这样的搜索引擎如何找到视频,但可能它们只知道一堆Flash视频实现,因此第三方小型播放器没有机会。如果我们都使用相同的标准标签,那么每个人都处于同等竞争的水平。

我相信Google Video是通过在像YouTube和Dailymotion这样的网站上发布视频的元数据来查找视频的。 - MiffTheFox
2
我对Flash非常熟悉,但对我来说,这是<video>的最大优势。Flash内部的所有内容都对通用解析隐藏起来,包括索引,有时可能是你想要的,但通常它是一个不幸的弊端。 - fenomas

7
Adobe的Flash播放器(作为插件)不考虑任何浏览器隐私设置,同时Adobe没有明确向普通用户展示正在存储什么。这就是停止使用Flash(或任何视频插件)并欢迎<video>的一个好理由。
关于隐私问题的一些细节(与安全问题或漏洞不要混淆)可以在超级用户上找到:如何自动删除Flash历史记录?
正如Vilx在评论中指出的那样:用<video>替换Flash视频后,这些隐私问题仍然存在,因为Flash在许多其他方面都被使用。但是,一旦支持<video>,那么提供视频的网站所有者(并且没有以任何其他方式使用Flash)将有选择权,不会给访问者带来这个文档记录不良访问Flash站点的负担。
(编辑:我用SU的链接代替了详细信息,这样可以更好地了解;下面的一些评论只在之前的修订版方面看起来有意义。)

但是这些问题将会持续存在,除非有人卸载Flash Player。而且没有人会因为现在可以不用它观看视频而卸载它。Flash Player的用途远不止于视频 - 还有大量的游戏甚至整个网页都是基于它构建的。人们会继续使用它,毫无疑问。 - Vilx-
没错,@Vilx,你说得对。然而,一旦<video>得到支持,作为网站所有者,我将有选择权,不会让我的访客承受这种文档不完整的隐私泄漏的负担。 - Arjan
这并不完全正确。只有嵌入Flash内容的网站才会被保存。LSO不是cookie,而是本地存储。cookie是HTTP的一部分,允许服务器设置将由客户端传输的变量。它们用于会话处理已被证明会导致漏洞。LSO保留在您的计算机上,只能从来自同一域的Flash文件中读取。Flash播放器有自己的设置,因为人们可能有多个浏览器和一个插件。这有点像在Windows上安装QuickTime并抱怨它忽略了自动更新设置 :-P - back2dos
当然,Flash不会存储没有Flash的网站,我应该更加明确这一点。但是LSO绝对像我们从HTTP中了解到的cookie一样运作,这就是为什么许多人称它们为Flash Cookie的原因。事实上,甚至Adobe在他们的许多支持文章中也使用了这个名字。主要区别:无限制的时间和大小存储,跨浏览器,并且对大多数用户来说相当不知名。 :-( - Arjan
2
这是一个相当模糊的答案。虽然LSO对于删除和隐私模式来说确实很难访问,但与此同时它们并不是cookie(首先它们不会随着传出的HTTP请求发送)。而且说它们比普通cookie“更危险”是极其模糊的,因为已知有关普通cookie的漏洞,而没有关于LSO的漏洞。 - fenomas
虽然我不同意简单地说“它们不是cookie”(同意,它们不是HTTP cookie,但甚至Adobe经常写“有时称为Flash LSO或Flash cookie”),但我希望我的最后一次编辑使我的回答更清楚,即我的答案是关于隐私追踪(并留下痕迹)的意义,而不是安全或漏洞的意义。再次阅读我对back2docs评论的回复,“LSO绝对像我们从HTTP中了解到的cookie一样”也应该指的是留下痕迹。顺便说一句:我从未写过所有Flash Cookie都比所有常规cookie更危险 :-) - Arjan

5

优点:

  • Ogg/Theora/Vorbis对于链中的所有方都是免版税的(H.264主机的宽限期将在2015年底结束,编码和解码已经受到版税的影响)
  • 一旦不再需要IE回退,<video>将比Flash更容易
  • 无需插件监狱 - 浏览器供应商可以修复自己的错误
  • 与CSS效果集成
  • 与SVG效果集成
  • 与JavaScript集成
  • 可以在未经Adobe许可的情况下移植到任何平台
  • 用户可以轻松地将视频保存到磁盘中
  • 可以在聚合源中安全地工作(但软件尚未准备好)

缺点:

  • IE对于视频元素的支持必须等到IE9;当前的IE兼容Ogg回退渲染器依赖于Java,直到ActiveX解决方案或Silverlight解决方案完成
  • Safari需要XiphQT才能播放Ogg,因为Apple没有提供Theora。
  • 需要付版税的格式在iPhone上需要使用(但不比Flash更糟)
  • 不能在今天的每个桌面实现中全屏显示

Theora的问题实际上不是版税,而是专利流氓。一旦有深厚资金背景的大公司开始支持它,我们可以预料到肯定会有人被起诉。 - hannson
有人(MPEG-LA)因H.264收取版税。没有人为Theora收取版税。两者都容易受到迄今为止理论上的专利流氓的攻击。(考虑微软尽管已经获得了许可证,仍然因MP3而被起诉的情况。) - hsivonen
入门期已经推迟到了2016年。 - Kornel
修改了注释以反映最近的发展。 - hsivonen

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接