在桌面和移动端无障碍发布视频的方案整理

最新推荐文章于 2024-09-20 20:24:36 发布

甘蔗110

最新推荐文章于 2024-09-20 20:24:36 发布

阅读量1.8k

点赞数

分类专栏： html5&WebApp 编解码文章标签： html5 flash 浏览器 h.264 video javascript

html5&WebApp 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

编解码

5 篇文章 0 订阅

订阅专栏

HTML5在视频发布方面具有很大优势，但是由于不同浏览器支持不同视频编码，因此某个单一的视频现在是难以在所有主流浏览器中播放的。身兼开发人员、培训师、作者三职的Rich Shupe将在本文中阐述如何将HTML5和Flash Player联合起来使用，使得视频能够在最大范围内播放。

随着HTML5的引入，开发人员又获得了一个发布视频的新工具。除了占据统治地位的Flash Player——在联网计算机中有99%都安装了Flash Player——之外，HTML5也成为了视频领域的主要播放器。

然而，HTML5标准并没有严格规范视频发布的所有方面，因此视频格式之争就不可避免，这使得开发人员和内容发布者们备受其苦。这一篇文章及其后续一系列文章将会讨论这方面的问题，探讨在这多变的环境下如何选择方向。这第一篇将会讨论如何将HTML5和Flash Player联合起来使用，使得视频在发布时能在最大范围内发布，以及为了达到这个目标，需要如何创建video assets。

接下来的后续文章将会讲解如何选择编码软件，如何使用Javascript来获取众多浏览器配置，并作出相应调整，并看看当前最流行的Javascript video player哪个能真正帮助你解决问题。

什么是HTML5？

首先要强调的是HTML5还不是一个标准。它还在不断变化，这将给HTML5尝鲜者带来很大影响。HTML5标准草案制定始于2004年，制定者是一个名为Web Hypertext Application Technology Working Group (WHATWG)的组织，这个组织是一个行业联合会，其中包括了Apple、Mozilla Foundation以及Opera Software。后来，在2007年，Wide Web Consortium (W3C)将其作为一个工作草案加以采用。这个标准的Last Call（对HTML5标准的最后形式寻求同行以及公众的意见）是在2011年5月，尽管没有人期望它能带来一些突出的新特性，但它甚至连功能完善也算不上。专家估计W3C要到2014~2022年间才能批准该标准，具体是哪一年还没有定论（完全取决你听的是谁的预测和这个预测是什么时候做出的）。
一个有趣的事实是：尽管W3C现在使用HTML5作为这个标准的名字，WHATWG——这一HTML改革背后的主要推动力量——却希望在未来的工作中不使用编号命名。它希望坚持使用“HTML”，让它成为一个“活的标准”。

这一切意味着什么呢？在这一点上，这仅仅意味着HTML5早期尝鲜者需要准备好迎接改变，因为这个标准还在改变，这最后的改变可能还要经历好几年。很多HTML5特性现在已经可用了，很多专家都认为HTML5标准不会出现革命性的变化了。

问题在于，我们谈论的都是即将成为标准的HTML5，实现这一标准是另外一回事。不同浏览器，以及同一浏览器的不同版本，对HTML5特性的支持程度都不尽相同。这使得开发人员面临的问题更为复杂。下面是支持基本HTML5视频特性的浏览器以及移动操作系统：

IE	Firefox	Safari	Chrome	Opera	iOS	Android
9.0+	3.5+	3.1+	3.0+	10.5+	1.0+	2.0+

什么是HTML5视频？

从根本上讲，HTML5视频是一系列markup tags以及Javascript 文档对象模型的拓展。HTML5视频一个最简单的实现如下所示：

<video src=”vid.mp4″ width=”320″ height=”240″ controls></video>

在我们能更好使用这个markup之前，我们需要意识到，这段代码所呈现的仅仅是冰山一角。比这个markup更重要（同时也更复杂）的是其中引用的视频内容的格式。尽管“格式”这个词用途十分宽泛，但它最核心的含义还是视频和音频数据的压缩和解压缩算法，以及相应的可以解析并使用这些数据的container。简单来说，container就是一个对视频、音频以及相关内容的打包器，规定了用什么样的规则来存放媒体数据。

HTML5开发者面临的一个最大挑战就是现在的HTML5标准草案并没有推荐浏览器应该支持的视频格式。因此，各个浏览器背后的团队需要自己去决定什么视频格式是最适合的。这就导致了不同浏览器对于视频特性的不同实现，这成了内容发布者必须跨越的困难。实际上，为了在使用率最高的几个浏览器上均能发布HTML5视频，开发者要么为每个视频创建三个文件，要么依靠服务器解决方案，在播放时进行编码转换（将视频从一个格式转化到另外一个格式）。

