如何使用HTML5嵌入视频

最新推荐文章于 2024-10-05 08:47:02 发布

iteye_5904

最新推荐文章于 2024-10-05 08:47:02 发布

阅读量4.7k

点赞数 2

分类专栏： Div / Css / XML / HTML5 文章标签： javascript 操作系统嵌入式 ViewUI

本文链接：https://blog.csdn.net/iteye_5904/article/details/82568536

版权

Div / Css / XML / HTML5 专栏收录该内容

177 篇文章 1 订阅

订阅专栏

如何使用 HTML5 语法在 Web 页面中嵌入视频呢？非常简单：

<video id="sampleMovie" src="HTML5Sample.mov" controls></video>

就是这些！这就是向网站添加视频播放器所需的全部工作，无需任何第三方插件或嵌入其他网站的代码，只要一个简单的标记即可。

实际情况可没有这么简单。

HTML5 的复杂性与语法无关，而是源自浏览器支持和视频编码。Web 开发人员习惯了纠结于浏览器的兼容性，但浏览器制造商在编解码器标准方面的分歧更让人头疼。为了构建一个成功的 HTML5 网站，您需要考虑 Chrome 4、Firefox 4 和 Internet Explorer 之类的现代浏览器如何实现 HTML5 视频 Web 标准，以及如何处理用户在旧版浏览器中查看视频的情况。

限制和好处

首先，要设定期望值，您应该知道播放视频时 HTML5 的限制。

HTML5 规范中目前还没有包括全屏播放。目前只有几个浏览器（不是全部）支持全屏播放。

默认的播放器菜单都是非常基础的，而在品牌认知的皮肤或复杂的观感上可能花了很多开发精力。除此之外，不同的浏览器仍以不同的方式实现 HTML5 和 CSS。例如，添加圆角时，您的视频播放器在 IE 和 Firefox中看起来可能是圆角，但在 Chrome 和 Safari 中还是方的。

规范不允许平滑或自适应流，而这是一个正规视频播放网站的基本功能。

更重要的是，规范并不（而且显然不会）包括数字版权管理 (DRM)。这意味着永远不会通过 HTML5 传递受版权保护的内容（至少版权持有人不会）。

当然还有编解码器的问题。稍后将提供此主题的更多信息。

您放弃这些东西后得到了什么？实际上，得到的不多。

首先，不专注于视频的网站其开发人员可以更加容易地实现网站流媒体，而无需通过第三方视频网站，如YouTube 或 Vimeo 等。以前，开发人员直接嵌入视频有三种主要的选择：

嵌入必须完整下载后才能播放的非流媒体文件
购买第三方插件（这不一定适用于所有浏览器）
使用专用的媒体服务器，这是一个非常昂贵且/或对于大部分网站而言太过复杂的解决方案

HTML5 允许开发人员在无需其他第三方软件支持的可更换皮肤播放器中实现流媒体，从而缓解了这些问题。

第二，HTML5 规范允许开发人员为已有定论的平台提供视频，如iOS 产品（iPhone、iPad）。但看待这个问题的方式有点不同，它使开发人员从限制或控制如何交付媒体的专有交付平台中解放出来。毕竟，这是开放标准的目的所在。

最后，HTML5 不是外来的技术，它是HTML 的最新修订版。这意味着 JavaScript 和 CSS 能够与它很好地协作。与现有的 HTML 源代码一样，开发人员可以在客户端或服务器端操作这些代码。

视频编解码器

前文已经提到，HTML5 视频最大的挑战是在多个编码解码器中准备和纳入您的内容。目前，每个浏览器有其自己的首选视频格式。非无缝实现的 HTML5 视频将会变得更糟。

现在视频编码有三种选择：

H.264 – 一种可以利用硬件加速的流行格式，由桌面和设备的图形芯片提供支持；也是市场上许多较新的视频和移动设备的默认录制格式；但是，该格式是有专利的，虽然对非商业用途仍然免费，但它很复杂，也比较昂贵。请参考此文档了解更详细信息。何时进行商业内容分发。支持：IE 9、Safari 3.1 和 Chrome（目前）
Ogg Theora – 一个开放标准，没有专利问题，是免费的。支持：Firefox 3.5、Chrome 4、Opera 10.5。
VP8 (WebM) – 一个较新的标准，最近被 Google 收购，并作为一个开源发布，免费（但仍有专利）的格式。支持：Firefox 4.0、Chrome 6.0、Opera 10.6。

下图可让您更容易了解此内容：

各浏览器对HTML5视频解码的支持情况

图 1.1

Chrome 值得特别一提，因为 Google 实际将删除对三种 HTML5 视频格式之一的支持。收购 On2（WebM 格式的开发商和赞助商）后，Google 宣布以后的 Chrome 的版本将不再支持 H.264。他们已经根据 BSD 许可证发布了 WebM，授予全球用户免费、非独占的、免版税的专利许可。虽然 Chrome 是目前唯一支持所有三种格式的浏览器，但市场将会很快分成两个 OS 默认的浏览器阵营，只支持 H.264 的 Internet Explorer和 Safari，以及支持除 H.264 外其他标准的所有其他浏览器。

