HTML5-媒体入门手册-全-
HTML5 媒体入门手册(全)
零、前言
当谈到互联网时,变化的速度既惊人又势不可挡。说到这本书的主题,尤其如此。
2003 年,Tom 在西雅图准备在 Digital Design World 上做一个关于 Flash Video 的演示,当时会议组织者 Jim Heid 看到了演示的标题幻灯片,并提到他可能会面对一群相当难缠的人。汤姆看着观众,打量着他们,告诉吉姆他会掩护他的。吉姆说他对此不太确定,并指着汤姆屏幕上的标题:“QuickTime 已死。”向黑暗的房间望去,汤姆看到大约 400 名观众打开了他们的 Powerbooks 数百个明亮的白色苹果商标回瞪着他。这的确会是一群难缠的人。
没有人真正预料到苹果、微软和 Real 在 2003 年对网络流媒体市场的垄断会被打破。然而,到了 2005 年春天,就在那次演讲后的 18 个月,这正是所发生的事情。这三种网络视频传输技术实际上已经消失,几乎完全被 Flash 视频所取代。这并不是说 QuickTime 和 Windows Media 是过时的技术。但是当把视频放到网上时,Flash Player,部分归功于 YouTube,成为了唯一的游戏。
两年后,当 iPhone 出现时,Flash 作为一个视频交付平台,失去了对视频和音频内容交付的控制。事实上,当苹果在 2011 年禁止其设备使用 Flash 时,Flash 基本上就消失了。就在那时,市场将注意力转向了 HTML 5 编码和播放解决方案。有了“无处不在”的单一标准,人们会认为尘埃落定。不完全是。
西维亚在本书第一版序言中的开头几段写于 2010 年,至今仍能引起共鸣:
具有讽刺意味的是,我开始写这本书的那一天,正好是最后一个大浏览器宣布将支持 HTML5 和 HTML5 视频的那一天。2010 年 3 月 16 日,微软加入了 Firefox、Opera、Google Chrome 和 WebKit/Safari 的行列,宣布 Internet Explorer 9 将支持 HTML5 和 HTML5 视频元素。就在这本书完成的前几周,IE9 测试版也发布了,所以我能够将 IE9 行为纳入书中,使它对你更有价值。
在撰写本书的过程中,发布了更多的公告,并在所有浏览器中引入了许多新功能。"
当我们阅读这本书时,我们发现自西尔维娅的序言以来,事情并没有太大的变化。当我们写这本书的时候,浏览器引入了新的特性和更新。微软宣布对 Internet Explorer 进行改进。浏览器使用的视频和音频格式开始围绕单一格式发展。第三方视频流媒体服务已经出现。音频和视频内容的直播和移动传送变得越来越重要。超高清 4K 视频流开始出现。就这样…
可以理解的是,浏览器和技术在不断发展,今天不适用的可能明天就适用。当您开始使用 HTML5 视频时,特别是当您开始使用它开发自己的网站时,我们建议您检查所有相关浏览器的实际当前实现状态,以支持您想要的功能。
走近这本书
这本书是为任何对使用 HTML5 媒体元素感兴趣的人写的。它假设您已经有编写基本 HTML、CSS 和 JavaScript 的背景,但是很少或没有媒体方面的经验。
如果你是一个初学者,只是想学习如何在你的网页中包含视频的基本知识,那么的前三章就足够了。您将学习如何为 web 编码音频和视频,如何在 HTML 中创建跨浏览器兼容的标记以将音频和视频包含到您的 web 页面中,以及如何将 JavaScript API 用于媒体元素。这将允许您用自己的控件替换 web 浏览器的默认控件:“换肤”您的媒体播放器。您还将学习如何在 CSS 中设计音频和视频元素的显示样式,使它们在您的站点中脱颖而出。
剩下的三章是关于媒体内容的更深入的应用。我们从媒体元素的可访问性和国际化开始,包括标题、字幕和音频描述。然后,我们将向您介绍如何通过 Canvas 和 Web Audio API 操作视频和音频内容。您将学习如何在 JavaScript 中播放绿色屏幕,或者让您的音乐听起来像在大教堂里一样,以及许多其他令人惊叹的效果。
注释
在书中,我们经常提到 HTML 元素和 HTML 元素属性。元素名写成
下载代码
本书中使用的例子的源代码可以在http://www.html5videoguide.net
和www.apress.com/9781484204610
向读者提供。
联系作者
请通过silviapfeiffer1@gmail.com
或tomgreen17@gmail.com
联系作者
也可以通过 Twitter 联系我们:@silviapfeiffe
r 或@TomGreen
西尔维亚的博客:http://gingertech.net
汤姆的 YouTube 频道:https://www.youtube.com/channel/UCCjDB7XASezB9lERBF1qwbA
一、编码视频
为 HTML5 编码视频的“艺术”在许多方面是一种“黑色艺术”。除了文件格式之外,没有其他标准,从数据速率到音频的其他一切都留给您的最佳判断。因此,你在创建 MPEG4、WebM 和 Ogg 文件时所做的决定是“主观的”而不是“客观的”在播放 HTML5 中的视频和音频内容之前,您需要清楚地了解这些文件是如何创建的,以及您需要做出哪些决定来确保流畅播放。这个过程始于一个相当不和谐的启示:视频不是视频。用来识别视频和音频文件的扩展更像是鞋盒。文件格式——MPEG4、WebM 和 Ogg——是盒子上的名字,盒子里面是视频轨道和音频轨道。带有文件格式标签的盒子称为“容器”
在本章中,您将了解以下内容:
- 容器和编解码器的重要性。
- 用于编码 HTML5 使用的音频和视频文件的音频和视频编解码器。
- 如何使用 Miro 视频转换器创建
.mp4
、.webm
和.ogv
文件。 - 如何使用 Firefogg 扩展创建
.webm
和.ogv
文件? - 如何使用 Adobe Media Encoder 创建一个
.mp4
文件? - FFmpeg 用来对 HTML5 使用的各种音频和视频格式进行编码的命令。
容器
虽然你可能认为视频文件是一个.mp4
文件,但实际上,它只不过是一种容器格式。它所做的是定义如何存储容器中的内容,而不是在容器中存储什么类型的数据。这是一个需要理解的关键区别。
如果你能够打开标有 MPEG4 的盒子,你会看到一个视频轨道(没有音频),加上一个或多个音频轨道(没有视频),这正是你在视频编辑器中编辑视频文件时所看到的,如图图 1-1 所示。这些轨迹通常是相互关联的。例如,音频轨道将包含允许它与视频轨道同步的标记。轨道通常包含元数据,例如视频轨道的图像的纵横比或音频轨道中使用的语言。封装轨道的容器还可以保存元数据,如视频作品的标题、文件的封面、导航的章节列表等。
图 1-1 。您可以在视频编辑器中查看视频和音频轨道
此外,视频文件可能包含文本轨道,如字幕或副标题,或包含节目信息的轨道,或包含小缩略图的轨道,以帮助用户在使用快进到慢进控制时找到视频中的特定点。我们称这些轨道为“定时元数据”,稍后会谈到它们。现在,我们将专注于创建包含视频和音频轨道的视频文件。
与视频文件类似,音频文件也由一个容器组成,其中包含内容轨道。通常,创建音频文件和创建视频文件使用相同的容器格式,但是也有一些更简单的容器只用于音频。
通过编码成二进制形式并压缩比特,视频和音频信号被放入容器格式。这个过程称为编码,将二进制数据还原为音频/视频信号的过程称为解码。用于编码和解码的算法是编解码器(编码器/解码器)。我们一会儿会谈到编解码器;首先我们需要理解浏览器支持的容器格式。
视频容器
尽管有很多容器格式,但幸运的是浏览器只支持有限的一组,而且你只需要知道其中的三种。
- MPEG4 ,通常包含一个
.mp4
或.m4v
扩展名。这个容器通常包含一个 H.264 或 H.265 编码的视频轨道和一个 AAC(高级音频编解码器)音频轨道,它基于苹果较旧的.mov
格式,是智能手机或平板电脑中的摄像机最常用的格式。 - Ogg 使用了
.ogg or .ogv
扩展。正如“引言”中所指出的,Ogg 是一种不受专利限制的开源格式。这个容器保存 Ogg 视频(Theora 编解码器)和 Ogg 音频(Vorbis 或 Opus 编解码器)。所有主要的 Linux 发行版都支持这种格式,并且可以在 Mac 和 Windows 平台上使用在www.videolan.org/vlc/index.html
免费提供的 VLC 播放器进行播放。 - WebM ,它使用了
.webm
扩展。正如“简介”中所指出的,WebM 是一种专门为 HTML5 视频设计的免版税开源格式。此容器包含 VP8 或 VP9 编码的视频轨道和 Vorbis 或 Opus 编码的音频轨道。除了需要分别安装 Media Foundation 或 Quicktime 组件的 Internet Explorer (IE)和 Safari 之外,许多现代浏览器本身都支持这种格式。
所有支持 Ogg 容器格式的浏览器也支持更现代的 WebM 容器格式。因此,这本书主要关注 WebM,为了完整起见,我们只在本章介绍 Ogg。
注关于视频和浏览器的更多信息,请查看
http://en.wikipedia.org/wiki/HTML5_Video#Browser_support
。
音频容器
大多数视频容器也适用于纯音频文件,但使用不同的 MIME 类型和不同的文件扩展名。HTML5 支持以下音频文件格式:
- MPEG4 只有音频的文件有一个 AAC 编码的音轨和一个
.m4a
扩展名。 - 仅音频的 Ogg 文件具有 Vorbis 编码的音轨和
.ogg
或.oga
扩展名,或者 Opus 编码的音轨和.opus
扩展名。 - WebM 只有音频的文件有一个 Vorbis 或 Opus 编码的音轨,还有一个
.webm
扩展名。 - MP3 文件包含 MPEG-1 音频第 3 层定义的编解码器,作为数据包序列。虽然 MP3 不是真正的容器格式(例如,它不能包含视频轨道),但是 MP3 文件具有容器的许多特征,例如 ID3 格式头中的元数据。MP3 音频文件位于扩展名为
.mp3
的文件中。 - RIFF WAVE 文件是音轨的容器,通常是原始 PCM 编码,这意味着音频数据基本上是未压缩的,因此文件更大。RIFF WAVE 文件扩展名为
.wav
。
这五种音频文件格式中的每一种都在一个或多个 Web 浏览器的音频或视频元素中得到支持。因为没有一种格式是所有浏览器都支持的,所以你至少需要选择两种格式来覆盖所有浏览器(比如 Opus 的.m4a
和.webm
)。(参见http://en.wikipedia.org/wiki/HTML5_Audio#Supported_audio_codecs
。)
编解码器
当你在浏览器中观看视频时,有很多你看不到的东西。你的视频播放器实际上同时在做三件事。
- 它打开容器,查看使用了哪些音频和视频格式,以及它们是如何存储在文件中的,以便可以对它们进行“解码”
- 解码视频流并将图像拍摄到屏幕上。
- 解码音频并将数据发送给扬声器。
您可以从中了解到,视频编解码器是一种算法,它对视频轨道进行编码,以使计算机能够解压缩视频中的图像,并将其拍摄到您的屏幕上。视频播放器是实际进行解码和显示的技术。
视频编解码器
有两种类型的视频编解码器:有损和无损。
有损视频是最常见的类型。随着视频被编码,越来越多的信息被丢弃。这个过程称为压缩。压缩从丢弃与人眼视觉感知无关的信息开始。最终结果是文件变得非常小。视频文件越压缩,丢失的信息就越多,视频图像的质量就下降得越多。
同样,压缩一个已经用有损编解码器压缩过的文件也不是一件“好事”如果你曾经压缩过一个.jpg
图像几次,你会注意到图像的质量下降了,因为 jpg 是一个“有损”的图像压缩器。同样的事情也发生在视频上。因此,当您对视频进行编码时,您应该始终保留原始文件的副本,以防您在稍后阶段需要重新编码。
顾名思义,“无损视频”不会丢失任何信息,产生的文件太大,无法用于在线播放。不过,它们对原始视频文件非常有用,尤其是在创建同一文件的三个版本时。一种常见的无损编解码器Animation
可通过 QuickTime 获得。
有无数的编解码器在那里都声称做惊人的事情。谢天谢地,说到 HTML5 视频,我们只关心三个:H.264、Theora 和 VP8。
H.264
如果 H.264 是一个主要的犯罪人物,它会有几个别名:MPEG-4 part 10
或MPEG-4 AVC
或MPEG-4 Advanced Video Coding
。不管它是如何为人所知的,这个编解码器的主要目的是使一个单一的编解码器可用于任何东西,从你口袋里的手机(低带宽,低 CPU)到你的台式电脑(高带宽,高 CPU)和几乎任何其他有屏幕的东西。为了实现这种相当广泛的情况,H.264 标准被分成一系列的规范,每个规范都定义了许多可选的特性,这些特性在文件大小和复杂性之间进行了权衡。就我们的目的而言,最常用的配置文件是
- 基线:配合 iOS 设备使用。
- Main: 这主要是一个用于标清(SD) (4:3 纵横比)电视广播的历史配置文件。
- 高:用于网络、标清和高清(高清)视频发布。
你还应该知道,大多数非 PC 设备,如 iPhones 和 Android 设备,实际上是在一个单独的芯片上进行解码,因为他们的主 CPU 甚至没有强大到足以实时解码。最后,唯一不支持 H.264 标准的浏览器是 Opera。
虽然 H.264 仍然是 MPEG 世界中占主导地位的编解码器,但一种称为 H.265/HEVC (MPEG 高效视频编码)的新编解码器正在兴起。在 H.265 中创建内容的工具可能与创建 H.264 的工具相同,只是生成的文件更小或图像质量更高。
定理〔??〕
Theora 由 On2 的 VP3 编解码器发展而来,随后由Xiph.org
在 BSD 风格的许可下发布。所有主要的 Linux 安装和 Firefox 和 Opera 浏览器都支持 Theora,而 IE 和 Safari 以及 iOS 和 Android 设备不支持它。虽然免版税且开源,但它已被 VP8 取代。
vp8 的作用
这是“街区的新成员”从技术上讲,VP8 输出与 H.264 的高姿态是一致的。与 H.264 基线配置文件相比,它在低带宽情况下也能很好地工作。正如“简介”中所指出的,苹果并不大力支持这种编解码器,这也解释了为什么 Safari 或 iOS 设备不支持这种编解码器。但是,您可以通过安装 QuickTime 组件获得支持(参见https://code.google.com/p/webm/downloads/list
)。类似地,从同一站点安装 Microsoft Media Foundation 组件可以支持 IE。
虽然 VP8 仍然是 WebM 世界中占主导地位的编解码器,但一种称为 VP9 的新编解码器正在出现。它的质量与 H.265 相当,但免版税。由于这两种编解码器几乎同时开始出现,硬件加速编码和解码的新硬件似乎专注于支持这两种编解码器。对于 HTML5 视频内容的用户和发布者来说,这是一个好消息,特别是如果你对 4K 这样的高分辨率视频感兴趣的话。
音频编解码器〔??〕
没有音频的视频就像看没有金格尔·罗杰斯的弗雷德·阿斯泰尔跳舞。这似乎不太自然。
当音频源被数字化时,这被称为采样,因为声压值每隔几微秒被采样并被转换成数字值。基本上有三个参数会影响音频采样的质量:采样率(即,一秒钟内压力采样的频率)、通道数量(即,我们使用多少个位置对同一信号进行采样)和样本精度(即,我们采样的值有多精确,或者我们使用多少位来存储样本,也称为位深度)。电话质量声音的典型采样率是 8 kHz(即每秒 8,000 次),而立体声音乐质量是 44.1 kHz 或 48 kHz。典型的信道数量是 2(立体声),典型的比特深度对于电话质量是 8 比特,对于立体声音乐质量是 16 比特。使用不同的编解码器压缩所得的采样数据,以减少数字化音频的存储或带宽占用。
像视频一样,音频编解码器是编码音频流的算法,像视频编解码器一样,它们有两种风格:有损和无损。由于我们正在处理在线视频,我们希望尽可能地节省带宽,我们只需要关注有损音频编解码器。请注意,RIFF WAVE 格式是未压缩的,除了 IE 之外的所有浏览器都支持,所以如果您需要未压缩的音频,这将是您的选择。对于压缩音频,您只需了解三种编解码器。
在我们开始之前,让我们弄清楚音频。仅仅因为你可以坐在你的客厅里,用六个或更多的环绕立体声扬声器观看视频,并不意味着网络观众也获得了同样的特权。网络上的大多数内容都是单声道或立体声,而你的典型智能手机或移动设备不会给你提供比立体声更多的输出。但是,可以创建具有六个或更多通道的 Ogg Vorbis 和 MPEG AAC 文件,并在您的浏览器中以环绕声播放这些文件,前提是您的环绕声系统实际上可以通过您的操作系统在您的 web 浏览器中使用。有时候,您只是想在网页上添加一个音频文件。在这种情况下,您需要了解的三种音频编解码器是 MP3、Vorbis 和 AAC。
MP3 : MPEG-1 音频层 3
标题可能会令人困惑,但这是无处不在的 MP3 文件的正式名称。
MP3 文件最多可以包含两个声道(单声道或立体声)。MP3 有一个向后兼容的环绕声扩展,可能也适用于您选择的浏览器。MP3 可以不同的比特率编码。对于那些可能第一次遇到术语“比特率”的人来说,它是每秒钟有多少千个 1 和 0 被传输到你的计算机的量度。例如,1 k 比特率意味着每秒钟有 1000 比特(kb)从服务器传输到 MP3 播放器。
对于 MP3 文件,比特率(Kbps)的范围在 32、64、128 和 256 之间,最高可达 320 Kbps。简单地“加大”比特率只不过是加大了文件的大小,而音频质量却略有提高。例如,128 Kbps 的文件听起来比 64 Kbps 的文件好得多。但音频质量在 256 Kbps 时不会翻倍。这个话题的另一个方面是 MP3 文件允许可变比特率。为了理解这一点,考虑一个在文件中间有 5 秒钟静默的音频文件。这个音频段可以应用 32 Kbps 的比特率,一旦乐队开始演奏,比特率就跳到 128 Kbps。
除了 Opera 10.0+以外的所有现代浏览器都支持桌面上的 MP3 格式。对于智能手机,解码器在许多情况下是依赖于设备的;虽然你可以合理地期望播放 MP3 文件,但有一个 Ogg Vorbis 后备也无妨。MPEG 的 MP3 已经被更现代、更高效的 AAC 所取代。
炫风超人
虽然通常被称为 Ogg Vorbis,但严格来说,这是不正确的。Ogg 是容器,Vorbis 是容器中的音轨。当在 WebM 中找到 Vorbis 时,它是一个 WebM 音频文件,但带有 Vorbis 编码的音频轨道。一般来说,Vorbis 比 MP3 具有更高的保真度,并且免版税。Vorbis 编码无需从固定比特率列表中选择,您可以请求编码器选择您需要的比特率。与所有 Ogg 编解码器一样,Safari 和 IE 都不支持开箱即用的 Vorbis,您需要安装额外的组件来解码它们。
高级音频编码
这种格式,通常被称为“AAC”,在 1997 年被苹果公司指定为 iTunes 商店的默认格式时,变得引人注目。AAC 已经被 MPEG 标准化为 MPEG-2 和 MPEG-4。
在许多方面,AAC 是一种比它的 MP3 前身更“健壮”的文件格式。它在相同的比特率下提供更好的声音质量,但它可以编码任何比特率的音频,而无需应用于 MP3 格式的 320 Kbps 减速板。在 MP4 容器中使用时,AAC 出于完全相同的原因拥有多个配置文件,以适应不同的回放条件。
正如你可能已经猜到的,没有一种神奇的容器和编解码器的组合可以在所有浏览器和设备上工作。为了让视频在任何地方都能播放,你至少需要两个视频文件——MP4 和 webm,独立音频需要两个文件——MP3 和 Vorbis。视频稍微复杂一点,尤其是在容器中找到音频的时候。如果您正在制作 WebM 文件,组合是 VP8 和 Vorbis。在 MP4 的情况下,视频编解码器是 H.264,音频任务由 AAC 处理。
编码视频
现在,您已经了解了文件格式及其用途和局限性,让我们将这些知识应用到视频编码中。在我们开始之前,重要的是你要理解为什么我们使用四个不同的软件来创建视频文件。
主要原因是你们很多人读这本书的技巧水平。从对这个主题不熟悉的人到对使用命令行来完成各种任务感到舒服的人,都有。因此,顺序将是 Miro 视频转换器,Firefogg,Adobe 媒体编码器(AME) ,最后是 FFmpeg。唯一的商业产品是 Adobe 的,我们把它包括在内是因为,作为 Creative Cloud 的一部分,AME 有一个重要的安装基础。此外,它还让我们有机会探索 MP4 文件创建的一个重要方面。在对视频文件进行编码时,您还将被要求做出一些基本决定,这些应用中的每一个都为我们提供了讨论所做决定的机会。
最后,除了 FFmpeg 之外,您还需要使用编码器的组合,因为没有一种编码器可以用于所有情况,并且演示的四个应用包含了许多其他产品的共同特性。
我们从一个简单的编码器开始:Miro 视频编码器。具有 GUI(图形用户界面)的替代性开源编码软件包括手刹(http://handbrake.fr/
)和 VLC ( www.videolan.org/vlc/index.html
),这两种软件都有 Linux、Mac 和 PC 版本。
使用 Miro 视频转换器编码
如果你正在寻找一个非常简单,易于使用的编码器,那么米罗是你的。话虽如此,Miro 确实能产生合理质量的输出,但是,由于其过于简单的界面,如果您对最终结果不满意,您可能需要尝试其他应用。
Miro Video Converter 是一个开放源代码、GPL 许可的应用,可用于 Macintosh、Windows 和 Linux 计算机。它是免费的,你可以在www.mirovideoconverter.com
下载安装程序。
采取以下步骤创建视频的 WebM、MP4 或 Ogg Theora 版本:
-
Run the Miro Video Converter application. When the application launches, you will see the home screen shown in Figure 1-2. Next you will need to add your original video file to the converter queue. Do this by dragging the video file to the drop area, or choose the file through the file selector. Once added, it will appear in the drop area with a thumbnail as shown in the top of Figure 1-3.
图 1-2 。Miro 转换器主屏幕
-
The plan is to create the WebM version first. To do this, click the Format button and, as shown in Figure 1-3, select WebM HD from the Video selection. The Convert Now button will turn green and change to read Convert to WebM HD. Click it.
图 1-3 。创建视频的 WebM 版本
-
当视频被转换时,你会在界面顶部的视频缩略图旁边看到一个进度条。根据视频的大小,这可能是一个相当缓慢的过程,所以请耐心等待。编码器尝试保持原始视频文件的持续时间、分辨率、帧速率、音频采样率以及原始音频文件中使用的音频通道数。
-
完成后,你会看到一个绿色的复选标记。Miro 将完成的文件放在 Mac 上的一个单独的文件夹中。查找任何转换的最简单方法是点按“显示文件”链接,并将文件移动到项目的视频文件夹中。Miro 还会将格式名称添加到生成的文件名中。请随意移除它。
你可以按照同样的过程来编码 MP4。只需在步骤 2 中从视频菜单中选择 MP4 而不是 WebM HD,并重复相同的过程。如果需要的话,对 Ogg Theora 也是如此。
这是一个展示这些编解码器在压缩方面有多么强大的好地方。在图 1-4 中,我们将文件的原始.mov
版本放在刚刚创建的 WebM、MP4 和 Ogg Theora 版本之上。请注意原始版本和压缩版本之间在文件大小上的显著差异,大约为 180 MB。由于编解码器的有损特性,质量会有轻微的损失,但并不明显。事实上,Miro WebM 和 MP4 编码的质量相当,除了 WebM 将 48 kHz 音频重新采样为 44.1 kHz 之外,它们保留了所有视频参数。Ogg Theora 版本的质量要差得多,因为 Ogg Theora 的默认 Miro 编码设置是次优的。
图 1-4 。文件大小的下降是由于“有损”编解码器
对于你“超级用户”:米罗在引擎盖下使用 FFmpeg。它通过 python 脚本调用 FFmpeg 命令行。如果您想更改 Miro 的默认编码,可以更改 python 脚本(参见www.xlvisuals.com/index.php?/archives/43-How-to-change-Miro-Video-Converter-3.0-output-quality-for-Ogg-Theora-on-OS-X..html
)。如果您进行这些更改并重新编码 Ogg Theora,这将产生一个 12.4 MB 的文件,其质量与 WebM 和 MP4 文件相当。
如果您在浏览器中打开其中一个文件,它将扩展到浏览器窗口的最大尺寸。如果你的视频分辨率小于你当前的浏览器窗口,这看起来会有点模糊。您需要将浏览器窗口的大小缩小到视频的分辨率,这样图像会变得更清晰。
如前所述,你可以将任何视频文件转换成 WebM、Ogg Theora 和 MP4 格式。您还可以选择为许多 iOS 和 Android 设备准备文件。
在图 1-3 中,你会注意到左边的苹果按钮。点击这个,你就可以准备文件在全系列的苹果 iOS 设备上播放了。文件转换后,Miro 会询问您是否想要将此文件放入 iTunes 资料库。选择权在你。
【MIRO 视频转换器的压缩记分卡
- 原始文件:190.3 MB。
- WebM: 6.8 MB。
- MP4: 11.4 MB
- OGG: 1.6 MB.
用 Firefogg 编码 Ogg 视频
Firefogg 是一个开源的、GPL 许可的 Firefox 扩展,它的唯一目的是将视频文件编码到 WebM 或 Ogg Theora。要使用此扩展,您需要在计算机上安装 Firefox 版或更高版本。要添加扩展,转至http://firefogg.org/
并遵循安装说明。
按照以下步骤使用 Firefogg 对视频进行编码:
-
Launch Firefox and point your browser to
http://firefogg.org/make/
. You will see the Make Web Video page shown in Figure 1-5. Click the Select File … button and navigate to the file to be encoded.图 1-5 。我们从选择要编码的视频开始
-
当您选择要编码的文件时,界面会发生变化,向您显示原始文件的规格以及格式和预设的两个弹出菜单。您可以在带有 VP8 和 Vorbis 编解码器的 WebM、带有 VP9 和 Opus 编解码器的 WebM 以及带有 Vorbis 的 Ogg Theora 之间进行选择。还要选择一个适合您的输入文件格式的预设,这通常是为您预先选择的。如果这是您选择适应编码参数的最大限度,那么请随意单击“编码”按钮。它会问你编码文件的名称和存储位置。
-
In this instance, we want to exert a lot more control over the encoding parameters. Click the Advanced Options button. The interface changes to that shown in Figure 1-6. It shows you the most important encoding parameters for WebM (VP8/Vorbis) video. This is actually a subset of the FFmpeg encoding parameters, which—as in the case of Miro Video Encoder—is the actual encoding software used under the hood by Firefogg.
图 1-6 。Firefogg 高级选项对话框
这里提供的选择让您可以绝对控制视频的质量。让我们过一遍。
- 格式 : 给你三个选择。WebM (VP9/Opus)选项为您提供了使用最新版本的 WebM 格式编解码器的机会。WebM (VP8/Vorbis)选择是最常见的格式,最终选择 Ogg (Theora/Vorbis)允许您创建 Ogg Theora 版本的文件。我们选择了奥格(Theora/Vorbis)。
- 大小:你可以改变视频的分辨率,但要记住,改变这个值而不保持长宽比会扭曲最终产品或将其放在信箱里。此外,增加视频的物理尺寸无非是在更多输出像素上拉伸输入像素,因此必须从现有像素创建新像素。这种上采样实际上会通过抗锯齿降低质量,应该避免。我们选择将此视频的大小调整为 50%,并将宽度和高度值更改为 480 x 360。
- 帧率 : 如果您将此部分留空,将使用编码视频的帧率。常见的帧速率是每秒 30 帧(fps)。如果视频中没有太多的运动,将 fps 降低到 15 将不会对播放质量产生明显的影响。我们输入 30 作为值,因为我们的示例视频是道路交通,因此有很多运动。
- 长宽比:如果视频是标清,输入 4:3。如果是高清,输入 16:9。我们的示例视频是 4:3。
- 比特率:在许多方面,这是“橡胶上路”的地方这里没有神奇的数字,但研究表明,美国的平均宽带速度是每秒 6.6 兆比特(Mbps)。不要迷恋这个数字,因为同样的研究显示平均移动宽带速度是 2.7 Mbps。如果您正在传输 HTML5 视频,您可能希望以最小公分母为目标,因此一个好的起点是 2000。即便如此,这种选择也可能是危险的。任何视频的比特率是音频和视频比特率的总和。如果您决定对视频使用 2700 Kbps,对音频使用 700 Kbps,那么您可以很好地保证用户在移动设备上的体验将包括视频的开始和停止。在我们的例子中,因为视频的物理尺寸很小,我们决定对视频轨道使用 1,200 Kbps,这样就为音频轨道留下了足够的带宽。
- 质量:你可以选择 0 到 10 之间的任何数字。选择会影响文件大小和图像质量。如果视频是用你的智能手机拍摄的,4 到 6 之间的值就可以了。为高质量的工作室制作节省 10 英镑。我们的视频是使用翻转摄像机拍摄的,因此我们选择 6 作为质量设置。
- 关键帧间隔 : 这是两个全质量视频帧之间的时间间隔。中间的所有帧将只是前一个完整视频帧的差异帧,从而提供良好的压缩。然而,当寻找时,不能访问差异帧,因为它们不能自己解码。默认情况下,Firefogg 使用 64 帧作为关键帧间隔,这意味着在 30 fps 的情况下,您基本上可以搜索到 2 秒的分辨率。这对于几乎所有的应用都是可以接受的。将此项留空,让软件使用其默认设置完成工作。
- 2 遍编码:我们总是选择这个选项。此功能也称为“双通道可变比特率编码”,总是可以提高输出质量。它所做的是在第一次通过时搜索视频,寻找帧之间的突变。第二遍执行实际的编码,并确保在发生突变的地方放置高质量的关键帧。这避免了在这些边界上创建差异帧,这显然是低质量的。例如,假设视频主题是一场汽车比赛。赛车会疾驰几秒钟,然后就只剩下观众和一条空赛道了。第一遍捕捉并记录这两个转换。第二个过程将在汽车缩放通过帧后重置关键帧,并允许在运动较少的镜头中使用较低的比特率。
- 去噪 : 该滤波器将尝试消除输入视频中发现的任何伪像。我们不会担心这个选项。
- 去隔行扫描 : 仅当您使用的是为广播准备的剪辑时,才选择此项。我们不会担心这个选项。
你可能已经注意到,音频选择有点有限。我们的视频只包含街道上的交通噪音和常见的背景街道噪音。考虑到这一点,我们并不十分关心音频质量。仍然必须做出一些选择。
- 质量:这个滑块有点欺骗性,因为它实际上设置了音频比特率。我们选择的值为 6。如果音频质量至关重要,请选择 10。如果只是不重要的背景噪声,值 1 就可以了。除此之外,只有反复试验才能让你满意。
- 频道 : 你的选择是立体声和单声道。我们选择单声道是因为音频的性质。如果这个文件是专业制作的,并且只用于桌面播放,那么立体声将是合理的选择。还要记住,选择立体声会增加文件大小。
- 采样率 : 这三个选项决定了音频文件的准确性。如果精度是首要考虑因素,那么 48 kHz 或 44.1 kHz 是合理的选择。我们选择 22 千赫,因为我们的音频不是那么重要,以准确复制。
-
做出选择后,我们单击了“编码”按钮。当它完成两遍时,你会看到进度条两次,视频图 1-7 将在 Firefox 浏览器中启动。
图 1-7 。Ogg 视频文件在 Firefox 浏览器中播放
编码 WebM 时,前面的选项几乎是相同的。这是因为这些是任何视频编码器的典型选项。在使用 Firefogg Javascript API(应用编程接口)时,Firefogg 中还有更多的选项可以使用(参见www.firefogg.org/dev/
)。它允许您通过 Firefogg Firefox 扩展将编码包含在自己的 Web 应用中。
火雾压缩记分卡
- 原始文件:190.3 MB。
- WebM (VP8/Vorbis): 14.4 MB。
- WebM (VP9.作品):7.6 MB。
- Ogg Theora(默认设置):11.4 MB。
- Ogg Theora(我们自定义编码):4.2 MB。
使用 Adobe Media Encoder CC 编码 MP4 文件
对 MP4 文件进行编码涉及到许多与上例中遇到的比特率、音频质量等相同的决策。虽然有很多产品会对. mp4 进行编码,从视频编辑器到 Miro 的复杂性不等,但它们都非常相似,因为不管是什么产品,你都会被要求做出相同的决定。在本例中,我们使用 Adobe Media Encoder 来展示这些决策。此外,媒体编码器给本章至此概述的过程增加了另一个复杂程度。所以让我们开始吧。
-
When the Media Encoder launches, drag your video into the queue area on the left, as shown in Figure 1-8. Over on the right side of the interface are a number of preset encoding options. We tend to ignore them, preferring, instead, to set our own values rather than use ones that may or may not fit our intention.
图 1-8 。要编码的文件被添加到编码队列
-
When the file appears, click on the “Format” link to open the Export Settings dialog box shown in Figure 1-9.
图 1-9 。导出设置对话框是神奇的地方
对话框的左侧允许您设置视频的入点和出点,除此之外别无其他。对话框的右侧是您做出一些基本决定的地方。
-
The first decision is which codec to use. We clicked the format pop-down and selected the H.264 codec from the list. You don’t need to select a preset but make sure the output name includes the
.mp4
extension.注意Adobe Media Encoder 创建的任何输出都与源文件放在同一个文件夹中。
-
如果未选择导出视频和导出音频,请选择它们。不检查这些将会有明显的后果。
-
点击视频选项卡,编辑基本视频设置。这是我们为 MP4 容器的视频部分设置值的地方。
-
单击复选框将允许您更改基本视频设置区域中的值。如果确实需要更改物理尺寸,请确保选择了链节,宽度和高度值将按比例更改。
-
单击“配置文件”旁边的复选标记,如本章前面所指出的,选择用于网络视频的“高”配置文件。如果我们的目标包括 iOS 设备,那么“基线”将是配置文件的选择。
设置比特率
下一个要做的重要决定涉及比特率。如果你点击下拉菜单,你会看到三个选择:CBR(恒定比特率),VBR(可变比特率),一个通道,和 VBR,两个通道。您会注意到,当您选择每个选项时,目标比特率区域会发生变化,为两个 VBR 选项增加了一个额外的滑块。那么有什么区别呢?
CBR 编码将设置的数据速率应用于整个视频剪辑。仅当您的片段在整个片段中包含相似的运动层次(想象田野中的一棵树)时,才使用 CBR。
VBR 编码根据压缩器所需的数据,将数据速率下调至您设定的上限。这解释了额外滑块的出现。不像 Ogg Theora 的例子,你可以设置比特率的上限和目标。
当谈到编码 mp4 视频,VBR 2 通行证是黄金标准。这与我们用于 Ogg Theora 的两遍编码相同。
-
从下拉菜单中选择“VBR,二次通过”。
-
Set the Target Bitrate to 1.2 and the Maximum Bitrate to 1.5 as shown in Figure 1-10. Remember, bitrate is the sum of the audio and video bitrates. We know our bandwidth limit is around 2 Mbps so this leaves us ample room for the audio. Also note, the projected file size is now sitting at 4 MB.
图 1-10 。比特率目标是在. mp4 容器中为 H.264 编解码器设置的
-
忽略关键帧距离设置。让软件来做吧。现在我们可以把注意力转向 mp4 容器中的音轨了。
设置 AAC 编解码器的音频值
mp4 容器使用 H.264 编解码器压缩视频轨道,使用 AAC 音频编解码器压缩容器中的音频轨道。在本例中,我们将对视频中的音轨应用 AAC 编码。事情是这样的。
-
Click the Audio tab to open the Audio options shown in Figure 1-11.
图 1-11 。音频编码选项
-
在格式区域选择 AAC。另外两个选项——杜比数字和 MPEG——不能用于网络。
-
选择 AAC 作为音频编解码器。虽然有两个其他选项——AAC+版本 1 和 AAC+版本 2——但它们更适用于流式音频和无线电广播。
-
将采样率降至 32000 Hz。原因是音轨比其他任何东西都更像背景噪音,降低其采样率不会对音频质量产生重大影响。
-
从通道下拉菜单中选择单声道。
-
设置音频质量为高,虽然;对于我们剪辑中包含的音频,中等质量设置不会有明显的不同。
-
将比特率值设置为 64。如果这个视频包含一个立体声音轨,那么 160 到 96 之间的任何值都是适用的。在我们的情况下,这是一个单声道轨道,64 Kbps 是一个很好的目标媒体。还要注意比特率确实会影响文件大小。在我们的例子中,简单地选择 160 Kbps 会增加 1 MB 的文件大小。
-
高级设置为您提供了两种播放优先级选择。显然,由于我们是通过浏览器运行这个文件,比特率是显而易见的选择。
-
做出选择后,单击 OK 按钮返回队列。当您到达时,单击绿色的开始队列按钮开始编码过程。当它结束时,你会听到一声蜂鸣。
【ADOBE 媒体编码器的压缩记分卡
- 原始文件:190.3 mb。
- MP4: 4 MB。
使用 FFmpeg 编码媒体资源
在本章的最后一节,我们将重点介绍如何使用开源命令行工具来执行编码。
我们将使用的工具是 FFmpeg ,这也是许多在线视频发布网站的首选工具,据称包括 YouTube。每个人都可以在每个主要平台上使用这个软件,并且它是独立于供应商的。
从http://ffmpeg.zeranoe.com/builds/
安装 Windows 版本。在 Mac OS X 上,我们建议使用 Homebrew(确保使用以下命令行选项安装它:-with-libvorbis
、–with-libvpx
用于 WebM 支持,以及–with-theora
用于 Theora 支持)。在 Linux 上,应该有一个为您的发行版构建的包。即使你有一个奇特的平台,你也很可能通过从源代码编译来使它工作。
我们从编码 MPEG-4 H.264 视频开始。
编码 MPEG-4 H.264 的开源工具基本上都使用 x264 编码库,该库是在 GNU GPL 许可下发布的。x264 是功能最全的 H.264 编解码器之一,被广泛认为是速度最快、质量最高的编解码器之一。
让我们假设您有一个来自数码摄像机的视频文件。它可能已经是 MPEG-4 H.264 格式,但让我们假设它是 DV、QuickTime、VOB、AVI、MXF 或任何其他这样的格式。FFmpeg 理解几乎所有的输入格式(假设你安装了正确的解码库)。运行ffmpeg --formats
将列出所有支持的编解码器格式。
要获得 FFmpeg 中 libx264 编码的所有可能选项,请运行以下命令:
$ ffmpeg -h encoder=libx264
在https://trac.ffmpeg.org/wiki/Encode/H.264
有关于命令行开关的最新信息。
以下是一些重要的命令行开关:
- -c 开关指定要使用的编解码器。":v "指定视频编解码器,libx264 指定 x264 编码器。“:a”指定音频编解码器,libfaac 指定 aac 编码器。
- -profile:v 开关指定 H.264 视频配置文件,可以选择基线、主或高。
- 要限制比特率,请使用-b[比特率]开关,其中“:v”表示视频,“:a”表示音频。
- 要指定多遍运行,请使用-pass [number]开关。
- 要指定音频通道的数量,请使用-AC[通道]和采样速率,请使用-ar[速率]。
下面是一个简单的命令行,它使用主概要将输入的.mov
文件转换成输出的.mp4
文件:
$ ffmpeg -i input.mov -c:v libx264 -profile:v main -pix_fmt yuv420p -c:a libfaac output.mp4
需要指定像素格式,因为 Apple QuickTime 在 H.264 中仅支持 4:2:0 色度子采样的 YUV 平面颜色空间。
下面是两遍编码的例子。第一遍只需要视频作为输入,因为它创建了第二遍输入所需的临时日志文件。
$ ffmpeg -i input.mov -c:v libx264 -profile:v main -b:v 1200k -pass 1 -pix_fmt yuv420p -an temp.mp4
$ ffmpeg -i input.mov -c:v libx264 -profile:v main -b:v 1200k -pass 2 -pix_fmt yuv420p \
-c:a libfaac -b:a 64k -ac 1 -ar 22050 output.mp4
FFMPEG MP4 的压缩记分卡
- 原始文件:190.3 MB。
- MP4(编码设置不变):9.5 MB。
- MP4(第一遍不带音频):3.8 MB。
- MP4(第二遍):4 MB。
编码 Ogg 理论
Ogg Theora 编码的开源工具基本上使用的是libtheora
编码库,它是由Xiph.org
在 BSD 风格许可下发布的。基于 libtheora 编写了几个编码器,其中使用最广泛的是ffmpeg2theora
和FFmpeg
。
ffmpeg2theora
和FFmpeg
的主要区别在于ffmpeg2theora
固定使用 Xiph 库进行编码,而FFmpeg
可以选择编解码器库,包括自己的 Vorbis 实现。ffmpeg2theora
要担心的选择要少得多。要使用 FFmpeg 对 Ogg Theora 进行编码,请确保使用libvorbis
和vorbis encoding library
;否则,您的文件可能不是最佳的。
因为ffmpeg2theora
是为创建 Ogg Theora 文件而优化的,因此对 Ogg Theora 有更多具体的选项和功能,我们在这里使用它。
以下命令可用于创建带有 Vorbis 音频的 Ogg Theora 视频文件。它将简单地在一个新的 Ogg Theora/Vorbis 编码资源中保留输入视频的宽度、高度和帧速率,以及输入音频的采样率和通道数。
$ ffmpeg2theora -o output.ogv input.mov
就像 MPEG H.264 一样,Ogg Theora 也提供了两遍编码的可能性,以提高视频图像的质量。下面是如何用两遍运行ffmpeg2theora
的方法。
$ ffmpeg2theora -o output.ogv -- two-pass input.mov
在ffmpeg2theora
中有更多的选择。例如,你可以在 Ogg Theora 文件中加入字幕、元数据、提高可看性的索引,甚至可以通过一些内置的过滤器来提高视频质量。请注意,包含索引是默认的since ffmpeg2theora version 0.27
。索引将极大地提高浏览器的搜索性能。
您可以通过调用来发现所有选项
$ ffmpeg2theora -h
编码 WebM
编码 WebM 的开源工具基本上使用的是libvpx
编码库,它是在 Google 的 BSD 风格许可下发布的。FFmpeg 有许多用于编码 WebM 的命令行选项。最重要的在这里描述:https://trac.ffmpeg.org/wiki/Encode/VP8
。
如果您输入以下命令,您应该能够创建一个带有 VP8 视频和 Vorbis 音频的 WebM 文件。它将简单地在新的 WebM 编码资源中保留输入视频的宽度、高度和帧速率,以及输入音频的采样速率和通道数:
$ ffmpeg -i input.mov output.webm.
奇怪的是,FFmpeg 试图将 WebM 文件压缩到 200 Kbps 的视频比特率,这导致了非常差的图像质量。
以下是以 1,200 Kbps 为目标的命令行:
$ ffmpeg -i input.mov -b:v 1200k output.webm
FFMPEG WEBM 压缩记分卡
- 原始文件:190.3 MB。
- WebM(编码设置不变):1.7 MB。
- WebM (1200Kbps 比特率):4.2 MB。
使用在线编码服务
虽然您可以自己进行视频编码,甚至使用 FFmpeg 建立自己的自动编码管道,但使用在线编码服务可能更容易。有大量的服务可供选择(如 Zencoder、Encoding.com、HeyWatch、Gomi、PandaStream、uEncode),并有不同的定价选项。使用在线编码服务是特别有趣的,因为它们会用已经优化的参数为您运行软件,并且成本将与您需要进行的编码量成比例。
编码 MP3 和 Ogg Vorbis 音频文件
您可能已经猜到,编码音频远比编码视频容易。有几个程序可以将音频记录编码成 MP3 容器格式,包括lame
或FFmpeg
(顺便说一下,它们使用了与 lame 相同的编码库:libmp3lame
)。虽然大多数音频编辑软件都能够对 MP3 进行编码,但我们还是使用FFmpeg
。事情是这样的。
-
Enter the following command:
$ ffmpeg -i audiofile -acodec libmp3lame -aq 0 audio.mp3
aq
参数表示音频质量,其潜在值在 0 和 255 之间,本例中使用的 0 表示最佳质量。还有其他参数可以更改,如比特率、通道数、音量和采样率。要对 Ogg Vorbis 文件进行编码
-
Enter the following command:
$ ffmpeg -i audiofile -f ogg -acodec libvorbis -ab 192k audio.ogg
ab
参数表示 192 Kbps 的目标音频比特率。还有更多参数可以更改,例如通道数量、音量和采样速率。 -
你也可以用
oggenc
编码成 Ogg Vorbis。这个命令稍微容易使用,并且有一些特定的 Ogg Vorbis 功能。输入以下命令创建一个目标比特率为 192K 的 Ogg Vorbis 文件:$ oggenc audiofile -b 192 -o audio.ogg
oggenc
命令还提供了多个额外的参数,例如包含了 skeleton——它将创建一个索引来改进文件的搜索功能——一个质量参数–q –
,其值在-1
和10
之间,其中10
是最好的质量。该命令还包含允许您更改通道、音量、采样率的参数,以及包含元数据的名称-值对的方法。
Oggenc 只接受 raw、wav 或 AIFF 格式的音频输入文件,所以它比 ffmpeg 命令有更多的限制。
摘要
我们不否认这是一个相当“科技含量”的章节。原因很简单:如果你不了解它们的底层技术以及这些文件是如何创建的,你就无法真正在 HTML5 中使用音频和视频文件。我们从解释容器格式开始,然后进入最重要的编解码器。从那里我们开始对视频进行编码。虽然我们向您展示了许多用于视频编码的免费和商业工具,但重点是您在过程的每一步都必须做出的决定。正如我们所指出的,这些决定更多的是主观的,而不是客观的,无论你使用哪种软件来编码视频,你都会做出类似的决定。
在本章的最后,我们从基于 GUI 的编码转向使用命令行工具 FFmpeg 来创建音频和视频文件。同样,您将不得不就许多对音频和视频输出有直接影响的重要因素做出相同的主观决定。
说到输出,现在你知道了文件是如何创建的,让我们用 HTML5 来播放它们。那是下一章的主题。我们在那里见。
二、使用和操作 HTML5 视频和音频元素
视频文件编码后,我们现在可以将注意力转向播放和控制视频文件的 HTML5 标记。在这一章中,我们将全面回顾 HTML5 中引入的
最后一点:HTML5 视频仍然是一项正在进行的工作。如果您发现有些东西不像您预期的那样工作,您真的应该检查一下实际的规范,看是否有任何更新被添加进来。HTML5.0 规范可以在www.w3c.org/TR/html5/
找到。下一个版本将在www.whatwg.org/specs/web-apps/current-work/multipage/
开发新功能。
注作者感谢多伦多亨伯学院媒体研究学院允许使用本章展示的秃鹫视频剪辑。我们还要感谢 Joseph Labrecque 允许我们使用本章音频部分的音频剪辑。
在我们开始之前,让我们记住现代浏览器,如图 2-1 所示,只支持特定的编解码器。了解这一点很重要,因为有时你会看到一个空白的屏幕,不知道为什么视频会丢失。几乎 100%的可能性是浏览器不支持所使用的编解码器或文件格式。
图 2-1 。浏览器支持
就像网络上常见的那样,标准不是一成不变的。即将推出的是两种新的编解码器——VP9 和 H.265,它们是专为在缓慢向 4K 或超高清(高清)视频发展的世界中生存而设计的。H.265 被设计成比 H.264 更好的压缩器,而不是设计成将更多数据压缩到一个小空间中而不可避免地损失质量的压缩器。
另一个即将推出的是 VP9。与 H.265 不同,VP9 是开源的,免版税。由谷歌作为 VP8 的继任者开发,这也解释了为什么谷歌悄悄在 Chrome 和 YouTube 中加入了 VP9 支持。Firefox 还增加了对 VP9 的支持。
尽管新的编解码器可能看起来非常不同,但 VP9 和 H.265 有一些共同点:两者都将 720p 和 1,080p 内容的文件大小减半,从而更容易通过相对较慢的连接下载或传输高清视频。
HTML5 引入了<video>
元素,允许你在网页中放置视频内容,而不需要使用复杂的代码或者<object>
和<embed>
标签。这个元素可以直接放在页面上,也可以放在页面上 CSS 驱动的<div>
中。在这一章中,我们将展示应用于 HTML 5 视频的各种属性的用法。本章中使用的标记模板非常简单,如清单 2-1 所示。请注意,列表编号与我们在http://html5videoguide.net/
上发布的示例文件相关,因此您可以更容易地找到它们。
清单 2-1 。一个裸露的视频元素
<body>
<div class=".container">
<h1>Beginning HTML5 Media</h1>
<h2>The basic code:</h2>
<p>Here is an example of the Video element:</p>
<video></video>
</div>
</body>
视频“神奇”都发生在<video></video>
标签之间。就目前的情况而言,您将完全看不到任何内容,因为没有指向任何视频内容。
后备内容
您可能已经注意到了<video>
元素有一个开始和结束标签。这有两个原因。
首先,其他元素可以作为<video>
元素的子元素引入,特别是<source>
和<track>
元素。我们将向您介绍《??》第四章中的<track>
元素,它处理可访问性。
其次,在
清单 2-2 。带有回退文本的视频元素
<video src = "Vultures.mp4">
Your browser doesn’t support the HTML5 video element.
</video>
如果将其加载到旧的 Internet Explorer (IE) 6 浏览器中,用户将会在为视频留出的块中看到该消息。事实上,在任何包含 HTML5 视频的页面中始终包含后备内容是一个最佳实践。
您可以在<video>
元素中添加任何 HTML 标记,包括我们所说的<object>
和<embed>
元素。因此,例如,您可以提供一个显示使用 mp4 或 flv 格式的 Flash 视频文件的后备,始终假设不支持媒体元素的旧浏览器至少支持 Adobe Flash。
这种视频插件不支持 HTML5 <video>
元素的 JavaScript API(应用编程接口),但您可以获得模拟一些 JavaScript API 功能的 JavaScript 库,并可用于在各种条件下提供后备。示例库,其中两个我们将在下一章探讨,是
- mwEmbed:
https://github.com/kaltura/mwEmbed
- 视频给大家:
http://camendesign.com/code/video_for_everybody
- 崇高视频:
www.sublimevideo.net/
- video js:??]
- JW 玩家:
www.jwplayer.com/
还要记住,即使您使用的是现代浏览器,例如,如果它不支持 ogv,它也不会显示回退内容。你必须使用 JavaScript 来捕捉这个错误,我们将在第三章中讨论如何捕捉这个加载错误。只有当您打算使用单一媒体格式并希望捕捉不支持您的选择的浏览器的错误时,这才真正相关。
介绍<video>
元素变得有多健壮。
@src
在其最基本的形式中,所有的<video>
元素需要被指向一个视频文件,然后它从那里接管。这里,清单 2-3 ,展示了代码。
清单 2-3 。具有@src 属性的视频元素
<video src="video/Vultures.mp4"></video>
通过简单地添加@src
属性并将其指向站点上包含秃鹫.mp4
文件的文件夹,我们可以在页面上包含一个视频文件。图 2-2 显示了结果。
图 2-2 。一个只有@src 属性的<视频>元素
您可能已经注意到,该视频看起来像一个简单的图像。它不会播放,只会显示视频中的第一帧,这就是图像的外观。以这种方式使用
@自动播放
要让视频自动开始,你只需要添加@autoplay
属性。如果没有设置为自动播放,浏览器将只从视频中下载足够的字节来决定是否能够解码视频和标题。当你谈论 HTML5 视频时,文件头实际上是视频文件的元数据,包含我们在上一章讨论的分辨率和帧率等信息。
当您提供@autoplay
属性时,视频将在设置解码管道、缓冲数据并在提供和解码足够的数据后开始回放后请求更多的音频和视频数据。这解释了为什么一些视频需要一段时间才能加载,而另一些几乎立即就能开始。浏览器确保它能够以给定的数据速率播放视频,而不会耗尽缓冲区。
当你开始做的时候,添加一个带有@src
属性的@autoplay
属性是播放一个视频所需要的最低要求。如清单 2-4 所示,代码如下:
清单 2-4 。带有@autoplay 的视频元素
<video src="video/Vultures.webm" autoplay></video>
@autoplay
属性是一个“布尔”属性,意味着它只有两个可能的值:真或假,其中“真”意味着该属性存在,“假”意味着它不存在。通过将@autoplay
添加到标记中,真值被启用。启用@autoplay
后,视频将立即开始播放(参见图 2-3 )并在视频结束时停止。小心这一个:使用@autoplay="false"
也通过其纯粹的存在来启用属性。如果你不想要@autoplay
,你必须移除它。给它一个值,它就会被激活。
图 2-3 。启用了@autoplay 的 webm 文件
另一件需要注意的事情是,如果视频的下载速度不够快,无法提供流畅的播放,或者浏览器的解码速度太慢,视频将停止并开始播放,因为缓冲区在继续播放之前会被重新填充。
最后,使用@autoplay
并不被视为行业最佳实践。如果你曾经到达一个开始播放烦人视频的网站,你就会明白这一点。请小心使用该属性。它可以自由使用的一个地方是视频被用作没有音频的整页背景视频,并且更多的是一种设计元素而不是媒体。
@静音
最佳实践是让用户选择是否播放视频中的音轨。然而,也有一些时候你根本不需要音频来播放。这是通过清单 2-5 中的属性来完成的。
清单 2-5 。带有@muted 的视频元素
<video src="video/Vultures.webm" muted autoplay></video>
@muted
和@autoplay
一样,都是布尔属性。如果静音,则值为真,音轨被关闭。如果不是,则播放音轨。
如果想让用户控制音频,可以使用@controls
属性或 JavaScript API。
@loop
@loop
属性使视频能够在播放完毕后自动重启。显然,这个属性把视频变成了一个连续的循环。清单 2-6 显示了代码,
清单 2-6 。带有@loop 的视频元素
<video src="video/Vultures.webm" autoplay loop></video>
@loop
和@autoplay
一样,是一个布尔属性,会连续播放和重播视频,直到用户要么离开页面,要么退出浏览器。如果视频更多的是设计元素(例如,全屏背景视频)或者相对较短,那么可以随意使用它。否则,应该少用这个属性。
如果你想限制视频循环的次数,你需要使用 JavaScript API。
@海报
加载视频时,浏览器通常会显示视频中的第一帧。有时,第一帧有彩条,或者全黑或全白,不能很好地代表您的视频。HTML5 允许你定义一个图像,通常是从视频中选取的,作为视频的海报图像。你可以在图 2-4 中看到这一点。我们看了几分钟视频,提取了一张小秃鹫的图片,并将其保存为.jpg
图像,用作海报框架。当我们在@poster
属性中添加这张图片时,图 2-4 是用户加载视频时将会看到的图像。
图 2-4 。要用作海报框架的屏幕截图
标志帧对于需要一些时间来加载和播放的视频特别有用。这样用户就不会盯着页面的空白区域。海报帧的巧妙之处在于,它们不必从视频中截取。如果图像与视频具有相同的物理尺寸,它可以是您创建的任何.jpg
或.png
图像,包括带有视频标题文本的图片。一些网站甚至选择使用循环动画.gif
来显示简短的视频摘要。
清单 2-7 显示了加载BabyVulture.jpg
图像作为海报帧的代码。
清单 2-7 。带有@海报的视频元素
<video src="video/Vultures.mp4" poster="img/BabyVulture.jpg"></video>
各种浏览器处理海报框架的方式有所不同。火狐、Chrome、Opera、Safari 会显示海报(见图 2-5 )而不是视频,如果没有@autoplay
属性就暂停。IE 就有点问题了。IE 将在设置解码管道时显示海报,但是,一旦管道建立,它将显示一个黑色帧,然后过渡到视频的第一帧。
图 2-5 。那个。用作海报框架的 jpg 图像
如果使用@autoplay
属性,海报图像只会在视频元数据加载时和播放开始前短暂出现。一个好的经验法则是不要将@poster
属性与@autoplay
一起使用。
@宽度,@高度
到目前为止,我们已经在浏览器中显示了相同的两个视频,您可能已经注意到视频镜像的物理尺寸与原始源文件的尺寸相同。浏览器是怎么做到的?
本质上,尺寸是从视频资源的第一张图片计算出来的,这可以从@poster
属性或视频本身获得。在本例中使用的 HK_Traffic 视频的尺寸为 1,066 x 600(这是视频的固有尺寸)。
如果没有可用的海报或视频尺寸—视频加载错误或没有@poster
属性—视频显示区域或“视口”以 300 x 150(最小显示)或其固有大小显示。
如果海报尺寸和视频尺寸不同,视频最初会以海报尺寸显示,稍后会适应视频尺寸。
由此您可以推断,默认情况下会有大量扩展。当视窗在不同比例的海报图像和视频之间突然改变尺寸时,这实际上会在浏览器中产生性能瓶颈和破坏性显示。为了避免这种情况,我们建议在@width
和@height
属性,或者更好的是,使用宽度和高度 CSS
应该使用什么值?@width
和@height
属性可以用像素(px)或百分比(%)来表示。唯一不接受百分比值的浏览器是 IE9,它将百分比解释为 px 值(随后在 IE10 中被修复)。在一个响应迅速的 web 环境中,百分比至高无上,我们建议使用 CSS 来表示百分比。
清单 2-8 显示了使用@width
和@height
属性的代码。
清单 2-8 。具有@width 和@height 百分比的视频元素
<video src="video/HK_Traffic.mp4" width="50%" height="50%"></video>
如果我们使用数字而不是百分比,代码行将如清单 2-9 所示。
清单 2-9 。以像素为单位的@width 和@height 的视频元素
<video src="video/HK_Traffic.mp4" width="533px" height="300px"></video>
虽然您可以使用 px,但更常见的应用是简单地忘记 px,而使用数字。清单 2-10 显示了一个例子。
清单 2-10 。具有@width 和@height 的视频元素,没有度量单位
<video src="video/HK_Traffic.mp4" width="533" height="300"></video>
如图 2-6 中的所示,结果是一个视频在视窗中被缩放到其尺寸的一半。
图 2-6 。视频被缩放到其原始大小的 50%
当然,存在一些问题,其中大部分与纳入百分比有关。让我们看得更深入一点。当海报和视频都使用百分比值时,Firefox 会将视频和海报缩放到所需的值。而不是 Safari 和 Chrome。它们与海报图像的高度值成比例。
通过给定固定像素值来调整大小不会没有它的“问题”,因为 CSS 像素,而不是屏幕像素,是用来定义像素的。CSS 像素是一种测量单位,它为像素长度建立了光学标准,并且完全独立于设备屏幕的大小。在 W3C 的 CSS3 标准中,这个单位被描述为大约 1/96 英寸(在 CSS3 之前,一个像素被定义为标准 96 dpi 显示器上的一个设备像素,位于距离观察者大约一臂的距离处,现在被称为参考像素(参见www.w3.org/TR/css3-values/#absolute-lengths
)。这解释了为什么设备上的内容有时相当模糊。在这种情况下,CSS 像素可能比屏幕上的设备像素大。
对于@width
和@height
属性,您可能会遇到的另一个棘手问题是纵横比。如果宽高比为 16:9 (1280 x 720)的视频被缩小到 4:3(640 x 480),该视频将被放入信箱或邮箱。注意 IE9 使用黑条,而不是其他浏览器使用的透明条。
@控件
向网页添加视频的便利性使得视频的使用变得无处不在。伴随着无处不在的是责任。此时使用@autoplay
,视频开始播放并一直播放到结束。这不是最佳做法。用户应该有能力选择何时播放视频....不是你。这就给我们带来了武器库中最有用的属性:@controls
。
像@autoplay
这个是布尔属性。如果指定,加载视频时将显示控件。在回放过程中,当用户将鼠标放在视频上时,控件会显示出来,否则会隐藏起来。
清单 2-11 显示了使用@controls
属性的代码。
清单 2-11 。带有@controls 的视频元素
<video src="video/HK_Traffic.mp4" controls></video>
结果如图 2-7 所示,视频底部有一个漂亮的控制条,直到用户点击播放按钮才会播放。
图 2-7 。Chrome 中的@controls 属性将用户控件添加到视频中
@preload
我们需要看的最后一个属性是@preload
。
@preload
取代了早期的属性@autobuffer
,它是一个布尔属性,因此不能区分用户的几种不同的缓冲需求。这就是为什么引入了@preload
属性。它允许 web 开发人员向浏览器提供关于用户缓冲需求的更详细的信息。
@preload
属性是一个除非有非常特殊的需求,否则通常不会使用的属性。因此,以下段落仅适用于高级用户。
当 web 浏览器遇到一个
如果@autoplay
,那么浏览器需要开始下载视频资源,设置视频解码管道,开始解码音视频帧,开始同步显示解码后的音视频。通常,浏览器甚至在下载完整的资源之前就开始显示音频和视频,因为视频资源不可避免地很大,并且下载需要很长时间。因此,当 web 浏览器显示解码的视频时,它可以并行地继续下载视频资源的剩余部分,解码这些帧,缓冲它们以供回放,并在正确的显示时间显示它们。这种方法被称为渐进式下载。
相反,如果在@autoplay
属性,也没有给出@poster
图像,浏览器将只显示视频资源的第一帧。它不需要立即开始渐进式下载,甚至不知道用户是否将开始视频回放。因此,浏览器只需下载设置解码管道、解码第一个视频图像并显示它所需的视频属性和元数据。然后,它将停止下载视频资源,以免用户不想使用的数据耗尽用户的带宽。视频资源的元数据部分通常不超过几千字节。
如果@poster
属性,进一步的带宽优化是可能的。在这种情况下,浏览器可能甚至懒得开始下载任何视频资源数据,可能只是显示@poster
图像。请注意,在这种情况下,浏览器处于信息贫乏状态:它无法发现关于视频资源的任何元数据。特别是,它还不能确定视频的持续时间,或者甚至不能确定它是否能够解码该资源。因此,笔记本电脑或台式机设备上的大多数浏览器仍然会下载元数据和视频的第一帧,而在移动设备上,浏览器通常会避免这种额外的带宽使用。
作为一名 web 开发人员,您可能比 web 浏览器更有资格决定用户可以接受的带宽使用。这个决定也是一个问题,因为视频数据的延迟下载也会导致播放延迟。也许 web 开发人员不想让他们的用户等待解码管道的建立。
因此,@preload
属性为您提供了明确的方法来控制 web 浏览器对
@preload
属性可以采用“无”、“元数据”或“自动”的值
让我们从清单 2-12 中显示的“none”参数开始。
清单 2-12 。带有@ preload“None”的视频元素
<video src="video/HK_Traffic.ogv" poster="img/Traffic.jpg" preload="none" controls></video>
在您不希望用户实际播放媒体资源并希望最小化带宽使用的情况下,您可以选择“无”。一个典型的例子是一个包含许多视频元素的网页——类似于视频画廊——其中每个视频元素都有一个@poster
图像,浏览器不必解码第一个视频帧来表示视频资源。在视频图库的情况下,用户选择回放所有视频的概率相当小。因此,在这种情况下,最好将@preload
属性设置为“none ”,以避免带宽浪费,但是当实际选择播放视频时,可以接受延迟。您也接受某些元数据对于视频实际上是不可用的,并且不能被浏览器显示(例如,视频的持续时间)。
另一种选择是预加载元数据,如清单 2-13 所示。
清单 2-13 。带有@preload“元数据”的视频元素
<video src="video/HK_Traffic.mp4" poster="img/Traffic.jpg" preload="metadata" controls></video>
在需要元数据和可能的第一个视频帧,但不希望浏览器开始渐进式下载的情况下,您将选择“元数据”。例如,这可能是视频画廊的情况,尤其是没有海报属性的情况。在这种情况下,如果要将网页传送到移动设备或通过低带宽连接传送,您可能需要选择“无”,但在高带宽连接上选择“元数据”。此外,如果您要返回到用户之前已经访问过的单个视频的页面,您可能希望选择“元数据”,因为您可能不希望用户再次查看该视频,但是您确实希望显示元数据和第一帧。默认预加载模式是“元数据”。
清单 2-14 显示了最后一个参数,“自动”
清单 2-14 。带有@ preload“Auto”的视频元素
<video src="video/HK_Traffic.webm" poster="img/Traffic.jpg" preload="auto" controls></video>
您将选择“自动”以鼓励浏览器实际开始下载整个资源(即,即使视频资源未设置为@autoplay
,也进行渐进式下载)。特定的浏览器可能不希望这样做(例如,如果它在移动设备上),但是作为 web 开发人员的您以这种方式向浏览器发出信号,您的服务器不会有问题,并且希望以这种方式优化用户体验,尽可能缩短回放等待时间。
在 Firefox 和 Safari 中实现了对@preload
的支持,因此“none”不加载任何内容,“metadata”和“auto”设置视频元素及其元数据和解码管道,并将第一个视频帧设置为标志帧。Chrome 和 Opera 支持它,但你不能在不同的页面上使用不同预加载策略的同一视频,否则它们会冻结。IE 好像还不支持属性,忽略了。
作为建议,一般来说,最好不要干扰浏览器的默认缓冲行为,并避免使用@preload
属性。
在深入研究
音频元素
其中一位作者在举办媒体研讨会时,不可避免地将 audio 称为“金发碧眼的家庭中的红发孩子”。他的意思是,当网页设计者和开发者关注闪亮的新元素时,音频不可避免地被忽视了。这是一个巨大的错误,因为如果使用得当,音频实际上可以“达成协议”如果有一个场景是屏幕一片漆黑,你听到的只有拖拖拉拉的脚步声,恐怖电影就不会令人毛骨悚然了。
此时,我们需要看看 HTML5 中支持的音频编解码器。表 2-1 显示了支持 web 浏览器的主要 HTML5 媒体所支持的编解码器列表。
表 2-1 。主流浏览器原生支持的音频编解码器
您可能已经注意到,并非所有的 web 浏览器都支持单一的编码格式。可以预期,IE 可能会实现对 WAV 的支持,但由于 WAV 是未压缩的,它不是一个非常有效的选项,应该只用于短音频文件。至少你需要提供 Ogg Vorbis 和 MP3 文件来发布到所有的浏览器。
@src
清单 2-15 是一个简单的代码示例,它将在 HTML5 中嵌入一个音频资源。
清单 2-15 。带有@src 的音频元素
<audio src="audio/Shivervein_Razorpalm.wav"></audio>
<audio src="audio/Shivervein_Razorpalm.ogg"></audio>
<audio src="audio/Shivervein_Razorpalm.mp3"></audio>
这是播放音频文件所需的绝对最小代码。由于 audio 元素没有控件,所以<audio>
元素没有可视化表示。这只有在两种情况下才是明智的:要么通过 JavaScript 控制<audio>
(参见第三章)要么将<audio>
设置为自动开始回放,为此它需要一个@autoplay
属性。
@自动播放
要让音频自动启动,你需要添加清单 2-16 中使用的@autoplay
属性。
清单 2-16 。带有@autoplay 的音频元素
<audio src="audio/Shivervein_Razorpalm.mp3" autoplay></audio>
属性是一个布尔属性,所有浏览器都支持,就像元素一样。只要浏览器下载并解码了足够的音频数据,就可以开始播放音频。音频文件将从头到尾播放一次。我们建议您谨慎使用该功能,因为它可能会让用户非常恼火。
注意“节制”和“气人”这两个词。使用它必须有一个有效的理由,如背景音频文件。如果你的理由是“这是一条很酷的赛道”,那么你可能需要重新考虑。
@loop
为了让音频在播放结束后自动重启,你可以使用清单 2-17 中的@loop
属性。
清单 2-17 。带有@autoplay 的音频元素
<audio src="audio/Shivervein_Razorpalm.ogg" autoplay loop></audio>
@loop
属性和@autoplay
属性一起,提供了一种在你的网页上设置连续播放“背景”音乐或声音的方法。不建议这样做;这里提到它只是为了完整。
如果您无意或有意创建了几个这样的元素,它们将同时并在彼此之上播放,但不是同步的。事实上,由于每个
@控件
你可能已经注意到我们对使用@autoplay
和@loop
属性的威胁。如果你计划在你的网页上显示一个音频资源用于用户交互而不是背景娱乐,你需要为你的
清单 2-18 所示。
清单 2-18 。带有@loop 的音频元素
<audio src="audio/Shivervein_Razorpalm.wav" controls></audio>
你会注意到不同浏览器的控件(见图 2-8 )使用了不同的设计。它们的宽度和高度不同,并且不是所有的都显示音频资源的持续时间。由于< audio >元素没有固有的宽度和高度,控件可以在浏览器认为合适的时候呈现。这意味着 Safari 使用 200 px 的宽度;其他的都用 300 px 的宽度。高度从 25 px (Safari,Opera)到 28 px (Firefox)到 30 px (Google Chrome)到 52 px (IE)不等。
图 2-8 。许多浏览器的音频控制
在第三章中,我们展示了如何运行你自己的控件,从而使它们在不同的浏览器中保持一致。
@preload
清单 2-19 的代码片段中所看到的,@preload
属性接受三个不同的值:“无”、“元数据”或“自动”,这些值与它的
清单 2-19 。带有@preload 的音频元素
<audio src="audio/Shivervein_Razorpalm.mp3" controls preload="none"></audio>
在不期望用户实际回放媒体资源并且希望最小化带宽使用的情况下,Web 开发者可以选择“无”。浏览器通常会加载音频资源的设置信息,包括元数据,例如资源的持续时间。如果没有元数据,资源的持续时间将无法显示。因此,选择无预载只有在处理大量音频资源时才有意义。这通常只对显示许多音频资源的网页有用,例如播客的存档。
在您不希望用户实际回放媒体资源并希望最小化带宽使用,但又不想以丢失音频元数据信息为代价的情况下,请使用“元数据”。这通常是 web 浏览器的默认行为,除非该元素被设置为自动播放,但如果浏览器支持,web 开发人员可以通过此属性来加强这种行为。
“自动”通常用于您希望实际回放音频资源并希望鼓励浏览器预缓冲该资源(即,开始逐步下载完整的资源,而不仅仅是设置信息)的情况。通常情况下,<audio>
元素是页面上的主要元素,比如播客页面。使用带有“自动”值的@preload
的目的是抢先使用带宽,通过更快的回放开始来创建更好的用户体验。
大多数浏览器都实现了对@preload
的支持,因此“none”不加载任何内容,“metadata”和“auto”设置音频元素及其元数据和解码管道。
既然您已经熟悉了
源元素
在前一章中,您发现由于浏览器供应商的原因,
显然,对每个视频 types—.mp4 使用单独的
清单 2-20 显示了一个具有多个资源的<视频>元素的例子。
清单 2-20 。具有不同源文件的视频元素
<video poster="img/BabyVulture.png" controls>
<source src="video/Vultures.mp4"/>
<source src="video/Vultures.webm"/>
<source src="video/Vultures.ogv"/>
</video>
对于清单 2-21 中的所示的
清单 2-21 。具有不同源文件的音频元素
<audio controls>
<source src="audio/Shivervein_Razorpalm.mp3"/>
<source src="audio/Shivervein_Razorpalm.ogg"/>
<source src="audio/Shivervein_Razorpalm.wav"/>
</audio>
@src
浏览器按照给定的顺序遍历<source>
元素。它将尝试加载每个媒体资源,第一个成功的将是为
@src
属性的 URL 一样。
比如目前版本的 Opera 就不能播放一个.mp4
视频。在前面的例子中,它会检查.mp4
源并意识到,“不。不能用。”然后它会向下移动直到找到一个。webm—它可以使用并开始播放它。这些文件检查被称为内容类型嗅探。它们消耗了浏览器可以用来加载它实际可以加载的文件的宝贵时间。这就是@type
属性的用武之地。
@类型
元素有一个属性来指定被引用媒体资源的媒体类型。该属性是来自 web 开发者的提示,并且使浏览器更容易确定它是否可以播放所引用的媒体资源。它会跳过那些它确定无法加载的文件,只测试那些它有机会加载的文件。
在清单 2-22 的中显示的@type
属性包含一个带有可选编解码器参数的 MIME 类型。
清单 2-22 。具有不同源文件和@type 属性的视频元素
<video poster="img/BabyVulture.png" controls>
<source src="video/Vultures.mp4" type=’video/mp4’/>
<source src="video/Vultures.webm" type=’video/webm; codecs="vp8, vorbis"’/>
<source src="video/Vultures.ogv" type=’video/ogg; codecs="theora, vorbis"’/>
</video>
请注意,您需要用双引号将多个参数括起来,因此您必须将@type
值放在单引号中,或者对@type
属性值两边的双引号进行转义。您不能在编解码器参数上使用单引号,因为 RFC 4281 ( www.ietf.org/rfc/rfc4281.txt
)指定它们具有特殊的含义。RFC 4281 是在 MIME 类型上定义编解码器参数的规范。
用 WAV、Ogg Vorbis 和 MP3 格式嵌入音频(见清单 2-23 )和 explicit @type
非常相似。
清单 2-23 。具有不同源文件和@type 属性的音频元素
<audio controls>
<source src="audio/Shivervein_Razorpalm.mp3" type="audio/mpeg; codecs=mp3"/>
<source src="audio/Shivervein_Razorpalm.ogg" type="audio/ogg; codecs=vorbis"/>
<source src="audio/Shivervein_Razorpalm.wav" type="audio/wav; codecs=1"/>
</audio>
浏览器将解析@type
属性,并使用它作为提示来确定它们是否可以播放该文件。MIME 类型并不总是提供媒体资源的完整描述。例如,如果提供了“audio/ogg ”,则不清楚这是 Ogg Vorbis、Ogg Flac、Ogg Speex 还是 Ogg Opus 文件。或者如果给出了“音频/mpeg”,则不清楚这将是 MPEG-1 还是 MPEG-2 音频文件层 1、2 还是 3(只有层 3 是 MP3)。还要注意,audio/wav 的编解码器=1 是 PCM。
因此,基于@type
属性的值,浏览器将猜测它是否能够播放媒体资源。它可以做出以下三个决定:
- 它不支持资源类型。
- “可能”:有可能支持该资源类型。
- “可能”:web 浏览器确信它支持该资源类型。
通常,只有在编解码器参数存在的情况下,才能做出“可能”的可靠决定。
浏览器基于它所获得的关于它支持哪些编解码器的信息来做出“可能”的决定。这可以是直接在浏览器中实现的一组固定的编解码器,也可以是从 GStreamer、Media Foundation 或 QuickTime 等底层媒体框架中检索的编解码器列表。
您可以使用下面的代码片段,如清单 2-24 所示,来测试您的浏览器支持哪些 MIME 类型:
清单 2-24 。如何发现支持哪些视频 MIME 类型
<p>Video supports the following MIME types:
<ul>
<script type="text/javascript">
var types = new Array();
types[0] = "video/ogg";
types[1] = ’video/ogg; codecs="theora, vorbis"’;
types[2] = "video/webm";
types[3] = ’video/webm; codecs="vp8, vorbis"’;
types[4] = "video/webm";
types[5] = ’video/webm; codecs="vp9, opus"’;
types[6] = "video/mp4";
types[7] = ’video/mp4; codecs="avc1.42E01E, mp3"’;
types[8] = "video/mp4";
types[9] = ’video/mp4; codecs="avc1.42E01E, mp4a.40.2"’;
// create a video element
var video = document.createElement(’video’);
// test types
for (i=0; i<types.length; i++) {
var support = video.canPlayType(types[i]);
if (support == "") support="no";
document.write("<li><b>"+types[i]+"</b> : "+support+"</li>");
}
</script>
</ul>
</p>
canPlayType()
函数来自 JavaScript API,我们将在第三章中讨论。
当给定不带编解码器参数的 MIME 类型时,浏览器将返回“可能”,当给定带有它们支持的格式的编解码器参数的 MIME 类型时,浏览器将返回“可能”。否则,它们返回空字符串。
如清单 2-25 所示,你可以对音频做同样的测试。
清单 2-25 。如何发现支持哪些音频 MIME 类型
<p>Audio supports the following MIME types:
<ul>
<script type="text/javascript">
var types = new Array();
types[0] = "audio/ogg";
types[1] = "audio/ogg; codecs=vorbis";
types[2] = "audio/mpeg";
types[3] = "audio/mpeg; codecs=mp3";
types[4] = "audio/wav";
types[5] = "audio/wav; codecs=1";
types[6] = "audio/mp4";
types[7] = "audio/mp4; codecs=mp4a.40.2";
types[8] = "audio/x-m4b";
types[9] = "audio/x-m4b; codecs=aac";
types[10] = "audio/x-m4p";
types[11] = "audio/x-m4p; codecs=aac";
types[12] = "audio/aac";
types[13] = "audio/aac; codecs=aac";
types[14] = "audio/x-aac";
types[15] = "audio/x-aac; codecs=aac";
types[16] = "audio/ogg";
types[17] = "audio/ogg; codecs=opus";
// create a audio element
var audio = document.createElement(’audio’);
// test types
for (i=0; i<types.length; i++) {
var support = audio.canPlayType(types[i]);
if (support == "") support="no";
document.write("<li><b>"+types[i]+"</b> : "+support+"</li>");
}
</script>
</ul>
</p>
虽然所有的浏览器都在转向所谓的内容类型嗅探,即通过下载一小部分文件来检查其类型,但旧版本的浏览器仍然依赖于正确提供的文件的 MIME 类型。无论如何,为您的文件提供正确的 MIME 类型是最佳实践。因此,请确保您的 web 服务器为您的文件报告正确的 MIME 类型。通常,web 服务器会检查文件扩展名和 MIME 类型之间的映射(例如,对于 Apache,它是mime.types
文件)。在浏览器页面检查器中,检查 web 浏览器下载的视频文件的“内容类型”HTTP 头以进行确认。
即便如此,我们也不得不承认,我们无法控制哪块屏幕——从智能手机到你家中的平板电视——将被用来观看或收听你的内容。在这种情况下,您可能需要创建各种分辨率的视频文件,一旦浏览器判断出使用的是哪种屏幕,就只能加载其中一种。这就是@media
属性在当今响应式 Web 设计世界中发挥巨大作用的地方。
@type
中的“编解码器”参数是可选的,尽管它有助于浏览器更加确信他们是否能够解码资源,但最终该测试只会在尝试加载资源时出现。因此,我们建议您仅使用不带编解码器参数的 MIME 类型。
@media
元素的存在只是为了帮助浏览器从列表中选择第一个可接受的媒体资源。@type
属性有助于识别浏览器是否支持该媒体格式。@media
属性进一步提供了将所谓的媒体查询与资源相关联。
为了保护您的用户的理智,以适合您的目标设备的分辨率对您的视频进行编码-这将使您能够从同一视频元素中针对从 4K 屏幕大小到移动设备的任何内容。您不需要调整视频元素的宽度和高度。您提供由媒体查询调用的不同文件的副本。您不希望将一个巨大的高清视频文件传送到一个小的移动屏幕上,这将导致浏览器不得不下载比它能够显示的更多的数据,解码比它能够显示的更高的分辨率,然后不得不针对您的实际设备进行降采样。因此,即使是高质量的编码视频,在移动设备上的呈现也比适当大小的视频差。
介质查询的存在是为了指定特定的资源适合特定(范围)的输出设备。例如,"min-width: 400px"
的@media
值指定资源面向至少 400 px 宽度的显示区域。
许多不同的媒体查询是可能的。以下是媒体元素上使用的几个示例:
@media="handheld"
表示媒体资源适用于手持设备。@media="all and (min-device-height:720px)"
表示媒体资源适用于 720 行或更大像素的屏幕。@media="screen and (min-device-width: 100px)"
表示媒体资源适用于 100 行或更高像素的屏幕。
如果您只专注于在台式机、笔记本电脑上使用浏览器,在某些情况下,在平板电脑上使用浏览器,那么这个属性应该没有多大意义。
默认玩家界面
我们通过快速浏览浏览器为音频和视频元素实现的用户界面来结束这次讨论。这些界面设计仍在不断变化——YouTube 大约每六个月推出一个新的播放器界面——在未来一段时间内,网络浏览器很可能会对其音频和视频播放器进行改进并添加功能。
HTML5 音频和视频元素的默认用户界面分为两种不同的类型:可见控件和隐藏在上下文菜单中的控件,通常通过右键单击元素来实现。播放器的设计取决于浏览器,这意味着每个播放器都是不同的。
可见控件
我们已经遇到了主要浏览器的可视控件。在这一节中,我们将从每种浏览器提供的功能方面更深入地了解它们。音频和视频元素之间的控制基本相同。
我们从图 2-9 所示的火狐控件开始。
图 2-9 。Firefox 控件
Firefox 的控件提供了以下功能:
- 播放/暂停切换
- 直接跳转到时间偏移的时间线(查找)
- 时间轴显示回放位置和缓冲进度
- 播放时间/持续时间显示
- 音量滑块
- 音量开/关按钮
- 全屏显示按钮
如果视频没有音轨,则会显示一个带叉线的音量控制器。除了全屏幕按钮之外,Firefox 音频控制具有相同的功能。
Firefox 通过键盘控制使这些控件变得容易访问和使用。
Firefox 的控件还提供以下键盘访问:
- tab:切换到视频元素上或切换出视频元素。在视频元素上,以下键盘快捷键起作用。
- 空格键:在播放和暂停之间切换。
- 左/右箭头:向前/向后播放视频 15 秒。
- command/CTRL+左/右箭头键:将视频向前/向后播放媒体时间长度的 1/10。
- 主页:跳到视频的开头。
- 结束:跳到视频的结尾。
- 上/下箭头:当聚焦在音量按钮上时,增加/减少音量。
不能通过键盘命令进行全屏访问。
Macintosh 键盘的等效键是 PC CTRL 键的 Command 和 PC Alt 键的 option、PC Home 键的功能键左箭头键和 PC End 键的功能键右箭头键。
接下来是苹果的 Safari。图 2-10 显示了 Safari 播放器。
图 2-10 。Safari 中视频元素的控制
Safari 的控制提供以下功能:
- 30 秒跳回按钮
- 播放/暂停切换
- 回放时间显示
- 直接跳转到时间偏移的时间线(查找)
- 时间轴显示回放位置和缓冲进度
- 回放倒计时时间显示
- 带有音量滑块的音量开/关按钮
- 全屏按钮
音频控制与普通视频控制具有相同的功能(以 264 px 的最小宽度显示时),只是它们没有全屏幕按钮。
Safari 似乎还没有为媒体元素提供键盘控制。
接下来我们来看看谷歌 Chrome 的控件如图图 2-11 所示。
图 2-11 。谷歌浏览器中视频和音频元素的控件
Google Chrome 的控件提供了以下功能:
- 播放/暂停切换
- 直接跳转到时间偏移的时间线(查找)
- 时间轴显示回放位置和缓冲进度
- 加载时显示文件持续时间,播放时显示播放时间
- 音量开/关按钮
- 音量滑块
- 全屏按钮
如果视频元素没有音频轨道,音量按钮将呈灰色显示。同样,音频控件与视频控件相同,只是它们缺少全屏按钮。
谷歌浏览器似乎还没有为媒体元素提供键盘控制。
接下来是 Opera,如图 2-12 所示,与 Chrome 非常相似。
图 2-12 。歌剧控制
Opera 的控件提供以下功能:
- 播放/暂停切换
- 直接跳转到时间偏移的时间线(查找)
- 时间轴显示回放位置和缓冲进度
- 加载时显示文件持续时间,播放时显示播放时间
- 音量开/关按钮
- 音量滑块
- 全屏按钮
Opera 还通过键盘控制使这些控件易于访问和使用。
Opera 的控件提供以下键盘访问:
- Tab 键:tab 键切换到播放按钮,以控制音量。
- 当按下播放按钮时:空格键在播放和暂停之间切换。
- 打开音量控制时:空格键在音量开和关之间切换。
- 当在走带控制条上时:向左/向右分别移动到起点/终点。
- 当在走带控制条上时:CTRL-left/right 向后/向前移动视频时长的 1/10。
- 打开音量控制时:上/下箭头增加/减少音量。
我们的最后一个浏览器是 Internet Explore 10 的控件,如图 2-13 所示。
图 2-13 。IE 10 中对视频和音频元素的控制
IE 的控件提供以下功能:
- 播放/暂停切换
- 直接跳转到时间偏移的时间线(查找)
- 时间轴显示回放位置和缓冲进度
- 播放时间和持续时间显示
- 音量滑块
- 音量开/关按钮
- 全屏按钮
IE 还可以通过键盘控制来访问和使用其中的一些控件。
- tab 键:在视频上上下移动
- 空格键:在播放和暂停之间切换
- 向上/向下箭头:增加/减少音量
- 左/右箭头:将视频绕到开头/结尾
IE 控件是半透明的。Firefox 的控件也是半透明的。所有其他浏览器都有纯色控件。
上下文菜单
上下文菜单为用户提供了常用操作的快捷方式。在 Mac 上,当用户右键单击或按住 Control 键单击视频或音频元素时,可以看到上下文菜单。音频和视频的大多数功能是相同的。
Firefox 的上下文菜单图 2-14 ,包含以下项目:
- 切换播放/暂停
- 切换静音/取消静音
- 选择播放速度—适用于较长的视频
- 切换显示/隐藏控件
- 查看视频(在新标签中单独打开视频,类似于查看图像)。
- 复制视频位置(这是视频 URL)。
- 将视频另存为....将视频文件保存在本地。
- 将快照另存为...将当前视频帧保存为本地图像。
- 电子邮件视频...撰写一封正文中包含视频 URL 的电子邮件。
图 2-14 。Firefox 上下文菜单
在 Safari 的例子中,如图 2-15 中的所示的上下文菜单,如果不是极简的话,也有点不同。有些菜单项允许您隐藏控件或选择仅视频全屏渲染,而不是单击控制器上的“进入全屏”按钮。
图 2-15 。Safari 中视频元素的上下文菜单
如图 2-16 中的所示,谷歌浏览器的上下文菜单包含以下功能:
- 切换播放/暂停
- 切换静音/取消静音(当声音可用时)
- 打开/关闭循环
- 切换显示/隐藏控件
- 以一个名称在本地保存视频
- 复制视频位置
- 在新标签中打开视频
- 检查
<video>
元素(这个特性是为想要检查 HTML 代码的开发人员准备的)
图 2-16 。谷歌浏览器中视频元素的上下文菜单
Opera 的上下文菜单,如图 2-17 所示,和其他的非常相似。
图 2-17 。Opera 中视频元素的上下文菜单
最后一个是 Internet Explorer 10 的上下文菜单,如图 2-18 中的所示,它提供了通常的选项,同时还有一个给页面添加书签的机会。
图 2-18 。IE 中视频元素的上下文菜单
发布
至此,我们已经介绍了如何用 HTML5 视频元素编写网页。在前一章中,我们回顾了如何对媒体文件进行编码,以使它们受到支持 HTML5 视频的浏览器的支持。现在,我们通过了解这些文件如何从“这里”(服务器)移动到“那里”(浏览器),来看看如何实际发布视频及其网页,从而结束这个循环。在这之后,我们有了所有的工具来制作带有视频和音频的 HTML5 网页。
在这里,我们将仅仅看看如何通过一个普通的网络服务器发布你的媒体文件集。这是最基本的发布手段。
记住,你必须创建至少一个 MPEG-4 版本的视频文件和一个 WebM(或 Ogg Theora)版本的视频文件,这样你才能在所有浏览器上使用。对于音频文件,你需要 MP3 和 Ogg Vorbis 版本。此外,如果您针对高分辨率和低分辨率的视频,您最好使用不同尺寸的不同视频文件版本,并使用媒体查询来区分它们。
清单 2-26 显示了一个视频标记的例子。
清单 2-26 。支持多种浏览器和视频元素大小的视频元素
<video poster="img/BabyVulture.png" controls>
<source src="video/Vultures.mp4" media="screen and (min-width:800px)"
type=’video/mp4’ />
<source src="video/Vultures-small.mp4" media="screen and (max-width:799px)"
type=’video/mp4’ />
<source src="video/Vultures.webm" media="screen and (min-width:800px)"
type=’video/webm’ />
<source src="video/Vultures-small.webm" media="screen and (max-width:799px)"
type=’video/webm’ />
</video>
您应该将 WebM 和 MP4 文件复制到 web 服务器上适合您的 web 应用/网页的目录中。web 服务器是一种软件,它可以使用 HTTP(超文本传输协议)并通过计算机网络传送 web 内容。有几种开源 web 服务器,最流行的是 Apache 和 Nginx。
通过 HTTP 提供 HTML5 视频是 web 浏览器支持 HTML5 视频元素的标准方式。在选择服务器软件时,请确保它支持 HTTP 1.1 字节范围请求。大多数常见的 web 服务器,包括 Apache 和 Nginx,都会支持它,但偶尔您仍然可以找到一个不支持或不能正常工作的服务器。
支持 HTTP 字节范围请求非常重要,因为这是浏览器从 web 服务器接收 HTML5 媒体资源的标准方式,这称为渐进式下载。字节范围请求的重要性是双重的:首先,它允许以小块的形式传输媒体文件,这使浏览器能够开始回放,而不必等待下载完整的文件。其次,也是更重要的一点,它允许从文件中的任何地方获取这些块,而不是等待接收到所有以前的数据。这尤其允许寻找视频的随机位置并从那里开始回放。
这是怎么回事?媒体文件解码是一件复杂的事情。媒体文件包含设置音频和视频解码管道所需的信息(参见第一章)。该信息通常存储在文件的开头。音频和视频数据以多路复用的方式提供(即,一个视频位,然后是相关的音频位,然后是下一个视频位,等等)。).为了分隔这些数据位,并获得回放时间的映射,媒体文件通常包含一个索引表。在 MP4 文件中,该索引位于文件的末尾。如果没有收到该文件,浏览器将无法开始解码和播放。因此,如果没有字节范围请求,我们就必须等待回放,直到下载完完整的文件。
在设置元数据并获得索引表后,浏览器通常只对整个媒体资源发出一次请求,并在数据到达时开始播放。对于很长的文件,当下载在当前播放位置之前很远,并且用户已经停止观看视频时,浏览器可能会暂停下载。允许浏览器暂停下载的条件是 web 服务器支持字节范围请求,因此当回放位置再次接近缓冲位置时,浏览器可以恢复下载。这将节省带宽的使用,特别是超过几分钟的视频。
所有接收到的数据都将缓存在浏览器中。当用户搜索且搜索时间尚未缓冲时,浏览器将停止下载并请求从用户搜索到的给定时间偏移开始的字节范围。
我们刚刚描述的是由浏览器在后台执行的。这是用户永远不会真正注意到的,但对你来说理解是很重要的。
当设置您的 web 服务器来托管 HTML5 音频和视频时,您不必做任何特殊的事情。对于执行有限内容嗅探的旧浏览器,您需要确保媒体资源使用正确的 MIME 类型。您的 web 服务器可能需要手动将以下一些媒体类型添加到mime.types
安装文件中:
audio/ogg ogg oga
audio/webm webm
video/ogg ogv
video/webm webm
audio/mp4 mp4a
audio/mpeg mp3
video/mp4 mp4
要发布 HTML 音频和视频,您只需将文件复制到 web 服务器上的目录结构中,并通过进行浏览器测试来确保资源位置和超链接都是正确的,并且可以正常工作。
下面的文本块显示了 web 服务器上目录结构的示例布局(/var/www 是 Linux 服务器上 Apache 托管的网站的典型根目录)。
/var/www/ - the Web server root directory, exposed e.g. as www.example.net/
/var/www/page.html – the Web page with a video element
/var/www/video/video.webm and
/var/www/video/video.mp4 – the video in two formats
/var/www/thumbs/video.png – the video’s thumbnail
/var/www/audio/audio.ogg and
/var/www/audio/audio.mp3 – the compressed audio in two formats
这基本上说的是在www.example.net/page.html
的网页将包括一个带有的视频video/video.mp4
的视频。
要测试您的 web 服务器是否支持 HTTP 1.1 字节范围请求,您可以通过浏览器开发工具检查 HTTP 头,或者尝试从以下命令行下载视频文件,例如,使用 curl 等 URL 加载工具:
$ curl -I http://www.example.net/video/video.webm
您正在寻找包含“接受范围:字节”的响应标题行如果存在,你就没事。否则,您应该使用不同的 web 服务器。
现在你知道了如何添加媒体、控制媒体和服务媒体,让我们看看这个等式的最后一部分——它是如何通过 CSS3 呈现给用户的。
CSS 和视频
正如典型的 web 设计和开发的演变一样,这些年来事情已经发生了变化。最大的变化之一是转向响应式网页设计,承认我们无法控制用来查看内容的屏幕/视窗。这导致了使用 CSS 来控制视频的呈现,而不是内联样式,从而将内容及其呈现完全嵌入到 HTML 文档的主体中。
我们对 CSS 的假设是你对这项技术有一个基本的了解。
随着向响应式世界的转变和向 HTML5 的转变,CSS 中也有一个重要的变化正在进行中。一个新的标准——CSS level 3 或 CSS3——正在开发中,它提供了许多新的和改进的功能,包括改进的布局、形状、扩展的媒体查询以及使用语音合成呈现文本的改进。其中许多可以应用于 HTML5 视频,在这一节中,我们将简要看看具体的例子。
为了简单起见,我们将使用内联样式来演示技术,而不是使用外部样式表,这被认为是最佳实践。
我们从基本的 CSS 盒子模型开始,只是给浏览器中的
清单 2-27 。CSS 使你的视频看起来更好
video{
width: 80%;
padding: 15px;
margin: 0px;
border: 5px solid black;
border-radius: 15px;
box-shadow: 10px 10px 5px gray;
box-sizing: border-box;
}
在浏览器中查看时,图 2-19 是用户看到的。
图 2-19 。CSS3 造型将注意力吸引到视频上
不仅仅是
以下是用于样式框的典型 CSS 属性:
- 宽度和高度:与 HTML 元素上的
@width
和@height
属性一样,您可以相对(百分比或 em)或绝对(px)缩放框。 - 填充:框中内容周围的空间,它共享内容的背景。
- border:内容周围的边框,包括填充空间。
- 边距:框外部周围的透明空间。
CSS3 引入了许多新的样式方法,比如框上圆角的 border-radius,使用图像作为边框的 border-image,下拉阴影的 border-shadow,以及指定尺寸计算与框的哪些部分相关的框大小。
然而,CSS 不仅仅做样式。它还负责框在页面上的精确定位。首先通过识别盒子的默认显示位置,然后用“位置”和“浮动”属性调整它的位置
有三种不同的基本显示框类型。
- 块框(display: block):单独放置在一行上的框——想想文本段落以及它们如何放置在彼此之下。
- 内联框(display: inline):按正常流程一行一行放置的框,通常在块框内——想想文本句子的字符以及它们是如何流动的。
- 不可见框(display: none):页面上不可见的框(例如,没有
@controls
属性的音频元素)。
所有其他显示框类型都是这三种基本类型的衍生物。不仅如此,您还可以通过更改盒子的“显示”属性来影响盒子的类型。
默认情况下,音频和视频具有嵌入式框类型。这意味着它们的行为基本上就像段落中的一个字符,并在相邻的行内框元素和父块元素的上下文中移动。
如果我们从清单 2-28 所示的基本代码开始,我们可以在这个 50%宽的视频例子中看到这一点。
清单 2-28 。视频元素是内嵌元素
<div class=".container">
<h2>The basic code:</h2>
A sentence before the video element.
<video src ="video/Vultures.mp4" controls></video>
A sentence after the video element.
</div>
图 2-20 显示了结果。注意视频上方和下方句子的位置。这是正常模式。
图 2-20 。视频处于正常的内嵌模式
要让视频出现在它自己的段落(行)上,你可以在每个句子周围放一个
或
,这样视频就在它自己的匿名块中了。您还可以在 video 元素上放置一个“display:block”规则,将它变成一个“block”元素,并将每个元素前后的句子放在它们自己的匿名块中。
清单 2-29 用以下标记显示了这个过程:
清单 2-29 。让视频在自己的匿名块中脱颖而出
<p>A sentence before the video element.</p>
<video poster="img/BabyVulture.jpg" controls>
<source src="video/Vultures.mp4" type=’video/mp4’/>
<source src="video/Vultures.webm" type=’video/webm’/>
<source src="video/Vultures.ogv" type=’video/ogg’/>
</video>
<p>A sentence after the video element.</p>
当您进行浏览器测试时,内容移动到水平内容对齐,这是一种典型的内嵌框类型,如图 2-21 所示。
图 2-21 。视频在它自己的(匿名)块中
如果我们让视频“显示:无”,它将从渲染中消失。相反,我们可以用“可见性:隐藏”使它不可见。这将保持嵌入式视频框在原来的位置,但使它完全透明。请注意,视频仍将预加载,因此您可能希望使用@preload="none"
来避免这种情况。
一旦完成了元素在页面上的默认定位,也就是说,浏览器已经根据它们的“显示”属性将所有元素放置在它们的“正常”显示位置,浏览器将检查“位置”和“浮动”属性。
一种更常见的技术是将视频放在文本块中,并让文本围绕它流动。这是使用 float 属性完成的,可以设置为 left 或 right,如清单 2-30 中的代码所示。
清单 2-30 。将视频在其父块中向右浮动
video{
float: right;
width: 30%;
padding: 15px;
margin: 10px;
border: 5px solid black;
border-radius: 15px;
box-shadow: 10px 10px 5px gray;
box-sizing: border-box;
}
结果如图 2-22 中的所示,文本环绕了一个<video>
元素。
图 2-22 。使用 float:right 属性进行文本换行
既然我们已经了解了 CSS 如何用于定位<video>
元素,那么让我们来看看 CSS 属性如何改变它在页面上的“外观”。
CSS 基本属性
有许多 CSS 属性可以应用于 HTML5 媒体元素,但是,为了节省空间和时间,让我们看看下面两个可以应用的属性:
- 不透明:视频是半透明的;和
- 渐变:给视频添加颜色效果。
不透明属性已经存在很长时间了,但是直到它成为官方的 CSS3 阵容时才成为跨浏览器的标准。不透明度定义为 0.0 到 1.0 之间的任何值,其中 0.0 表示元素完全透明,1.0 表示元素完全不透明。
清单 2-31 展示了应用于一个视频的 60%不透明度的代码,以及使用“位置”、“顶部”和“左侧”属性将视频移动到之前渲染的图像的顶部。
清单 2-31 。显示半透明的视频
video{
opacity: 0.6;
width: 50%;
padding: 15px;
margin: 0px;
border: 5px solid black;
border-radius: 15px;
box-shadow: 10px 10px 5px gray;
box-sizing: border-box;
position: relative;
top: -440px;
left: 126px;
background-color: white;
}
...
<img src="img/BabyVulture.jpg"/>
<video poster="img/BabyVulture.jpg" controls>
<source src="video/Vultures.mp4" type=’video/mp4’/>
<source src="video/Vultures.webm" type=’video/webm’/>
<source src="video/Vultures.ogv" type=’video/ogg’/>
</video>
正如你在图 2-23 中看到的,视频下方的背景图像正在透过。
图 2-23 。视频的不透明度值为 0.5
对视频应用渐变是一个非常有趣的挑战。对于图像,人们可以将图像放入背景中,并在其上叠加一个渐变。我们想复制这个视频,但不能使用 CSS 将视频放在背景中。因此,我们必须在视频顶部渲染一个渐变<div>
。CSS3 规范指定了两个函数来创建渐变:线性渐变()和径向渐变()。
在我们的例子中(见清单 2-32 )我们想为视频应用一个线性渐变。为了实现这一点,我们简单地创建了一个<div>
来保存从透明到纯白的渐变。然后,我们使用相对定位将渐变叠加到视频元素上。
清单 2-32 。在视频顶部显示渐变
<style type= "text/css">
video{
width: 400px;
height: 225px;
}
#gradient{
position: relative;
width: 400px;
height: 225px;
top: -225px;
background: linear-gradient(rgba(255,255,255,0), white);
pointer-events: none;
}
</style>
...
<video src ="video/Vultures.mp4" controls></video>
<div id="gradient"></div>
这里的关键是背景属性。该属性需要两个值:开始颜色和结束颜色。在这种情况下,我们在渐变底部从透明的白色移动到不透明的白色。不透明度的变化给出了渐变遮罩在视频上的效果。我们使用供应商前缀来确保渐变在所有浏览器中都有效。图 2-24 显示了最终结果。
图 2-24 。渐变被放置在视频上
这个功能的一个副作用是,正如你所看到的,视频实际上隐藏在渐变<div>
的下面。这意味着控件对用户交互是隐藏的。您必须将渐变<div>
上的 CSS 指针事件属性设置为“none ”,以将指针事件重定向到视频元素。您也可以将视频设置为自动播放,并删除@controls
属性,但这样用户就不能与视频互动了。您最后的办法是创建自己的 JavaScript 控件。我们将在下一章教授如何做到这一点。
播放背景视频
这种技术越来越普遍。你到达一个站点,在页面的内容下面有一个全屏的视频在播放。尽管有许多相当复杂的技术来实现这一点,但这很容易做到。诀窍就在 CSS 中。可用的 CSS 属性之一是 z 位置。正数将带有视频的
放在所有内容的前面,负数将其推到所有内容的下面。
图 2-25 。全屏背景视频
如图 2-25 所示,书籍作者的名字显示在后台播放的视频上。
由此你可以推测,如清单 2-33 所示,通过在下面的代码块中使用大的负 z 索引号,视频被简单地“滑动”到内容下面:
清单 2-33 。使用 CSS z-index 属性在背景中定位视频
#video_bkgrnd{
position: absolute;
bottom:0px;
right:0px;
min-width:100%;
min-height:100%;
width:auto;
height:auto;
z-index: -1000;
overflow:hidden;
}
<video id="video_bkgrnd" poster ="img/BabyVultures.jpg" muted autoplay loop >
<source src="video/HK_Traffic.mp4" type="video/mp4">
<source src="video/HK_Traffic.webm" type="video/webm">
<source src="video/HK_Traffic.ogv" type="video/ogg">
<p>This browser can’t show HTML5 video.</p>
</video>
显然,为这类事情提供控件和音频是不可能的,因为我们无法控制用户在页面上停留多长时间,视频应该循环播放,这就是为什么它在清单 2-33 中有一个@loop
属性。
虽然这种技术属于“酷”的范畴,但是你需要非常小心地使用它。
首先,视频的物理尺寸很好地限制了它在桌面上的使用。即使这样,这种技术也最适合于循环播放较短(大约 10-30 秒)且文件大小不大的视频。例如,将视频的颜色深度降低到灰度或 8 位(256 色)将对最终的文件大小产生重大影响。此外,视频需要尽可能有效地压缩,同时仍然能够跨设备和屏幕缩放。根据经验,尽量将文件大小保持在 5 mb 以下,500k 是最理想的。
理想情况下,视频应该显示一个占位符图像,以适应不支持 HTML5 的浏览器。此占位符图像也将用作移动设备的背景,因为大多数手机和平板电脑不支持自动播放。
CSS 2D 变换
CSS3 规范的一个非常好的特性是使用了变换,它允许你在 CSS 盒子中重新定位视频。以下是可用的转换函数:
- 矩阵:描述盒子上的线性变换。
- rotate,rotateX,rotateY:描述如何旋转盒子。
- scale,scaleX,scaleY:描述应该如何旋转长方体的 x 轴和 y 轴。
- skew,skewX,skewY:描述 x 轴和 y 轴应该如何根据角度倾斜。
- translate,translateX,translateY:描述盒子的水平或垂直重定位。
在本例中,我们将视频旋转-30 度。清单 2-34 中的代码实现了这一点。
清单 2-34 。显示-30 度倾斜的视频
video {
width: 50%;
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
position: relative;
left: 100px;
}
<body>
<video src="media/HK_Traffic_1.mp4" controls/>
</body>
在本例中,使用 transform 属性简单地将视频向左旋转 30 度。我们使用了–WebKit 前缀使其在 Chrome、Safari 和 Opera 中工作,这些浏览器正在移除这个前缀。
图 2-26 显示了最终结果。
图 2-26 。应用于视频的旋转变换
CSS 动画〔??〕
CSS3 引入了动画,允许您在不编写 JavaScript 的情况下让对象运动。
在讨论这个规范时忽略 JavaScript 并不是没有争议的,因为 JavaScript 已经允许相同的效果。然而,一个关键的网络原则赢得了胜利。这个原则是我们在本章一直强调的:HTML 管理内容,CSS 处理显示,JavaScript 处理交互性。
动画实际上只不过是 CSS 过渡的延伸。它们有一个开始状态和一个结束状态,物体在给定的时间内从“这里”移动到“那里”。您还可以通过使用@keyframes
选择器向动作添加一系列中间状态。
清单 2-35 显示了从左到右再从左到右移动视频的代码。
清单 2-35 。视频元素在 0 和 600 像素标记之间移动两次
@keyframes moveIt {
0% {transform: translateX(0);}
100% {transform: translateX(600px);}
}
video{
width: 200px;
animation-name: moveIt;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-iteration-count: 4;
animation-fill-mode: forwards;
animation-direction: alternate;
}
我们省略了-webkit 前缀,这对于除 IE 和 Firefox 之外的所有浏览器都是必需的。图 2-27 显示了动画视频元素的初始状态和中间状态。
图 2-27 。动画视频元素的两种状态
从代码中可以看出,代码实际上有两部分。这些属性以名称 moveIt 开始,它链接到了@keyframes
规则。@keyframes
规则定义了动画步进点。视频在屏幕上移动超过两秒钟,alternate 属性只是反转动画。您还应该特别注意动画-时间-功能属性,该属性将缓动应用于运动。
@keyframes
规则设置 X 轴上运动距离的限制。
我们只是简单介绍了 CSS 对视频元素的使用。尤其是 CSS3,它有更多可以应用于 CSS 盒子的特性。你可以开发的视觉效果几乎是无限的。在之前的版本中,我们展示了旋转的 3D 立方体,每一面都有视频。
摘要
正如你在本章中发现的,处理 HTML5 视频不仅仅是简单地将它放在标签之间。我们覆盖了
-
对
元素的彻底审查 -
回顾可应用于
元素的属性 -
如何使用
-
对媒体如何从服务器转移到网页的全面回顾
-
其中 CSS 适合设计和开发过程,包括 CSS 转换、CSS 过渡和 CSS 动画的使用
这是一个很大的范围,但它是你需要知道的成功添加音频或视频到 HTML5 页面。在下一章中,我们将深入探讨如何通过使用 JavaScript API 来实现媒体交互。我们在那里见。
三、JavaScript API
随着 HTML5 的兴起,使用 JavaScript 来扩展网页上各种元素的功能也相应增加了。事实上,越来越少看到 HTML5 页面在页眉或文档的其他地方不包含指向 JavaScript 文档或库的链接。在处理 HTML5 视频或音频时也是如此。
JavaScript 是 web 浏览器中用于客户端编程任务的脚本语言。web 浏览器中使用的 JavaScript 是标准化 ECMAScript ( www.ecma-international.org/publications/standards/Ecma-262.htm
)编程语言的一种方言。JavaScript 程序可以为网页执行从简单到复杂的各种任务,从操作简单的用户界面功能到执行复杂的图像分析程序。JavaScript 克服了 HTML 和 CSS 的限制,提供了充分的灵活性,可以通过编程方式更改文档对象模型(DOM) 中的任何内容。
由于可以在 web 浏览器中关闭 JavaScript 支持,所以解释 HTML 和 CSS 提供了什么而无需进一步编写脚本是很重要的。然而,将 JavaScript 加入其中,会将这些 web 技术转变为应用开发的强大平台,我们将会看到媒体元素能做出什么贡献。
在 HTML5 和 CSS3 开发之前的几年里,JavaScript 被用来为 Web 带来许多新特性。在许多人分享共同需求的地方,JavaScript 库和框架如 jQuery、YUI、Dojo 或 MooTools 被创造出来。许多 web 开发人员使用这些框架来简化 web 内容的开发。使用这些库的经验反过来又推动了 HTML5 的几个新特性的引入。因此,我们现在看到 HTML5 中的许多早期框架的功能,以及新框架的发展,使得开发 HTML5 web 应用变得更加容易。
由于 JavaScript 在 web 浏览器中执行,因此它只使用用户机器的资源,而不必与 web 服务器交互来更改网页。这对于处理任何类型的用户输入都特别有用,并且使得网页对用户的响应更快,因为网络上的任何交换都不会降低网页的响应速度。因此,在不需要将用户信息保存在服务器上的情况下,使用 JavaScript 最为合适。例如,游戏可以以这样的方式编写,即游戏的逻辑在 web 浏览器中以 JavaScript 执行,并且只有用户获得的高分才需要与 web 服务器进行交互。这当然假设游戏所需的所有资源——图像、音频等。—已经取回。
JavaScript 通过 DOM 与 HTML 接口。DOM 是一个分层的对象结构,它包含了一个 web 页面的所有元素以及它们的属性值和访问函数。它表示 HTML 文档的层次结构,并允许 JavaScript 访问 HTML 对象。webIDL,Web 接口定义语言(www.w3.org/TR/WebIDL/
),已经被创建来允许对象暴露给 JavaScript 和 Web 浏览器实现的接口的规范。
原因很简单。HTML 仅仅是一种在页面上放置对象的标记语言。这些对象及其属性由浏览器保存,并通过编程接口公开。IDL 实际上是一种语言,用来描述浏览器持有的这些数据结构,并使 JavaScript 可以对它们进行操作。
WebIDL 是专门为
- 提供 HTML 中经常使用的便利结构,例如 DOM 节点集合、标记列表或名称-值对列表。
- 公开 HTML 元素的内容属性,并允许获取和设置它们的值。
- 解释 HTML 元素属性映射到什么 JavaScript 类型以及如何映射。
- 解释在读取属性值时以及将它们提交给 JavaScript 之前必须对属性值进行的转换(例如,统一资源定位符从相对 URL 到绝对 URL 的解析)。
- 列出元素可能经历的状态以及可能对它们执行的事件。
- 与 HTML 文档的浏览上下文相关。
理解在第二章中介绍的 HTML5 元素的属性和在 DOM 中为元素公开的属性之间的区别是很重要的。前者被称为内容属性,后者被称为 IDL 属性。理解两者区别的最简单的方法是,HTML 标记中使用的属性是内容属性,它们的值仅仅是字符串。JavaScript 对象中与它们同名的兄弟是 IDL 属性,包含特定 JavaScript 类型的值。例如,字符串值为“1.0”的内容属性作为浮点值为 1.0 的 IDL 属性向 JavaScript 公开。
为了简化对媒体元素的 JavaScript API 的解释,我们将分别查看从内容属性和纯 IDL 属性创建的 IDL 属性。这将有助于更好地理解哪些属性是从 HTML 传入 JavaScript 的,哪些属性是为了允许脚本控制和操作而创建的。
出于本章的目的,我们假设您对 JavaScript 有基本的了解,并且能够遵循 WebIDL 规范。与阅读许多面向对象编程语言中的类定义相比,阅读 WebIDL 相当简单。我们将解释 HTML5 媒体元素为 WebIDL 中的 JavaScript 提供的新引入的接口,并提供一些关于通过使用这些接口 JavaScript 可以实现什么的示例。我们从内容属性开始。
反射内容属性
我们已经在第二章中熟悉了 HTML5 媒体元素的内容属性。它们都直接映射到媒体元素的 IDL 接口。HTML 规范将这种映射称为 IDL 属性中内容属性的“反映”。你可以在媒体元素 JavaScript 对象中看到来自第二章的内容属性的反映。
interface HTMLMediaElement : HTMLElement {
attribute DOMString src;
attribute DOMString crossOrigin;
attribute DOMString preload;
attribute boolean autoplay;
attribute boolean loop;
attribute boolean controls;
attribute boolean defaultMuted;
};
interface HTMLAudioElement : HTMLMediaElement {};
interface HTMLVideoElement : HTMLMediaElement {
attribute unsigned long width;
attribute unsigned long height;
attribute DOMString poster;
};
interface HTMLSourceElement : HTMLElement {
attribute DOMString src;
attribute DOMString type;
attribute DOMString media;
};
如果你仔细查看列表,第二章中出现的每个元素和属性都会出现。所有这些属性都可以在 JavaScript 中读取(也称为“get”)和设置。您可以在前面提到的代码块中看到内容属性值被转换成的 JavaScript 类型。
那么这是如何在 HTML5 文档上工作的呢?代码示例将在http://html5videoguide.net/
发布。清单 3-1 中的代码展示了如何通过 IDL 属性设置和获取一些内容属性的例子:
清单 3-1 。感受媒体元素的内容属性
<video controls autoplay>
<source src="video/HK_Traffic.mp4" type="video/mp4">
<source src="video/HK_Traffic.webm" type= "video/webm">
</video>
<script type="text/javascript">
videos = document.getElementsByTagName("video");
video = videos[0];
video.controls = false;
video.width = ’400’;
alert(video.autoplay);
</script>
我们首先添加一个video
元素,然后加入控件和自动播放参数。从那里我们简单地添加指向视频的source
属性,我们就可以开始了。然而,某些视频属性的“工作方式”现在已经脱离了 HTML,转而交给了代码块底部的
在我们的页面中,第一个片段的最终目的地如清单 3-19a 所示。
清单 3-19a 。使用 JWPlayer
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JW Player</title>
<script src="[`jwpsrv.com/library/V3LeVgEZEeW7FhJtO5t17w.js`](http://jwpsrv.com/library/V3LeVgEZEeW7FhJtO5t17w.js)"></script>
</head>
您可能已经注意到,当您将播放器指向视频时,它只指向文件的.mp4
版本。很明显,有问题。如果你想让视频在 Opera 中播放,你必须提供一个.webm
版本的文件。一旦你将代码粘贴到主体中,下面是你如何修复它。
- 在代码中。将这一行:
file: ’
http://html5videoguide.net/BeginningHTML5Video/CH3/video/Vultures.mp4
’
复制到你的剪贴板上。 - 将剪贴板的内容粘贴到播放器代码中的
.mp4
行之后,并将文件扩展名改为.webm
,如清单 3-19b 所示。
清单 3-19b 。使用 JWPlayer
<div id=’ playerXYalbMUtktfx ’></div>
<script type=’text/javascript’>
jwplayer(playerXYalbMUtktfx).setup({
file: ’video/Vultures.mp4’,
file: ’video/Vultures.webm’,
image: ’img/BabyVulture.jpg’,
title: ’JW Player Exercise’,
width: ’100%’,
aspectratio: ’16:9’
});
</script>
当我们在 Opera 中进行浏览器测试时,结果就是你在图 3-23 中看到的。
图 3-23 。那个。webm 版出演歌剧
使用视频。JS
如果一个开源的、易于使用的、完全可定制的播放器是你正在寻找的,那么你可能想试试 Video JS。这个播放器是由 Zencoder 的人制作的,旨在吸引从初学者到代码战士的所有 web 技能水平。
尽管这个播放器有很多内幕,我们将只展示一个使用这个播放器的非常简单的例子。由于其开源的性质,视频。通过在www.videojs.com
下载源文件并将其添加到您的 web 目录中,或者通过在http://designer.videojs.com
修改 LESS 或 CSS 文件来创建您自己的皮肤,可以很容易地定制 JS。如果你真的想看视频。JS API,你可以在https://github.com/videojs/video.js/blob/stable/docs/api/vjs.Player.md
找到文档。
以下是如何使用 Video JS 播放视频:
-
Open a browser and navigate to
www.videojs.com
. The home page, shown in Figure 3-24, is where the “magic” happens.图 3-24 。视频。JS 主页是你唯一的一站
您将创建的播放器位于页面中间。播放按钮位于左上角,它的存在是有原因的:不让它碍事。“嵌入此播放器”按钮旁边的滑块允许您控制此按钮和视频控件的大小。
底部的三个彩色芯片允许您自定义视频控件的颜色。从左到右,以下是这些颜色的影响:
- 灰片:改变控件中使用的图标的颜色,包括大的覆盖按钮。
- 蓝筹:改变进度条和音量条的背景色。
- Black Chip:更改播放器控件的背景色。
这里要小心,因为颜色包含在颜色选择器中,单击色卡即可访问该选择器。这里没有办法实际输入一个十六进制或 RGBA 颜色值。
注意如果你做了错误的颜色选择,你可以通过点击浏览器中的重新加载按钮来重置为默认颜色。
-
Click the Embed This Player button to open a window (see Figure 3-25) that presents you with a template for the embed code.
图 3-25 。Video.js 嵌入代码
-
复制区域的代码并粘贴到你的 HTML 页面头部。请注意,对播放器设计的任何更改都会导致额外的 CSS 被添加到元素中。
-
Return to the browser and select the code found in the area. Paste it into the div on the HTML page where the video is to be located.
代码准备就绪后,您需要对
元素的内容做一些修改。在我们的案例中,我们: -
将宽度和高度属性值更改为视频的值。
-
更改了海报值以链接到海报图像的位置。
-
Changed the source element to link to the
.mp4
and.webm
versions of the video.结果代码如清单 3-20 所示。
清单 3-20 。嵌入 video.js 播放器
<head> <link href="http://vjs.zencdn.net/4.6/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/4.6/video.js"></script> </head> <body> <video id="MY_VIDEO_1" class="video-js vjs-default-skin" controls preload="auto" width="683" height="432" poster="img/BabyVulture.jpg" data-setup="{}"> <source src="video/Vultures.mp4" type=’video/mp4’/> <source src="video/Vultures.webm" type=’video/webm’/> <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p> </video> </body>
-
-
保存 HTML 文件并在浏览器中打开它。海报框出现,当您点击播放按钮时,视频(参见图 3-26 )开始播放。
图 3-26 。视频在视频 JS 播放器中播放
提示如果您想将播放按钮移动到视频的中间,将下面的类—
vjs-big-play-centered
—添加到视频元素中。
您可能已经注意到了 JWPlayer 和 Video.js 之间的一个奇怪的区别:Video.js 使用一个原生 HTML5
元素。
自定义播放器
有时,各种浏览器或第三方播放器使用的播放器不符合项目的设计目标。这可能是由于品牌,功能集,甚至只是个人喜好。在这种情况下,构建一个定制的视频播放器是唯一合理的选择。
这是 JavaScript API 的使用真正闪光的地方。它最重要的用例是“滚动你自己的”控件,其样式在所有浏览器上都是一样的。由于这是一个如此常见的用例,我们为您提供了一个如何做到这一点的示例。它包括 HTML 代码的框架、一些 CSS 和控制它所需的 JavaScript 调用。
我们的计划是构建如图 3-27 所示的播放器。你可能会发现我们选择的控件和它们的布局有点不寻常。这是因为我们决定构建一个针对盲人或视力受损用户的播放器,提供他们可能需要的主要按钮。为了更好地使用,这些按钮被故意保持为大的、彩色编码的,并且不在视频中。您可以使用空格键轻松地切换并激活它们。
图 3-27 。使用 JavaScript API 的自定义可访问视频播放器
请注意,在 Safari 中,默认情况下,“tab”是禁用的,不能作为跨页面元素的导航方式,您必须使用 option-tab 来导航。要打开“tab”导航,请打开您的首选项并选中“首选项高级
按 tab 突出显示页面上的每个项目。”
播放器由几个界面元素组成。它有一个进度显示(视频下面的栏),后面显示播放的秒数和视频持续时间。下面是一组按钮。这些按钮允许视频开始播放(播放/暂停切换)、倒退 5 秒、停止播放(并重置为文件开始)、增加 10 个百分点的音量、降低 10 个百分点的音量以及静音/取消静音切换。视频右侧是音量显示,静音时显示为灰色,音量水平以条形高度的百分比显示。
注意如果你真的决定构建自己的视频播放器,做好你的研究,调查已经这样做的网站。请特别注意所使用的控件元素、它们在界面中的位置以及它们的大小。如果你的团队中有一个用户体验专家,当涉及到播放器中各种控制元素的设计和放置时,他或她的输入将是无价的。
我们通过提供 HTML 代码的框架开始实现这个播放器,如清单 3-21a 所示。
清单 3-21a 。自定义播放器的 HTML 代码
<div id="player">
<div id="video">
<video width="400" height="225" poster="img/BabyVulture.jpg">
<source src="video/Vultures.mp4" type="video/mp4"/>
<source src="video/Vultures.webm" type="video/webm"/>
</video>
<div id="positionview">
<div id="transportbar"><div id="position"></div></div>
<div id="time">
<span id="curTime">00:00</span>/<span id="duration">00:00</span>
</div>
</div>
</div>
<div id="volumecontrol">
<div id="volumebar"><div id="volume"></div></div>
<div id="vol"></div>
</div>
<div style="clear: both;"></div>
<div id="controls">
<div><input id="play" type="image" src="img/0.gif" alt="Play"></div>
<div><input id="repeat" type="image" src="img/0.gif" alt="Repeat"></div>
<div><input id="stop" type="image" src="img/0.gif" alt="Stop"></div>
<div><input id="louder" type="image" src="img/0.gif" alt="Louder"></div>
<div><input id="quieter" type="image" src="img/0.gif" alt="Quieter"></div>
<div><input id="mute" type="image" src="img/0.gif" alt="Mute"></div>
</div>
</div>
一个 id 为 player 的
封装了代码,以便我们稍后可以给它一个样式,将其显示为一个实体。在 #player div 里面有三个主 div: #video, #volumecontrol
和#controls
。#video
部分包含视频元素以及走带控制条和时间显示。#volumecontrol
包含音量条和音量显示。#controls
包含了所有的按钮。
注意,视频元素没有@controls
属性,原因很明显,我们有自己的控件。此外,请注意代表按钮的 <输入> 元素是如何通过将它们设为“image
”类型并赋予它们一个@alt
属性值而变得可访问的。最佳做法是为图像输入元素提供替代文本,以便视力有障碍的用户可以访问它们。由于我们将在 CSS 中提供实际的按钮,我们必须将一个 1 x 1 px 的 gif 占位符放入<>元素的@src
属性中,以确保它们不会显示为不完整的图像。
接下来是造型。在清单 3-21b 中,我们展示了 CSS 的摘录。
清单 3-21b 。自定义播放器的 CSS 样式
<style type="text/css">
#player {
padding: 10px;
border: 5px solid black;
border-radius: 15px;
box-shadow: 10px 10px 5px gray;
box-sizing: content-box;
max-width: 455px;
}
#positionview {
width: 400px; height: 40px;
}
#transportbar {
height: 20px;
width: 300px;
position: relative;
float: left;
border: 2px solid black;
}
#position {
background: #D7BC28;
height: 20px;
width: 0px;
}
#time {
position: relative;
float: right;
}
#video {
position: relative;
float: left;
padding: 0;
margin: 0;
}
/* include your own CSS for the volume control here and
style every button with an offset on buttons.png (we only show one) */
#controls div input {
background:url(’img/buttons.png’) no-repeat top left;
border:none;
height: 30px;
width: 30px;
padding: 5px;
display: inline-block;
}
#controls div #repeat {
background-position:0 -901px;
}
</style>
玩家 div 得到了一个漂亮的边框,圆角和一个阴影使其突出。这是“让软件来做工作”这句格言的经典例子如果将其添加为.jpg
或.png
图像,则需要下载额外的资源,这通常会降低网页的速度。此外,CSS 设计是自适应的(即,它适应不同的布局大小而不损失质量)。使用图像时情况就不一样了,图像需要缩放到不同的布局尺寸。
对于位置显示,我们有一个外部的 <分区> 和一个内部的 <分区> ,其中外部的一个提供视频持续时间的框,内部的一个显示当前播放位置。
这些按钮都使用相同的.png
,其中包括所有正在使用的按钮(这被称为“图像精灵”)。为了显示一个特定的按钮,你在 CSS 中使用一个偏移量和a
30 x 30 px 的裁剪区域。使用图像精灵减少了必须下载的资源数量,从而再次加快了网页的显示速度。
最后,我们添加 JavaScript,如清单 3-21c 所示,它增加了功能。我们首先为播放器中的元素创建变量名。
清单 3-21c 。DOM 元素变量的 JavaScript 设置
<script type="text/javascript">
var video = document.getElementsByTagName("video")[0];
var position = document.getElementById("position");
var curTime = document.getElementById("curTime");
var duration = document.getElementById("duration");
var volume = document.getElementById("volume");
var vol = document.getElementById("vol");
var play = document.getElementById("play");
var repeat = document.getElementById("repeat");
var stop = document.getElementById("stop");
var louder = document.getElementById("louder");
var quieter = document.getElementById("quieter");
var mute = document.getElementById("mute");
这样一来,我们开始使用 IDL 属性值(参见清单 3-21d )来提供持续时间和音量值显示的信息:
清单 3-21d 。Loadedmetadata、timeupdate 和 volumechange 事件回调以更新持续时间和音量显示
video.addEventListener("loadedmetadata", init, false);
function init(evt) {
duration.innerHTML = video.duration.toFixed(2);
vol.innerHTML = video.volume.toFixed(2);
}
video.addEventListener("timeupdate", curTimeUpdate, false);
function curTimeUpdate(evt) {
curTime.innerHTML = video.currentTime.toFixed(2);
position.style.width = 300*video.currentTime/video.duration + "px";
}
video.addEventListener("volumechange", dispVol, false);
function dispVol(evt) {
vol.innerHTML = video.volume.toFixed(2);
}
最后,我们已经准备好使用 JavaScript API 中可用的方法、事件和 IDL 属性(参见清单 3-21e )让各种按钮工作。注意每个按钮都有一个 onclick 事件处理程序,它与改变视频状态联系在一起。
清单 3-21e 。Loadedmetadata、timeupdate 和 volumechange 事件回调以更新持续时间和音量显示
play.addEventListener("click", togglePlay, false);
function togglePlay(evt) {
if (video.paused == false) {
video.pause();
play.style.backgroundPosition = "0 0";
} else {
video.play();
play.style.backgroundPosition = "0 -151px";
}
}
repeat.addEventListener("click", rewind, false);
function rewind(evt) {
video.currentTime = video.currentTime - 2.0;
}
stop.addEventListener("click", restart, false);
function restart(evt) {
video.pause();
play.style.backgroundPosition = "0 0";
video.currentTime = 0;
}
louder.addEventListener("click", volInc, false);
function volInc(evt) {
changeVolume(video.volume + 0.1);
}
quieter.addEventListener("click", volDec, false);
function volDec(evt) {
changeVolume(video.volume - 0.1);
}
mute.addEventListener("click", toggleMute, false);
function toggleMute(evt) {
video.muted = !video.muted;
if (video.muted) {
volume.className = ’disabled’;
} else {
volume.className = ’’;
}
}
function changeVolume(changeTo) {
if (video.muted){
toggleMute();
}
if (changeTo > 1.0) {
changeTo = 1.0;
} else if (changeTo < 0.0) {
changeTo = 0.0;
}
volume.style.height = 225*changeTo +’px’;
volume.style.marginTop = 225-(225*changeTo) + ’px’;
video.volume = changeTo;
}
</script>
花点时间浏览一下代码。您会注意到许多熟悉的 IDL 属性— video.duration
、video.volume
、video.currentTime
、video.paused
和video.muted
都在这里用来提供按钮背后的功能。最后,您还会注意到play()
和pause()
控制方法。
你刚刚经历的是使这个播放器完全起作用的 JavaScript。CSS 的目的是管理表示。将这两者结合在一起,你就拥有了一套强大的工具,几乎可以创造任何东西。
摘要
这是一个相当长但非常重要的章节。至关重要的是,你们都理解 JavaScript 在这个过程中的位置,以及它的目的是提供功能。
在本章中,我们介绍了以下内容:
-
和 -
媒体资源的状态,包括
networkState
、readyState
、played
、buffered
或seekable
时间范围。 -
控制方法
load(), play(), pause()
和canPlayType()
。 -
媒体元素激发的事件列表。有相当数量,包括
loadedmetadata, canplay, playing, pause, seeking, volumechange, durationchange
,和ended
。 -
定制播放器的第三方解决方案,它们都大量使用了 JavaScript API。
-
JavaScript API 的一个实际用例:运行您自己的自定义控件。
现在,我们手头已经有了在 HTML5 应用中成功使用
四、可访问性、国际化和导航
可访问性和国际化是可用性的两个方面。第一种——无障碍——是为那些有某种形式的感官或身体障碍(如失明)的人设计的。第二种方式——国际化——吸引了那些不会说音频或视频文件所用语言的人。
自 20 世纪 90 年代中期以来,Web 已经开发了大量的功能来满足这些用户的额外需求。网站以多种语言呈现,屏幕阅读器或盲文设备为视力受损的用户提供了阅读网页内容的能力。视频的字幕,尤其是外语视频,或者对图像使用@alt
属性,已经变得几乎无处不在,对图像使用@alt
已经是很长时间以来的最佳实践。
在 HTML5 规范中引入音频和视频带来了新的可访问性挑战,需要扩展这一最佳实践。我们第一次发布需要让听力受损用户和/或不讲音频数据中所用语言的用户能够访问的音频内容。我们还首次发布了 HTML 图像内容,这些内容会随着时间的推移而变化,需要让视力受损的用户能够访问。
注意最后一句话可能看起来有点不合时宜,但视频实际上只不过是一系列静止图像——由增量帧分隔的关键帧——它们会随着时间而变化。
我们绝不能忘记的是“万维网”中的“世界”一词。不像媒体广播公司可以挑选他们的观众,我们的观众是由通晓多种语言的健全人和残疾人以及不同的文化和语言组成的。每个访问你的视频或音频内容的人都有和其他人一样的权利去访问它,你不能挑选和选择谁来查看你的内容。
满足这种需求的主要手段是开发所谓的替代内容技术(或替代内容),在这种技术中,向用户提供的内容以他们能够消费的格式给出了原始内容的替代表示。1995 年,随着 HTML 2 中的@alt
属性的引入,提供 alt 内容的实践被正式化,从那时起,它就成了规范的一个固定部分。
当 W3C 决定在 HTML5 中引入<audio>
和<video>
标签时,alt 内容的问题成为了一个主要关注点。例如,对于带有画外音的简单视频,有许多选择。它们包括以下内容:
- 字幕,是供听力受损用户使用的音轨的替代内容。
- 字幕,是供外语用户使用的音轨的替代内容。
- 视频描述,为视力有障碍的用户提供视频轨道的替代内容。
当发布媒体内容时,所有这些备选方案也应该发布,这样就不会遗漏任何受众。不要把它当成一件苦差事:alt 内容通常是有用的附加内容,例如,在视频的字幕或章节标记的情况下,它可以帮助任何用户跟踪正在讲的内容,并导航到视频文件中有用的位置。
在本章中,我们将讨论 HTML5 为满足媒体用户的可访问性和国际化需求而提供的特性。我们从需求分析开始这一章,概述了媒体内容的替代内容技术。然后我们介绍 HTML5 为满足需求而提供的特性。
注意为视频创建替代内容对网络上的所有用户都有重要意义——不仅仅是那些有特殊需求的用户或非本地用户。最大的优点是,文本,确切地表示视频中正在发生的事情,是可用的,并且这些文本是进行搜索的最佳手段。请记住,搜索技术在文本方面非常先进,但在音频或视频内容方面仍然相当有限。正是由于这个原因,alt content 为高质量搜索提供了唯一可靠的视听内容索引方法。
替代内容技术
在本书中,我们以“特征-示例-演示”的形式介绍了各种可用于向 HTML5 文档添加音频和视频资产的技术在此之前,我们将介绍 web 设计人员和开发人员在努力应对日益增长的可访问性和国际化需求时面临的许多问题。
首先要面对的是立法性质的问题。
越来越多的国家正在通过关于网络的无障碍法律。例如,在美国,1973 年《康复法》第 504 条是第一部旨在保护残疾人免受基于其残疾状况的歧视的民权立法。虽然互联网,更不用说个人电脑,还不存在,但该法律适用于任何接受联邦资金的雇主或组织,这包括政府机构,从 K-12 到大专的教育机构,以及任何其他联邦资助的项目。1998 年,当互联网蓬勃发展时,重新授权的康复法案第 508 条创建了具有约束力和可执行的标准,明确概述和指定了“可访问”的电子和信息技术产品的含义。结果是,在美国,为接受联邦资金的公司或组织开发的任何 web 项目都必须遵守 Section 508。如果你不熟悉第五百零八部分,在http://webaim.org/articles/laws/usa/
有一个很好的概述。
虽然可访问性政策因国家而异,但大多数国家——包括欧盟国家——都采用了基于 W3C 的网络内容可访问性指南(www.w3.org/TR/WCAG/
)的标准,这是一套由 W3C 开发的标准化规则,用于解释如何使网络内容可访问。WCAG 的发展是因为,越来越多的不仅仅是政府在努力解决可访问性的问题,而是所有主要的网络内容发布网站。如果您不熟悉 W3C 的 Web Accessibility Initiative,更多信息请访问www.w3.org/WAI/
。你需要知道的是,许多立法措施都是基于这个小组的工作。
挑战 web 开发人员的下一个问题是围绕音频和视频的 alt 内容的用户需求的多样性,这是相当复杂的。如果你想了解更多关于媒体可访问性需求的知识,还有一个由 WAI 发布的 W3C 文档,由本书的作者之一合著:www.w3.org/WAI/PF/media-a11y-reqs/
。
视力受损的用户
对于视力不好或没有视力的用户来说,有两个主要的挑战:如何感知视频的视觉内容,以及如何与媒体元素交互和控制媒体元素。
感知视频内容
为帮助视障用户消费视频的图像内容而开发的方法是 描述的视频 。在这种方法中,随着视频时间的推移,对视频中正在发生的事情的描述变得可用,并且音频继续回放。以下方法是可行的:
- 音频描述 :随着视频的进行,一个扬声器解释视频中可见的内容。
- 文本描述 :与屏幕上发生的事情同步的文本块被及时提供,并且屏幕阅读器将其合成为针对视力受损用户的语音。
注意可能有必要在视频中引入停顿,以便在主音轨中插入没有时间的额外解释。这将延长消耗视频的时间。因此,这样的描写称为引申描写 。
音频描述可以创建为添加到主音频轨道的单独音频记录,也可以混合到主音频记录中,并且不能再次提取。
这种混合音频描述 轨道可以作为多轨道视频资源的一部分提供,只要它们不延长视频的时间线。人们可以创建一个没有音频描述的音频轨道和一个单独的带有音频描述的混音轨道,这样它们就可以作为彼此的替代物被激活。
当需要扩展描述时,混合音频描述需要使用完全独立的视频元素,因为它们在不同的时间线上工作。然而,创建这样一个混合了音频描述的新视频文件所涉及的制作工作是巨大的。因此,只有在没有其他方法来提供所描述的视频时,才应该使用混音。
文本描述始终作为附加内容提供,以便按需激活。
从技术角度来看,有两种发布描述视频的方式。
- 带内文本描述总是在主音频轨道之外被激活。作为单独录音的音频描述也会被额外激活,而混合描述是主音频轨道的替代选择。这实际上非常类似于传统上通过辅助音频节目提供的描述性音频(见
http://en.wikipedia.org/wiki/Second_audio_program
)。 - 外部 :音频或文本描述作为单独的资源提供。当时间线匹配时,HTML5 提供标记机制将媒体资源链接在一起。然后,外部资源中的音轨被作为“带内”音轨的“带外”版本来处理,并且 HTML5 提供了与带内音轨相同的激活机制。在回放期间,浏览器处理独立资源的下载、解释和同步。
HTML5 的多音轨媒体 API(应用编程接口)处理带内和带外音频和文本描述音轨。Apple 在 Safari 和 Quicktime 中支持带内字幕。
与内容互动
视力受损的用户需要以多种方式与所描述的视频进行交互。
- 激活/停用描述 。在通过带内轨道或外部资源提供描述视频的情况下,浏览器可以基于在浏览器中的用户偏好设置中指定的用户需求来自动激活或停用描述轨道。显式的用户控制也应该通过交互式控制可用,例如所有可用轨道及其激活状态的菜单。目前,浏览器没有为视频描述提供这样的偏好设置或菜单。然而,它们可以用 JavaScript 开发。
- 在媒体内导航并进入媒体 。视听内容是视障用户的主要信息来源,因此导航至该内容非常重要。视力正常的用户通常通过点击播放进度条上的时间偏移来浏览视频。视力有障碍的用户也需要使用这种直接访问功能。直接跳到时间偏移或语义上有意义的内容部分对内容的消费有很大的帮助。此外,还必须提供一种更加语义化的方式,沿着章节、场景或行为等结构导航内容。媒体片段 URIs(统一资源标识符)和 WebVTT (Web 视频文本轨道)章节提供了直接访问功能。
重听用户
对于听力有困难的用户,音轨的内容需要以音频的替代形式提供。字幕、文字记录和手语翻译传统上被用作替代方法。此外,对播放音频的改进也可以帮助并非完全失聪的重听人掌握音频的内容。
对于标题,我们区分以下几种情况:
- 传统字幕:文本块与屏幕上发生的事情同步,并与视频同步显示。它们通常覆盖在视频视窗的底部,有时放在视窗的其他地方以避免与屏幕上的其他文本重叠,有时放在视窗的下面以避免任何重叠。很少(如果有的话)样式被应用于字幕以确保文本具有适当的字体、颜色和通过例如文本轮廓或文本背景将其与视频颜色分开的手段是可读的。一些字幕视频引入了扬声器的颜色编码、扬声器标签和/或屏幕上靠近扬声器的文本定位,以进一步提高认知和阅读速度。HTML5 引入了“标题”类型的文本轨道和 WebVTT 来在浏览器中呈现标题。
- 增强的字幕:在现代网络环境中,字幕可以不仅仅是文本。动画和格式化的文本可以在标题中显示。图标可以用来传达意思,例如,不同的扬声器或声音效果使用不同的图标。超链接可用于将屏幕上的 URL 链接到实际的网站,或者提供到进一步信息的链接,使得更容易使用视听内容作为导航的起点。图像覆盖可用于字幕中,以允许显示带有视听内容的定时图像。为了实现这种用途,标题中最好使用通用的 HTML 标记。使用带有“元数据”类型的文本轨道的 WebVTT 可以做到这一点
现在,我们将专注于传统的字幕。
这种字幕总是以文本形式创作,但有时会直接添加到视频图像中。这种技术被称为烧录字幕,或“开放字幕”,因为它们总是活跃的,开放给每个人看。传统上,这种方法已经被用于在电视和电影院传送字幕,因为它不需要任何额外的技术来复制。然而,这种方法非常不灵活。在网络上,这种方法是不鼓励的,因为它很容易提供文字说明。只有没有烧录字幕的视频不可用的传统内容才能以这种方式发布。最好的情况是,带有烧录字幕的视频应该作为多轨道媒体文件中的单独轨道或媒体源中的单独流提供,这样用户就可以在带有字幕的视频轨道和不带字幕的视频轨道之间进行选择。
从技术角度来看,有两种发布标题的方式。
- 带内:烧录字幕轨道或文本字幕在媒体资源中作为单独的轨道提供。这允许独立激活和停用字幕。它要求网络浏览器支持多轨视频的处理。
- 外部:文本字幕作为独立的资源提供,并通过 HTML 标记链接到媒体资源。类似于单独的轨道,这允许独立激活和停用字幕。它要求浏览器在回放过程中下载、解释额外资源,并使之与主资源同步。这在 HTML5 中通过文本轨道和 WebVTT 文件得到支持
如果您可以选择,将字幕作为单独的外部文件发布,因为稍后再次编辑它们并对它们进行其他文本分析要比它们与媒体数据混合在一起简单得多。
虽然我们已经指定了最常见的使用案例,但我们不能忘记,对于有认知障碍(阅读障碍)的人或需要这些替代内容技术的学习者来说,也有一些案例。
副本
视听资源的音频轨道的全文抄本是使重听用户,事实上是任何人都能获得这些内容的另一种手段。阅读(或交叉阅读)音频或视频资源的副本可能比完整阅读更有效。一个特别好的例子是一个名为 Metavid 的网站,它有美国参议院会议的全部记录,并且是完全可搜索的。
通常使用两种类型的抄本。
- 普通文本 :这相当于文字说明,但是被放在一个单独的文本块中。该文本块可以简单地呈现为视频周围某处的网页上的文本,或者作为通过视频附近的链接提供的单独资源。
- 互动文字记录 :这些文字记录也相当于字幕,但被放在一个文本块中,文本和视频之间的关系更紧密。抄本继续具有时间同步的块,使得在特定文本提示上的点击将导航视听资源到该时间偏移。此外,当视频到达下一个文本提示时,抄本将自动移动新的文本提示中心阶段,例如,通过确保它滚动到特定的屏幕位置和/或被突出显示。
顺便说一句,后一种类型的交互式文字稿在与屏幕阅读器结合使用时,作为导航辅助工具,对视力受损的用户也很有用。然而,当搜索交互式抄本时,有必要将视听内容静音,因为否则它将与来自屏幕阅读器的声音竞争,使两者都难以理解。
符号翻译
对于重听用户,尤其是聋人用户,手语通常是他们说的最熟练的语言,其次是他们所居住国家的书面语。他们通常用手语更快更全面地交流,这很像普通话和类似的亚洲语言,通常通过单一的语义实体符号进行交流。字母也有手语,但是用手语表达字母非常慢,而且只在特殊情况下使用。手语的使用是重听用户之间最快也是最具表现力的交流方式。
从技术角度来看,有三种方法可以实现标识翻译。
-
Mixed-in: sign translation that is mixed into the main video track of the video can also be called burnt-in sign translation, or “open sign translation,” because it is always active and open for everyone to see. Typically, open sign translation is provided as a picture-in-picture (PIP) display, where a small part of the video viewport is used to burn in the sign translation. Traditionally, this approach has been used to deliver sign translation on TV and in cinemas because it doesn’t require any additional technology to be reproduced. This approach is, however, very inflexible since it forces all users to consume the sign translation without possibilities for personal choice, in particular without allowing the choice of using a different sign language (from a different country) for the sign translation.
在网络上,这种方法是不鼓励的。作为小 PIP 视频提供的手语翻译在小的嵌入式视频中尤其难以看到,而嵌入式视频通常用于网络视频。因此,只有没有内置标志翻译的视频不可用的传统内容才能以这种方式发布。在可能的情况下,标识翻译应该作为独立的内容存在。
-
带内:符号翻译作为媒体资源中的一个独立部分提供。这允许额外信息的独立激活和去激活。它要求网络浏览器支持多轨视频的处理。
-
外部:标牌翻译作为单独的资源提供,并通过 HTML 标记链接到媒体资源。类似于单独的轨道,这允许额外信息的独立激活和去激活。它要求浏览器同步播放两个视频资源。
清除音频
这不是针对听力受损者的替代内容,而是提高音频内容可用性的更普遍适用的功能。人们普遍认为语音是音轨中最重要的部分,因为它传达了最多的信息。在现代多声道内容中,语音有时作为独立于声音环境的单独声道提供。一个很好的例子是卡拉 ok 音乐内容,但是清晰的音频内容也可以容易地提供给专业开发的视频内容,例如电影、动画或电视连续剧。
许多用户在理解混合音轨中的语音时存在问题。但是,当在单独的音轨中提供语音时,可以允许独立于其余音轨来增加语音音轨的音量,从而呈现“更清晰的音频”——即,更容易理解的语音。
从技术上讲,这只有在有单独的语音轨道可用的情况下才能实现,无论是作为单独的带内轨道还是作为单独的外部资源。
聋哑用户
很难为既看不见也听不见的用户提供替代内容。对他们来说,唯一的消费手段基本上是盲文,这需要基于文本的替代内容。
个人消费
如果聋哑用户自己消费视听内容,提供包含屏幕和音频上发生的事情的描述的抄本是有意义的。它基本上是一个文本视频描述和一个音频抄本的组合。因此,这在技术上的实现最好是作为一个组合的抄本。有趣的是,盲文设备非常擅长导航超文本,因此一些用导航标记增强的转录形式也很有用。
共享观看环境
在一个共享的观看环境中,其中聋哑用户与一个看得见和/或听得见的人一起消费内容,文本和音频描述的组合需要与视频回放同步提供。典型的盲文阅读速度是每分钟 60 个单词。相比之下,成年人的平均阅读速度约为每分钟 250 至 300 个单词,甚至通常的说话速度为每分钟 130 至 200 个单词,你会意识到,对于一个聋哑人来说,很难跟上任何正常的视听演示。可能需要一个概要版本,它仍然可以同步提供,就像同步提供文本描述一样,并且可以交给盲文设备。因此,这一点的技术实现要么是作为交互式抄本,要么是通过概括的文本描述。
学习支持
一些用户喜欢减慢回放速度,以帮助他们感知和理解视听内容;对于其他人来说,正常播放速度太慢。特别是视力受损的用户已经学会以惊人的速度消化音频。对于这样的用户来说,能够减慢或加快视频或音频资源的回放速度是非常有帮助的。这种速度变化需要保持音频的音高以保持其可用性。
对那些有学习障碍的人非常有帮助的一个特征是提供解释的能力。例如,每当使用一个不常见的单词时,弹出该术语的解释(例如,通过到维基百科或字典的链接)会非常有帮助。这有点类似于增强字幕的目的,并且可以通过允许超链接和/或覆盖以相同的方式提供。
有了学习材料,我们还可以在时间同步性上提供内容的语法标记。这通常用于语言学研究,但也可以帮助有学习障碍的人更好地理解内容。语法标记可以被增加到标题或副标题上,以提供给定上下文中单词的语法角色的转录。或者,语法角色可以仅作为时间段的标记来提供,依靠音频来提供实际的单词。
在学习类别下,我们还可以包含歌词或卡拉 ok 的用例。像字幕一样,这些为用户提供了一个时间同步的朗读(或演唱)文本显示。在这里,他们帮助用户学习和理解歌词。与字幕类似,它们在技术上可以通过烧录、带内多轨或外部轨道来实现。
外国用户
不说视听内容的音轨中使用的语言的用户被视为外国用户。这样的用户也需要替代内容,以允许他们理解媒体内容。
场景文本翻译
视频轨道通常对外国用户来说只是一个小挑战。大多数场景文本并不重要,不需要翻译或者可以从上下文中理解。然而,有时屏幕上有解释位置的文本,如标题,翻译会很有用。建议在字幕中包含这样的文字。
音频翻译
有两种方法可以让外国用户访问音轨。
- 配音:提供一个补充音轨,可以用来替代原来的音轨。该补充音轨可提供给带内多轨视听资源,或外部作为链接资源,其中回放需要同步。
- (增强)字幕:提供音轨中所讲内容的文本翻译。这个补充文字轨道可以提供烧入、带内,或者作为外部资源,就像字幕一样。就像字幕一样,老化字幕也不被提倡,因为它们不够灵活。
技术总结
当分析为原始内容提供替代方案和满足特殊用户需求所需的不同类型的技术时,我们可以看到这些技术大致分为以下几类:
- 老化:这种类型的替代内容实际上不是作为替代物提供的,而是作为主要资源的一部分。因为没有办法关闭它(除了通过信号处理),所以不需要开发 HTML5 规范来支持它们。
- Page text :这种类型包括可以与视频相关或完全独立使用的转录。
- 同步文本:这种类型包括带内或外部文本,与内容同步显示,包括文本描述、标题和副标题。
- 同步媒体:这种类型包括音频或视频,带内或外部,与内容同步显示,包括音频描述、符号翻译和配音。
- 导航:这主要是视障用户或行动不便用户的需求,但通常对所有用户都有用。
有了对我们正在处理的事情和需要满足的需求的基本理解,让我们来看看一些使媒体可访问的方法。我们从最明显的开始:成绩单。
副本
抄本是一种方法,旨在提供在视听资源中找到的音轨的全文抄本——交互式或纯文本。这是一种让重听用户和任何人都可以访问视听内容的好方法。阅读(或交叉阅读)音频或视频资源的副本可能比完整阅读更有效。一个提供视频内容文字记录(见图 4-1 )的网站是ted.com
。
图 4-1 。一个提供抄本的网站是 ted.com
在下面的代码清单中,我们保留了编号方案,这样您可以很容易地从清单编号中找到http://html5videoguide.net/
上的代码示例。例如清单 4-1a 和 4-1b 出自第四章中的例 1。
清单 4-1a 中的代码块展示了一个如何将一个普通的脚本链接到一个媒体元素的例子。
清单 4-1a 。为视频元素提供普通的脚本
<video poster="img/ElephantDreams.png" controls>
<source src="video/ElephantDreams.mp4" type="video/mp4">
<source src="video/ElephantDreams.webm" type="video/webm">
</video>
<p>
<a id="videoTranscript" href="ElephantDreams.html">
Read the transcript for this video.</a>
</p>
在这个例子中,脚本是一个名为ElephantDreams.html
的链接 html 文档。视频打开时,链接会出现在视频下方。这允许(听力受损的)用户阅读视频内容。清单 4-1b ,是一个非常基本的 HTML 文档。
清单 4-1b 。这个脚本是一个非常基本的 HTML 文档
<!DOCTYPE html>
<html lang="en">
<head>
<title>Media Accessibility Demo</title>
</head>
<body>
<h1>
Transcript: <a href="../media/video_elephant.ogv">Elephant’s Dream</a>
</h1>
<p>
Screen text: "The orange open movie project presents"
</p>
<p>
[Introductory titles are showing on the background of a water pool with
fishes swimming and mechanical objects lying on a stone floor.]
</p>
<p>
"Elephant’s Dream"
</p>
<p>
Proog: At the left we can see... At the right we can see the...the
head-snarlers. Everything is safe.
Perfectly safe.
</p>
<p>
[Two people stand on a small bridge.]
</p>
<p>
Proog: Emo? Emo! Watch out!
</p>
</body>
</html>
当你在浏览器中打开文件时(见图 4-2 ),你会看到视频的 HTML 页面,页面下方有超链接。单击该链接,脚本 HTML 页面将打开。
图 4-2 。普通外部抄本链接到一个视频元素
图 4-2 中显示的文字记录既有口头文本的记录,也有视频中发生的事情的记录。这是有意义的,因为抄本独立于视频,因此它必须包含视频中发生的一切。它还代表了文本描述和抄本,使其适用于被翻译成盲文的聋哑用户。
互动成绩单
在前面的例子中,脚本以一个单独的 HTML 文档的形式呈现,该文档在自己的窗口中打开。在许多方面,这是一种提供抄本的静态方法。互动抄本以一种完全不同的方式提供体验。它们不仅提供了口语文本和视频中发生的事情的转录,而且它们还随着视频的时间移动,不需要单独的窗口。
目前,还没有 HTML5 规范通过标记提供这样的交互式脚本。因此,交互性必须通过使用 JavaScript 和一系列 HTML
元素来完成,以便为屏幕阅读器保存文本提示。
在清单 4-2a 中的代码中可以看到一个示例的 HTML 标记:
清单 4-2a 。HTML 提供了时间和文本
<div id="videoBox">
<video poster="img/ElephantDreams.png" controls>
<source src="video/ElephantDreams.mp4" type="video/mp4">
<source src="video/ElephantDreams.webm" type="video/webm">
</video>
</div>
<div id="speaking" aria-live="rude">
</div>
<div id="transcriptBox">
<h4>Interactive Transcript</h4>
<p style="font:small;">Click on text to play video from there.</p>
<div id="transcriptText">
<p id="c1" class="cue" data-time="0.0" aria-live="rude" tabindex="1">
[Screen text: "The orange open movie project presents"]
</p>
<p id="c2" class="cue" data-time="5.0" aria-live="rude" tabindex="1">
[Introductory titles are showing on the background of a water pool
with fishes swimming and mechanical objects lying on a stone floor.]
</p>
<p id="c3" class="cue" data-time="12.0" aria-live="rude" tabindex="1">
[Screen text: "Elephant’s Dream"]
</p>
<p id="c4" class="cue" data-time="15.0" tabindex="1">
Proog: At the left we can see... At the right we can see the... the
head-snarlers.
Everything is safe. Perfectly safe. Emo? Emo!
</p>
...
</div>
</div>
在speaking
的
元素。为该元素提供了屏幕阅读器应该读出的文本提示。为此,它有一个@aria-live
属性,告诉 screenreader 一旦发生变化,就读出元素中已经发生变化的任何文本。这为视力受损的用户提供了一种简单的呈现文本描述的方法。
接下来,我们提供一个名为transcriptBox
的可滚动的
来显示脚本。transcriptBox
中的每个提示都有一个@data-time
属性,其中包含它的开始时间和一个@tabindex
,允许视力有障碍的用户通过按 Tab 键来导航。一个提示隐含地以下一个提示结束。
图 4-3 显示了我们想要达到的结果。
图 4-3 。视频元素的交互式脚本
创建交互性并呈现文本描述的 JavaScript 如清单 4-2b 所示。
清单 4-2b 。JavaScript 为脚本提供了交互性
window.onload = function() {
// get video element
var video = document.getElementsByTagName("video")[0];
var transcript = document.getElementById("transcriptBox");
var trans_text = document.getElementById("transcriptText");
var speaking = document.getElementById("speaking");
var current = -1;
// register events for the clicks on the text
var cues = document.getElementsByClassName("cue");
for (var i=0; i<cues.length; i++) {
cues[i].addEventListener("click", function(evt) {
var start = parseFloat(this.getAttribute("data-time"));
video.currentTime = start;
video.play();
}, false);
}
// pause video as you mouse over transcript
transcript.addEventListener("mouseover", function(evt) {
video.pause();
}, false);
// scroll to text as video time changes
video.addEventListener("timeupdate", function(evt) {
if (video.paused || video.ended) {
return;
}
// scroll to currently playing time offset
for (var i=0; i<cues.length; i++) {
var cueTime = cues[i].getAttribute("data-time");
if (cues[i].className.indexOf("current") == -1 &&
video.currentTime >= parseFloat(cueTime) &&
video.currentTime < parseFloat(cueTime)) {
trans_text.scrollTop =
cues[i].offsetTop - trans_text.offsetTop;
if (current >= 0) {
cues[current].classList.remove("current");
}
cues[i].className += " current";
current = i;
if (cues[i].getAttribute("aria-live") == "rude") {
speaking.innerHTML = cues[i].innerHTML;
}
}
}
}, false);
};
如您所见,JavaScript 处理以下函数:
- 在提示上注册一个
onclick
事件处理程序,这样就可以使用它们在视频中导航。 - 在转录框上注册一个
onmouseover
事件处理程序,这样当您将鼠标移动到转录框中进行导航时,视频就会暂停。 - 在视频上注册一个
ontimeupdate
事件处理程序,它检查文本的滚动位置并根据需要向上滚动,在当前活动的提示上设置背景颜色,还检查提示的@aria-live
属性的值,这样,如果视频中没有朗读,屏幕阅读器就会读出相应的内容。
此处设计的元素适用于视力和听力受损的用户。当您单击视频上的播放按钮时,视频会正常播放,并且作为交互式脚本一部分的字幕文本会显示在右侧的滚动显示中,突出显示当前提示。如果启用了 screenreader,脚本中标记有@aria-live
属性的标记将被复制到 screenreader 中,以便在适当的时候读出。点击一段文字,视频就会移动到播放的那个位置。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
2023-08-19 赏味不足:详细来聊下轻资产运作,我从不做重资产
2023-08-19 老隋:什么赚钱就做什么,记住轻资产运营,试错成本低
2023-08-19 iBooker 技术评论 20230819:打工是风险最高的事情
2023-08-19 卓钥商学苑:创业期间被合伙人背叛了怎么办?处理方式有哪些?