HTML5 技术：多媒体 (视频及音频)

容器（Containers）

在这篇文章中，我们将会把讨论范围限定在与HTML5以及Flash兼容的容器中，并主要讨论这些容器的video以及audio部分。当然，这些容器还可以支持一些附加的特性，如字幕、分章信息（chapter information）、元数据，以及这些数据类型的同步方式。在某些情况下，容器还支持其他一些可选项，如数字权限管理（DRM），基本的3D渲染选项，以及硬件渲染支持。

HTML5或Flash支持的基本有四个容器。不同视频格式的优缺点在很大程度上与这些容器包含的视频或者音频特性相关（我一会儿会谈到这些），但是一些与具体容器相关的特性在这里也值得一提。

HTML5 以及 Flash 的video containers

MPEG-4

MPEG-4 (更精确地说是MPEG-4, Part 14)是由Moving Picture Experts Group控制的专有容器。.mp4文件拓展名已经为大家所熟知（有时候也用.m4v），MPEG-4无可争议成了知名度最高的容器。它植根于Apple的QuickTime容器（通常使用.mov扩展名），是桌面端以及移动设备播放视频的最常见的选择。它是iTunes Mac/Windows/iPhone/iPad/iTouch生态系统使用的容器。然而，由于专利及授权问题，这样的状况正在逐渐改变，而HTML5正在加速这个改变。作为一个容器，MPEG-4以支持数字权限管理而出名——数字权限管理对于一些内容发布者来说是必需的特性，另外，因为硬件加速（基于芯片的，在运行时进行编码或解码）大都支持该格式，这使得它更受欢迎。除了和HTML5规范相容，Flash Player也支持MPEG-4容器。

Ogg

Ogg是一个免费的开放的容器格式，它是由 Xiph.Org Foundation维护的。尽管Xiph.Org Foundation推荐使用.ogv文件扩展名，但.ogg更为常见。Ogg最初是在Linux OS中使用的，同时也被Mac以及Windows操作系统中的QuickTime组件所支持。Window OS还可以使用Windows Media Player扩展组件或者DirectShow过滤器来播放Ogg内容。

WebM

Google最近引入了WebM容器用来发布免费的开放的音频视频内容。它使用.webm文件扩展名，它是基于Matroska容器之上的。现在，硬件加速以及可以支持WebMaster文件了，并且据Adobe称， Flash Player未来的版本也会支持WebM容器。

Flash Video

Flash Video容器使用了两个容器。FLV是较老的专有格式，支持version 7（2003年引入）以下的Flash Player。Flash Player version 9 update 3可以支持F4V格式（F4V格式是基于MPEG-4的）。（在前面已经提到过了，当使用version 9 update 3及以上版本时，有效的MPEG-4容器是可以被支持的。）

Flash Player并不依赖于文件扩展名来播放兼容的视频文件，但针对这两个容器通常分别使用.flv以及.f4v扩展名。（F4V格式还包括针对受保护视频的.f4p扩展名。）Flash Player10.2及以上版本支持对Flash Video的硬件加速。

容器的主要任务是将视频和音频内容结合到一起。如何操作属性是编码器（codecs）的任务。

视频编码

视频编码是对视频文件进行编码和解码的算法。软件以及硬件制造商（比如浏览器以及移动设备背后的公司）需要决定使用什么容器和视频编码格式，以便来支持HTML5以及Flash Video这样的技术。用什么容器和视频编码格式取决于视频质量、文件大小、带宽等类似的因素。

其中有一大因素是专利权以及授权证书费用的影响，另外还有一个因素是人们对免费开放的视频编码的需求，种种原因导致了现在开发者所面临的视频格式间的分歧。现在有很多视频编码，但是在这里，我们将集中于四种用于HTML5以及Flash发布的主要的视频编码：H.264, Theora, VP8,以及VP6。H.264以及VP6是有着严格受限的专利的编码，需要收取授权费用，而Theora和VP8则是免费的。

选择HTML5或者Flash支持的视频编码

H.264