严重警告：为了简化此处的讨论，本说明不深入探讨三种基本格式之间的差异。一旦涉及视频和音频配置文件的不同可能性，以及视频和音频容器和编解码器之间的区别，事情会变得更加复杂。例如，虽然 iPhone 4 用 H.264 格式录制视频，但不能将该视频直接放到 HTML5 网站；必须先通过转换器运行它。

最好能有一个无所不包的公告，说明视频标准X 是普遍支持的，应该作为HTML5 视频的首选格式。不幸的是，正如您从上文看到的，情况并非如此。如果您包括用户驱动的浏览器扩展，那么支持最广泛的格式就是 Ogg Theora。但是，你不能假定用户，特别是公司工作场所中的用户，只是为了观看 HTML5 视频就拥有安装其他视频编解码器或浏览器扩展的知识或能力。如果出于某种原因，您必须选择某一个视频编解码器，应该选择哪一个？这不一定。考虑以下选择：

H.264

在这三个标准中，H.264 最具人气，质量可靠，受到了媒体专业人士的认可。它还受到一些业内最大公司的支持，包括Microsoft 和苹果，具有MPEG LA 的授权。因此也有个最主要的问题：H.264 不是免费的。

对于消费者来说，它当然是免费的。大部分开发人员都不用担心授权问题（目前）。但是，视频分发网站就不一定了。H.264 专利授权的来龙去脉超出了本文的范围（而且很容易让人糊涂），只要说大家有很多问题就够了。

对于大多数开发人员，专利问题将很大程度上归结于开放标准和图像质量之间的哲学争论。与 Ogg（参见下文）和VP8 (WebM) 相比，H.264 提供了更高的图像质量和更好的媒体流。由于包括 PC 和移动设备等多种平台上都具有硬件加速功能，它还具备性能优势。

最后，考虑易生产性，这不是一个无关紧要的问题。所有主要的视频编辑器，包括 Final Cut、Adobe Premiere 和 Avid，都导出为 H.264 格式。Ogg Theora 或 VP8 则不行。如果您的商店生产自己的视频，并且数量众多，那么仅使用 H.264 将节省很多工作。

Ogg Theora

Ogg 是唯一一个真正没有专利负担的标准。但是，也可以说是质量最低的标准，虽然相差其实不多。与H.264 的多次短兵相接发现，H.264 仍占上风。虽然 Ogg 可将内容编码为更紧凑的文件，但它产生的图像品质比 H.264 的要低，并且在媒体流能力上会更差。

VP8 (WebM)

在高质量但存在专利问题 (H.264) 和质量较差但免费 (Ogg) 这两个极端之间，VP8 占有一席之地，它可能三个标准中最具争议的一个。到目前为止，测试表明 H.264 提供的视频品质比 VP8 略高，但这种差异在大多数商业活动中可以忽略不计。

更大的问题在于开放标准。一方认为，Google 远离了 H.264 转而支持其“开放”WebM 标准，甚至在 Creative Commons 许可证下发布了 WebM。另一方面，有很多人争论说，在这种情况下，“开放”可能不是真正意义上的“开放”。以 JPEG 诉讼为例，Microsoft 指出，即使 WebM 不会出现 Google 引起的专利问题，如果没有 Google 明确的用户免责申明，许多公司和个人部署 WebM 视频时，都有可能让自己面临 MPEG LA 的专利侵权诉讼。

总之，在大多数情况下，没有一种办法能满足所有情况下所有项目的需要。但对于大多数情况下的大多数项目，您可能都希望使用 H.264。它不仅仅是生产和消费端使用最广泛的格式，而且由于硬件加速而具有明显的性能优势。对于商业的视频网站，为了开拓新市场，可能必须咬紧牙关支付庞大的许可费。

但是，这场辩论往往由于一个主要因素而无果而终：现在或在不久的将来，所有浏览器是否都支持 HTML5。但是，并非所有浏览器都支持所有编解码器。就像您不会编写在 IE 中看起来不错，但在 Firefox 中一团糟的样式表一样，您希望创建跨平台兼容的视频标签。

视频转换器

对于开发人员，这意味着在实际情况下需要将视频内容至少编码为两种视频格式（最好是三个）才能符合 HTML5 规范的要求。幸运的是，有几个工具随时可以帮助您完成此任务。

Miro Video Converter：您的主要工具，此开放源代码转换器有 Mac 和 Windows 版本，可以将几乎所有视频源转换为所有可能要使用的 HTML5 格式，以及几个其他设备和平台特定的格式。

Handbrake：另一种用于 Mac 和 Windows（和 Linux）的开放源代码转换器，Handbrake 是专门转换为 H.264 的出色工具。

MPEG Streamclip ()：MPEG Streamclip 虽然是不开放源代码，但Mac 和 Windows 用户可以免费使用。它也处理 lH.264，同时它也可以转换为 HTML5 规范之外的许多其他有用格式。