也被称为MPEG-4 Part 10或者高级视频编码（Advanced Video Coding，AVC）。H.264是由MPEG开发的，并在2003年成为标准。这是一个质量很高的编码格式，对于不同带宽和不同CPU均有较好表现，从手机到蓝光播放器，也有很好表现。它的标准中包括”profiles”，其值从Baseline 到 High不等，表示不同质量以及可选特性。它还有一种动态特性，可以让文件根据不同播放条件调整视频质量。它拥有软件及硬件加速支持，并在各类设备中广泛使用，从移动设备到高分辨率视频、DVD等。H.264是MPEG-4容器的一部分，在Flash Video中也应用广泛，也是F4V容器的一部分。

Theora

Theora是一个免费开放的视频编码格式。其他的容器可以使用Theora作为视频编码，该编码通常和Ogg格式联系起来。On2技术是Theora的前身，就跟VP3一样。在On2公开发布VP3以后，Theora在VP3的基础上演变而来，现在，该视频编码格式是由Xiph.Org Foundation进行维护的。它需要授权协议，但是不受专利所阻，不像之前VP3还有专利限制，执行免费增值的模式。Theora原本是为Linux而开发的，但是也受到Mac以及Windows操作系统的支持（通过一些开源的编码器/解码器）。

VP8

也是通过On2技术开发的。VP8 编码格式以它的高质量视频、低复杂度解码而出名，它有着和H.264 High profile一样的视频质量，但其解码复杂度和H.264 Baseline profile一样。Google从On2那里收购了VP8，将其作为WebM container的视频编码格式。Google承诺说将不会再执行与之相关的专利条款，而让VP8成为免税的，这使得VP8成为H.264一个很具吸引力的替代选择。它通常是由软件编码和解码来支持，但也有使用硬件加速的，并且硬件加速还在发展。

VP6

VP6是在FLV Flash Video Format中最为常用的编码格式。它拥有高质量视频，还有很吸引人的特性——支持alpha通道。VP6也是由On2技术开发的。VP6从属于Macromedia (当然也就从属于Adobe)，VP6受到专利和授权许可的保护。因为这一点，另外还因为该编码格式的视频需要Flash Player才能播放，使得FLV Flash Video Format对于开发人员来说，并不是一个很受欢迎的长期解决方案。但是，在某些特定的场合——特别是需要用到alpha通道的时候，开发人员还是会选择该格式。

音频编码

和视频编码一样，音频编码也有很多种，但我们主要会讨论的是AAC, Vorbis以及MP3，因为它们是在HTML5以及Flash video assets中应用最广泛的。

选择HTML5或者Flash支持的音频编码

AAC

高级音频编码（Advanced Audio Coding ，AAC）被设计为Mp3格式的可能替代者。在相同的比特率(码率)下，它有比MP3更好的质量。此外，人们可以使用任何比特率(码率)编码AAC文件，而MP3编码却要在某几种特定的码率下。AAC是用在MPEG-4容器中的音频编码格式之一，也是该容器中最常用于处理HTML5兼容性的音频编码。该格式支持数字权限管理，但是却受到专利及授权的限制。它一般是通过软件解码，但是也存在硬件解码。

Vorbis

Vorbis通常是用在Ogg容器中，但也可以用于MP4, WebM以及其他格式。在广泛应用于Flash和HTML5的音频编码格式中，这是唯一一个免费开放的编码格式，不受专利限制。事实上，Vorbis的开发正开始于MP3格式开始收授权费用之时。与MP3以及ACC相比，Vorbis有更好地音频质量，而文件体积更小，并且，在游戏产业中很受欢迎。这个格式最初是用于Linux 以及 Android上的，但同时也受到Mac以及Windows操作系统的支持（通过QuickTime Components 以及 DirectShow filters，以及一些dedicated software players）。

MP3

你一定知道MP3格式的。这几乎是移动数字音频设备的标准来，并且也被FLV Flash Video格式采用。它受专利保护，需要收取授权费用，并且需要使用某几种特定的编码格式编码。

容器/编码格式与浏览器的兼容性

就如你所看到的那样，即使只是对视频编码格式和音频编码格式的一个简单浏览，并简单看了一下可以用于HTML5和Flash video的HTML5和Flash video的容器，就花了一些时间，还需要集中注意力才能完全理解。然而，这时间花得还是值得的，因为如果你想要在更大范围内发布你的视频内容，你就必须了解这些内容。为什么呢？因为在前面简短提到的各种格式中，没有一种格式是可以被各主流浏览器以及移动操作系统支持的。

因此，一切仿佛回到了1997年初，那时候开发人员的一大工作就是处理浏览器和操作系统间的不一致。下面这张表简单描述了视频格式（容器，视频编码以及音频编码）和主流桌面浏览器以及移动操作系统间的兼容性。

Container/Codec	IE	Firefox	Safari	Chrome	Opera	iOS	Android
Ogg: Theora/Vorbis	*	3.5+	*	3.0+	10.5+
MP4: H.264/AAC	9.0+		3.1+	3.0 – 11.0 †		3.0+	2.0+
WebM: VP8/Vorbis	*	4.0+	*	6.0+	10.6+		2.3.3+ local, 4.0+ streaming

这张表中有几点是值得注意的。首先，空格表示不支持，非空表格表示支持的视频格式的版本。（星号表示可以通过第三方软件如插件提供支持）

其次，尽管Chrome在现在是支持所有三种视频格式的，但是将来这种状况可能会发生改变。Google发布声明说，在Chrome发布version 11.0的时候，将不再支持H.264编码——这预示着HTML5领域将发生很大改变——尽管这个决定似乎推迟了。

最后，没有一种格式受到所有浏览器的支持。在现代浏览器中，可以使用联合使用MPEG-4以及WebM，以覆盖所有HTML5用户。然后，如果一个用户用的是version 3.6 的Firefox，只有Ogg视频才能满足要求。

更进一步，如果一个用户还没有将他惯用的浏览器升级到和HTML5兼容的版本，那么，使用Flash Player播放视频则是更好的选择。结果，为了让一个视频覆盖面更广，我们需要将这个视频做成三个甚至更多版本。

但有意思的事情还不止于此。除了一些策略上的决定，比如Google放弃对H.264的支持，其他一些因素，如bugs，个体差异以及各平台间一致性的缺乏，使得即使是同一个浏览器或者操作系统，对视频的处理方式也不尽相同。在这篇文章的后面还会谈到其中的一些议题，但是，总而言之，想要成功将视频发布到不同平台还是需要做些规划，并需要一些基础。因此，我们将会去探究我们之前所简要介绍的HTML5 markup的一个升级版本。通过了解HTML5视频的<source> tag，并注意已经存在的一些问题，就能有效处理前面所说的问题了。

升级后的HTML5 markup

HTML5视频标记的第一个版本看起来是下面这样的：

<video src=”vid.mp4″ width=”320″ height=”240″ controls></video>

这里关键的问题是视频资源是通过<video> tag的src属性定义的。这使得<video>元素只能有一个来源。因为没有哪种视频格式是通用的，所以不推荐使用这种方法。

然而，如果你忽略掉src属性，然后添加HTML5的<source> tags，如下所示，那么浏览器就会首先匹配第一个视频来源，如果不支持，就会继续向下匹配。

<video width=”320″ height=”240″ poster=”vid.png” controls>
<source src=”vid.webm” type=’video/webm; codecs=”vp8, vorbis”‘>
<source src=”vid.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>
<source src=”vid.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>
</video>

HTML5视频标记的这第二个版本是非常简单的。它在最初定义了一个320 x 240像素的HTML5视频元素，添加了一个可选的poster属性，以便在视频播放之前能显示一个静止画面（在有些浏览器中，是在视频加载之前显示这个静止画面），并展现浏览器提供的播放控制按钮。如果没有最后这个属性的话，可以让开发者使用Javascript创建自己的控制按钮。在这篇文章的后续文章中，我们将会讲解这个具体过程。

Video元素还另外一些属性，如下所示：

preload: 指明需要预加载多少视频资源。选项包括none,metadata (用于获取dimensions, duration, first frame, 等数据)以及auto 让浏览器加载尽可能多的视频资源)
autoplay: 一个布尔值，决定是否一加载视频就播放视频。
audio: 指明初始音频状态（现在只支持muted）
loop: 一个布尔值，决定在视频播放一遍以后是否再从头开始播放

在上面实例代码中的第一个source tag中，是一个WebM视频文件。如果这个文件不支持，则使用MPEG-4文件。如果也不支持MPEG-4文件，则使用Ogg视频文件。在各种情况中，type属性指明了播放所需要的容器类型以及编码标准。

潜藏的问题

如果你想要定位更广范围内的观众，你可能会遇到一些问题。幸运地是，这些问题的解决方案是非常简单的：

首先，确认你的服务器支持你所需要播放的各种视频的格式。一个简单的方法是创建一个.htaccess文件，将这个文件放在和你的HTML文件相同的目录下，并使用 AddType指令，添加所需要的媒体类型：

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

iOS 3.x 不支持poster属性。要将其从<video> tag中去掉。
在iPad iOS 3.x上，如果不将mp4 <source>列在第一个，则视频不会播放。
低于2.3的Android版本不支持type属性。要将其从MP4 source tag中去掉（在Android上只支持MP4容器）。