Firefogg：一种专业工具，Firefogg 是一个 Firefox 扩展，只能将视频转换为 Ogg 的格式，并因此得名。要使用它，需要先下载 Firefox，然后再安装扩展。

<video>标记

您应该会记得，HTML5 在嵌入视频时本质上归结为使用一个标记：<video>。但正如其他 HTML 标记一样，有很多参数选项。以下是标记本身中的一些要点：

src：视频源的位置和名称，它的工作原理与 <img> 标记的 src 参数相同。但是要注意，在这里不是识别视频源，您可以并且也应该在标记外部识别（参见下文）。

<video id="sampleMovie" src="HTML5Sample.mov"></video>

width和height：（可选）视频的尺寸。更准确地说，这是视频帧宽度和高度，而不是视频本身。与 <img> 相似，省去此选项将导致浏览器使用视频源的默认尺寸。但是与 <img> 不同的是，使用与源不同的大小将缩放视频，而不是扭曲它。换句话说，嵌入的视频将保留其源的比率。如果您指定的大小小于源，整个视频将会缩小。但是，如果您指定的大小大于源，视频将以其原始大小显示，所指定尺寸的其余部分将使用空白区域填充。

<video id="sampleMovie" src="HTML5Sample.mov" width=”640” height=”360”></video>

controls：添加默认视频控件覆盖。如果您不想创建自己的自定义控件，这是非常有用的。但是，如果想深入研究自定义播放器控件，可以使用 JavaScript 和 CSS。该规范允许操作 play ()、pause()、currentTime、volume、muted 等方法和属性。

<video id="sampleMovie" src="HTML5Sample.mov" controls></video>

preload：只要用户点击页面就开始下载视频。要指示预加载视频，只需包括该属性。要指示其不预加载，将该属性设置为等于"none"。

<video id="sampleMovie" src="HTML5Sample.mov" preload></video>
<video id="sampleMovie" src="HTML5Sample.mov" preload=”none”></video>

autoplay：流氓参数。该参数指示浏览器加载页面时就播放视频。不要使用它。

<video id="sampleMovie" src="HTML5Sample.mov" autoplay></video>

接下来是见证奇迹的时刻。HTML5 规范包括一个方便的古怪功能，可以弥补当前围绕视频格式所发生的浏览器功能障碍。不使用 src 属性指定视频源，您可以在<video> 标记中嵌套多个标记，每个都有不同的视频源。浏览器将自动浏览列表并选择第一个能够播放的视频。例如：

<video id="sampleMovie" width="640" height="360" preload controls>
<source src="HTML5Sample_H264.mov" />
<source src="HTML5Sample_Ogg.ogv" />
<source src="HTML5Sample_WebM.webm" />
</video>

如果在 Chrome 中测试该代码，将获得 H.264 视频。但是在 Firefox 中运行它，会在相同的地方看到 Ogg 视频。

理想情况下，虽然不是所有浏览器都绝对需要，您应该在 type 参数中包括 MIME 类型，确保与所有的浏览器兼容。此参数应指定视频类型，以及视频和音频编解码器。参数的细节取决于视频的编码方式。在这里可以找到很多可能的方案：http://wiki.whatwg.org/wiki/Video_type_parameters。

<video id="sampleMovie" width="640" height="360" preload controls>
<source src="HTML5Sample_H264.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="HTML5Sample_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="HTML5Sample_WebM.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>

有关正在使用的所有三种视频类型的示例，请访问我的站点。

在此页面上，您会看到三个不同视频的源代码：H.264、Ogg 和 WebPM。视频本身标有它们的编解码器，以便您查看浏览器中显示的内容。

关于 MIME 类型的一个小窍门：您的服务器需要配置为可识别各种类型。对于 Windows Server，这意味着将不同的 MIME 类型项添加到 IIS。对于 Apache 服务器，您需要将 AddType 指令添加到 httpd.conf 或本地 .htaccess 文件中：

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

优雅降级

虽然完整的多源 <video> 标记可在多个 HTML5 就绪的浏览器上工作，但它仍然没有解决旧的、HTML5 之前的浏览器问题。幸运的是，该规范包括一个向下兼容机制。

将目前正在使用的任何<object> 标记，或者将使用的 HTML5 之前的标记，添加到 <source> 参数列表的底部。通常情况下，此对象将指定您使用的播放器（假定是第三方插件），以及该播放器的参数和源。下例使用流行的免费第三方播放器 Flowplayer。

<video id="sampleMovie" width="640" height="360" preload controls>
<source src="HTML5Sample_H264.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="HTML5Sample_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="HTML5Sample_WebM.webm" type='video/webm; codecs="vp8, vorbis"' />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashvars" value='config={"clip":{"url":"HTML5Sample_flv.flv","autoPlay":false,"autoBuffering":true}}' />
</object>
</video>

这篇精彩文章更详细地解释了这一点：Kroc Camen “Video for Everybody"。您还可以从这里查找包含所有三种视频格式和 flash 对象的代码生成器：Jonathan Neal 的 “Video for Everybody Generator”。

资源

查看以下内容，了解HTML5 视频的更多信息，包括特定编解码器的复杂性：