因此，为了克服HMTL5发布视频的一些问题，让视频在老版本的iOS以及Android上也能播放，要使用HTML5 markup第四个版本。要注意，在这个版本中去掉了video元素的poster属性，并将MP4 source列在第一个，MP4 source后的type属性也去掉了。

<video width=”320″ height=”240″ controls>
<source src=”vid.mp4″>
<source src=”vid.webm” type=’video/webm; codecs=”vp8, vorbis”‘>
<source src=”vid.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>
</video>

现在，我们已经做完了所有工作，让视频能在更大范围内播放。但是，面对和HTML5不兼容的浏览器，我们该如何做呢？

Flash视频整合

尽管Flash Player的宣传有些过分，但它仍不失为一个广为使用的令人印象深刻的好产品。在很多情况下，你需要使用Flash Player video delivery来支持某些特性。我将会在本文的后续部分阐述这些特性。更重要的是，HMTL5在大多数情况下是无法使用的，它远不如Flash Player那样具有渗透力。

在NetMarketShare中一份关于桌面浏览器版本的统计数据中，现在使用的浏览器中，有将近50%的浏览器是和HTML5不兼容的。这将会随着用户逐步升级他们的浏览器而改变，并且移动市场也会使得HTML5视频发布逐渐成为必须。但是，在现在，忽略Flash Player无疑就意味着放弃了很大一部分观众。幸运的是，在需要的时候，你仍然可以对你的页面进行编码，以发布Flash内容——不管你是从HTML5转到这里还是直接就选用了Flash，并在需要的时候再换到HTML5。

回归Flash

同时使用HTML5和Flash Player来发布视频最简单的方法就是利用浏览器解析HTML的方式。你可以回忆一下，当使用<video>以及<source>标签的时候，一个和HTML5兼容的浏览器会遍历所有资源，直到找到一个兼容的视频格式未知。如果一个浏览器不支持这些HTML5 <video>元素，这些标签就会被忽略，但这种过程可以以某种方式继续。

即，可以在HTML5资源列表后加上一个Flash video player object，这意味着和HTML5兼容的浏览器一定可以找到需要的资源，而其他浏览器则使用Flash Player播放视频。（这当然是建立在安装了Flash Player的假设的基础上。）这种方法通过Kroc Camen’s Video for Everybody technique得以普及，并受到欢迎，因为这种技术不需要Javascript或者复杂的编码。

标记的最后一个例子。这个非常简单的例子使用了Adobe开发的 Open Source Media Framework Strobe player作为Flash视频的播放器。

<video width=”320″ height=”240″ controls>
<source src=”vid.mp4″>
<source src=”vid.webm” type=’video/webm; codecs=”vp8, vorbis”‘>
<source src=”vid.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>
<object width=”320″ height=”240″>
<param name=”movie” value=”StrobeMediaPlayback.swf”>
<param name=”flashvars” value=”src=http://yourdomain.com/vid.mp4″>
<param name=”allowFullScreen” value=”true”>
</object>
</video>

这就是所需要的一切。正如你所看的那样，HTML5标记列出了上面所讨论过的视频格式，并在这些视频格式都不支持时，最终落到Flash Player上。

回到HTML5

如果你想要优先使用Flash Player，在其不被支持的时候再使用HTML5——也许你是想要提供某种特殊性能，或者是希望有更为一致的播放器控制——你可以使用Javascript来完成这个任务。

下面这个简单的例子采用了 SWFObject JavaScript library来完成了任务。它不仅会检测Flash Player是否存在，还会检测是否使用满足最低要求的版本。如果发现了一个Flash Player的兼容版本，SWFObject将会替换掉特定<div>中的内容，嵌入Flash Player。如果没有发现兼容版本，SWFObject将不会有任何动作，而是让<div>中的HTML5代码完成工作。

<script type=”text/javascript” src=”swfobject.js”></script>
<script type=”text/javascript”>
var flashvars = {};
var params = {};
var attributes = {};
flashvars.src = ”http://yourdomain.com/vid.mp4″;
swfobject.embedSWF(“StrobeMediaPlayback.swf”, ”flashcontent”, ”320″, ”240″,”10.0.0″, false, flashvars, params, attributes);
</script>
<body>
<div id=”flashcontent”>
<video width=”320″ height=”240″ controls>
<source src=”vid.mp4″>
<source src=”vid.webm” type=’video/webm; codecs=”vp8, vorbis”‘>
<source src=”vid.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>
</video>
</div>
</body>