HTML5 视频操作手册（三）

原文：zh.annas-archive.org/md5/E8CC40620B67F5E68B6D72199B86F6A9

译者：飞龙

协议：CC BY-NC-SA 4.0

第八章：拥抱音频和视频

在这一章中，我们将涵盖：

• 对 Flash 说不

• 了解“音频”和“视频”文件格式

• 为每个人显示“视频”

• 创建可访问的“音频”和“视频”

• 打造时髦的“音频”播放器

• 为移动设备嵌入“音频”和“视频”

介绍

“Flash 是在 PC 时代创建的-为 PC 和鼠标。Flash 对 Adobe 来说是一个成功的业务，我们可以理解他们为什么想要将其推广到 PC 之外。但移动时代是关于低功耗设备，触摸界面和开放的网络标准，这些都是 Flash 的短板。提供其内容给苹果移动设备的媒体机构的大量增加表明 Flash 不再是观看视频或消费任何类型的网络内容的必要条件。”- 史蒂夫·乔布斯

就像我们已经看过的许多其他新技术一样，在开源 HTML5 标准中，新的“音频”和“视频”元素比以往任何时候都更加成熟和可用。这是一件好事，因为用户对多媒体的期望比以往任何时候都要高。在过去，我们使用 300 比特每秒的调制解调器下载一张照片需要 10 分钟。后来，我们使用 Napster 非法下载 MP3“音频”文件。现在，我们在移动设备上播放电视和色情内容。由于带宽管道变得越来越宽，我们对互动娱乐的需求几乎是无法满足的。现在是金钱的时刻。

多年来，QuickTime、RealPlayer 和 Flash 之间的战斗是为了在网络上播放视频的统治地位。这些浏览器插件很容易安装，通常能产生预期的结果。

随着时间的推移，QuickTime 和 RealPlayer 继续作为播放平台，但专有 Flash 工具的制造商也创建了一个强大的开发环境，不仅让设计师，还让开发人员将其视为一个可行的平台。

虽然 QuickTime 和 RealPlayer 仍然存在，但 Flash 已经赢得了这场战争。对于动画和卡通来说，Flash 是理想的工具。但它是否仍然是最好的“音频”和“视频”播放工具呢？史蒂夫·乔布斯肯定不这么认为。

2010 年，苹果电脑的负责人乔布斯划定了界限，并表示 Flash 永远不会出现在他最畅销的 iPhone 和 iPad 上。相反，他强烈支持开放的 HTML5 标准，并引发了一场在线圣战。

很快，“Flash 的死亡”宣言成为媒体和整个博客圈的头条新闻。有些人写得如此恶毒，好像一座大坝决堤，所有积累的污秽和淤泥都被允许淹没我们的集体多媒体对话。

很快，即使非网页设计师和开发人员也开始注意到，比如 C.C.查普曼，著名书籍《内容*规则》的作者，表达了他对《今日秀》在 iPad 上不可用的不满：

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_01.jpg

这个问题迅速渗透到我们的在线娱乐讨论中。你不再需要成为网页设计师或开发人员才知道这里有一个真正的问题。

C.C.简单而直接地说话，但作者知道当谈到史蒂夫创造的 Flash/HTML5“视频”战争时，他已经说错了话。有时他争论自己的观点时过于热情和勇气，但事实是像网页设计师杰西卡·邦恩这样头脑清晰的人在提醒我们时是正确的，Flash 和 HTML5“视频”可以和平共存。

自史蒂夫发表声明以来不到一年的时间，像 ABC、CBS、CNN、ESPN、Facebook、Fox News、MSNBC、国家地理、Netflix、《纽约时报》、NPR、《人物》、《体育画报》、《时代》、Vimeo、《华尔街日报》、YouTube 等网站都采用了新的 HTML5“音频”和“视频”元素。截至目前，超过 60%的网络视频现在都支持 HTML5。可以说，新的 HTML5“音频”和“视频”功能是一些最令人兴奋和期待的新发展！

支持新 HTML5“音频”和“视频”元素的浏览器包括：

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_02.jpg

在本章中，我们将看一些现实生活中的例子，拒绝 Flash，了解新的“视频”和“音频”文件格式，为所有人显示“视频”，创建可访问的“音频”和“视频”，打造时尚的“音频”播放器，以及为移动设备嵌入“音频”和“视频”。

现在，让我们开始吧！

对 Flash 说不

作者的妈妈过去常说，万事都有其时机和地点，我们相信 Flash 也有其时机和地点。只是现在，随着技术的成熟，这位作者认为 Flash 的时间和地点越来越少。

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_03.jpg

在过去的坏日子里，如果我们想在网页中使用 YouTube 视频，比如“Neutraface”，这是排版世界对 Lady Gaga 的“Pokerface”的回应，我们必须使用一些丑陋的代码，如下所示：

<object width="640" height="390">
<param name="movie" value="http://www.youtube.com/v/xHCu28bfxSI?fs=1&amp;hl=en_US"> </param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="img/xHCu28bfxSI?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="390"></embed>
</object>

那段代码又长又丑陋，复杂，而且无法通过验证测试。它还依赖于第三方插件。呃。

多年来，我们忍受了那些垃圾，但不再了。现在我们可以重建它——我们有技术。

如何做…

现在我们可以使用更加优雅的东西，而不是臃肿的object代码：

<video src="img/videosource.ogv"></video>

这就是所需的全部。它很简短，漂亮，而且验证通过。最重要的是，它不需要插件。再告诉我，为什么我们认为 Flash 是个好主意。

为了增加一些样式和功能，让我们再加入一点代码。

<video src="img/videosource.ogv" controls height="390" width="640"></video>

它是如何工作的…

那段代码应该很简单。您可能会猜到，src是指源“视频”文件，controls表示“视频”应该使用标准的播放和音量控件播放，height和width是不言自明的。

现代浏览器现在具有自己的本机 HTML5“音频”和“视频”播放控件。让我们来看看每一个，从苹果 Safari 开始：

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_04.jpg

这是 Google Chrome 显示播放控件的方式：

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_05.jpg

微软 Internet Explorer 9 显示方式不同：

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_06.jpg

然后，Mozilla Firefox 以不同的方式显示：

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_07.jpg

毫无疑问，Opera 以另一种方式显示播放控件：

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_08.jpg

每一个看起来都不同。如果每一个不同的外观都满足您的需求，那太好了！如果不是，那肯定需要更多的工作来使它们行为和外观相似。

还有更多…

还有一些可选属性我们可以包括。它们是：

• autobuffer - 这个布尔属性告诉浏览器在用户点击播放按钮之前就开始下载歌曲或电影。

• autoplay - 可以猜到，这告诉浏览器自动播放 HTML5“音频”或“视频”。

• loop - 也是一个布尔属性，它会一遍又一遍地播放 HTML5“音频”或“视频”文件。

• preload - preload 属性在播放之前开始加载文件。

• poster - poster属性是在新的 HTML5“视频”加载时显示的静态占位图像。显然，这个属性不适用于 HTML5“音频”文件。

无论您添加了这些可选属性中的哪些，最终您都将得到一种更漂亮、更语义化、更可访问的显示“音频”和“视频”的方法，而不是依赖 Flash 为您提供它。

一些好消息

与canvas章节不同，关于新的 HTML5“音频”和“视频”元素的好消息是它们是可访问的。新的 HTML5“音频”和“视频”元素具有键盘可访问性。由于浏览器现在本地处理新的 HTML5“音频”和“视频”元素，它可以像有按钮而不是键一样支持您的键盘。这一点本身就可能大大促进对这项新技术的接受。

带有样式的视频

新的 HTML5 音频和视频元素可以使用 CSS 进行视觉样式设置。我们可以使用 CSS 不仅控制播放器的大小，还可以添加:hover和:transform效果。此外，我们可以使用 JavaScript 来控制新的 HTML5 音频和视频的行为。酷！

Cover your assets

Flash 确实提供优势的一个领域是保护您的音频和视频内容。请记住，根据性质，新的 HTML5 音频和视频元素是开源的，没有数字版权管理。如果保护您的音频或视频文件不被下载对您来说是一个不可接受的条件，那么新的 HTML5 音频和视频元素不适合您 - Flash 可能仍然适合。这并不是说 Flash 提供了绝对的防盗保护 - 只是说，Flash 默认隐藏了查找媒体轨道的能力，而新的 HTML5 <audio>和<video>元素则将这些文件留在了公开的地方供任何人查看。然而，Flash Media Server 可以完全保护您的资产。

还不确定是选择 HTML5 音频和视频还是 Flash？试试这个实用提示列表。

HTML5 的好处包括：

• 可访问性： 如果可访问性对您很重要（而且应该重要），那么新的 HTML5 音频和视频元素是您最好的选择。

• iOS： 如果您希望您的音频和视频能在 iPhone 或 iPad 上显示，那么 HTML5 是您唯一的选择。

• 移动设备： 除了苹果之外的移动设备对新的 HTML5 音频和视频元素有很好的支持。

• 视频/音频 流媒体： 如果您正在流媒体的内容不是专有的，并且不需要版权管理，那么 HTML5 是您的完美选择。

Flash 的好处包括：

• 可访问性： 如果您不关心盲人或聋人，就不要支持他们。谁在乎你是否被起诉呢？

• 动画： 毫无疑问，使用 Flash 的最好理由是如果您的网站上有复杂的动画。像jibjab.com这样的网站如果没有 Flash 就无法存在。

• 仅桌面开发： 如果您不需要支持移动用户。那只是一个时尚而已。

• 视频/音频 流媒体： 如果您不想分享并且必须锁定您的音频或视频，使其不容易被人们下载，那就坚持使用 Flash。

• 网络摄像头： 如果您使用网络摄像头（除了chatroulette.com之外，还有谁这样做？），那么 Flash 是最好的选择。

这真的是使用 Flash 的最具说服力的理由吗？

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_09.jpg

另请参阅

想要在所有主要浏览器中播放新的 HTML5 音频和视频元素，包括一直到 Internet Explorer 6？谁不想呢？如果是这种情况，请查看免费的开源 Projekktor 项目，网址为projekktor.com。Projekktor 是 Sascha Kluger 的创意，使用 JavaScript 来确保各种支持的浏览器都能正确解释和显示特定的 HTML5 视频文件格式。

了解音频和视频文件格式

有很多不同的音频和视频文件格式。这些文件不仅可以包括视频，还可以包括音频和元数据 - 都在一个文件中。这些文件类型包括：

• .avi - 这是一个过去的文件格式，音频视频交错文件格式是由微软发明的。不支持今天大多数现代的音频和视频编解码器。

• .flv - Flash 视频。这曾经是 Flash 完全支持的唯一视频文件格式。现在它还包括对.mp4的支持。

• .mp4或.mpv - MPEG4 基于苹果的 QuickTime 播放器，并需要该软件进行播放。

它是如何工作的…

之前提到的每种视频文件格式都需要浏览器插件或某种独立软件进行播放。接下来，我们将看看不需要插件或特殊软件以及支持它们的浏览器的新开源音频和视频文件格式。

• H.264 已经成为最常用的高清视频格式之一。它被用于蓝光光盘以及许多互联网视频流媒体网站，包括 Flash、iTunes 音乐商店、Silverlight、Vimeo、YouTube、有线电视广播和实时视频会议。此外，H.264 有专利，因此从定义上来说，它不是开源的。支持 H.264 视频文件格式的浏览器包括：https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_10.jpg

提示

谷歌现在部分拒绝了 H.264 格式，更倾向于支持新的 WebM 视频文件格式。

• Ogg 可能听起来很滑稽，但我向你保证，它的潜力是非常严肃的。Ogg 实际上是两个东西：Ogg Theora，这是一个视频文件格式；和 Ogg Vorbis，这是一个音频文件格式。Theora 实际上更多地是一个视频文件压缩格式，而不是一个播放文件格式，尽管它也可以用于播放。它没有专利，因此被认为是开源的。我们将在下一节讨论 Ogg Vorbis。

提示

有趣的事实：根据维基百科，“Theora 是以 Max Headroom 电视节目中 Edison Carter 的控制器 Theora Jones 命名的。”

支持 Ogg 视频文件格式的浏览器包括：

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_11.jpg

• WebM 是在线视频文件格式竞赛中最新的参与者。这种开源的音频/视频文件格式开发是由谷歌赞助的。WebM 文件包含了 Ogg Vorbis 音频流和 VP8 视频流。它得到了许多媒体播放器的支持，包括 Miro、Moovidia、VLC、Winamp 等，包括 YouTube 的初步支持。Flash 的制造商表示未来将支持 WebM，Internet Explorer 9 也将支持。目前支持 WebM 的浏览器包括：https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_12.jpg

还有更多…

到目前为止，这似乎是一个音频和视频文件格式的清单，最多只有零星的浏览器支持。如果你开始有这种感觉，那么你是对的。

事实上，没有一个音频或视频文件格式被确定为统治所有的真正格式。相反，我们开发人员经常不得不以多种格式提供新的音频和视频文件，让浏览器决定它最舒适和能够播放的格式。目前这是一个麻烦，但希望未来我们能够确定更少的格式，获得更一致的结果。

音频文件格式

还有许多音频文件格式。让我们来看看那些。

• AAC - 高级音频编码文件更为人所知为 AAC。这种音频文件格式是为了在相同比特率下比 MP3 更好地发声而设计的。苹果使用这种音频文件格式来销售 iTunes 音乐商店的音乐。由于 AAC 音频文件格式支持数字版权管理，苹果提供受保护和未受保护格式的文件。由于 AAC 有专利，因此从定义上来说，我们不能完全称其为开源的音频文件格式。所有苹果硬件产品，包括他们的移动 iPhone 和 iPad 设备以及 Flash，都支持 AAC 音频文件格式。支持 AAC 的浏览器包括：https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_13.jpg

• MP3 - MPEG-1 音频层 3 文件更为人所知为 MP3。除非你一直躲在石头下，你知道 MP3 是今天最普遍使用的音频文件格式。这些文件可以播放两个声道的声音，并且可以使用多种比特率进行编码，最高可达 320。一般来说，比特率越高，音频文件的声音就越好。这也意味着更大的文件大小，因此下载速度更慢。MP3 有专利，因此从定义上来说，我们也不能完全称其为开源的音频文件格式。支持 MP3 的浏览器包括：https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_14.jpg

• Ogg - 我们之前讨论过 Ogg Theora 视频文件格式。现在，让我们来看看 Ogg Vorbis 音频格式。如前所述，Ogg 文件没有专利，因此被认为是开源的。

提示

另一个有趣的事实：根据维基百科，“Vorbis”是以《蓝色星球》中的角色 Exquisitor Vorbis 命名的，由特里·普拉切特的《小神灵》中的角色 Exquisitor Vorbis 命名的。

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_15.jpg

文件格式不可知论

我们花了很多时间来研究这些不同的video和audio文件格式。每种格式都有其优点和缺点，并且受到各种浏览器的支持（或不支持）。有些比其他的更好，有些听起来和看起来比其他的更好。但好消息是：新的 HTML5 <video>和<audio>元素本身是文件格式不可知的！这些新元素不在乎您引用的是什么类型的video或audio文件。相反，它们提供您指定的任何内容，并让每个浏览器做它最擅长的事情。

我们能不能有一天停止这种疯狂？

最重要的是，直到一个新的 HTML5 audio和一个新的 HTML5 video文件格式成为所有浏览器和设备的明确选择，audio和video文件将不得不被编码多次进行播放。不要指望这种情况很快会改变。

为所有人显示视频

根据作者马克·皮尔格里姆的说法，您的 HTML5 网络video工作流程将如下所示：

• 制作一个使用 WebM（VP8 和 Vorbis）的版本。

• 制作另一个版本，使用 H.264 基准video和 AAC“低复杂度”audio在 MP4 容器中。

• 制作另一个版本，使用 Theora video和 Vorbis audio在 Ogg 容器中。

• 从单个<video>元素链接到所有三个video文件，并回退到基于 Flash 的video播放器。

Kroc Camen 在创建“面向所有人的视频”时确实做到了这一点，这是一段 HTML 代码，如果用户的浏览器可以处理它，就会显示新的 HTML5 video元素，如果不能，就会显示 Flash 电影 —— 这一切都不需要 JavaScript。让我们看看 Kroc 是如何做到的：camendesign.com/code/video_for_everybody。

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_16.jpg

如何做…

<video controls height="360" width="640">
<source src="img/__VIDEO__.MP4" type="video/mp4" />
<source src="img/__VIDEO__.OGV" type="video/ogg" />
<object width="640" height="360" type="application/ x-shockwave-flash" data="__FLASH__.SWF">
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&amp; image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
<img src="img/__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" />
</object>
</video>
<p><strong>Download Video:</strong>
Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>
</p>

仔细看，很容易看出 Kroc 做了什么。首先，他调用了浏览器本地播放的controls，以及新的 HTML5 video元素关联的height和width。

<video controls height="360" width="640">

接下来，Kroc 依次调用每个新的 HTML5 video源，从 MP4 文件开始。桌面浏览器不太在乎 HTML5 video文件的包含顺序，但 iPad 对于想要首先指定 MP4 文件很挑剔，所以好吧。又是你赢了，史蒂夫·乔布斯。

<source src="img/__VIDEO__.MP4" type="video/mp4" />
<source src="img/__VIDEO__.OGV" type="video/ogg" />

然后，Kroc 通过调用相同文件的 Flash video版本来为无法处理新的 HTML5 video元素的软弱浏览器打赌。

<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&amp; image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
<img src="img/__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" />
</object>

最后，Kroc 通过提示用户选择下载新的 HTML5 video文件本身，无论是封闭的（MP4）还是开放的（Ogg）格式，增加了一个不错的额外功能。分享就是关怀。

<p><strong>Download Video:</strong>
Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>
</p>

提示

当然，您会用自己文件的路径替换诸如“VIDEO.MP4”之类的东西。

这种方法非常成功，因为无论您使用什么网络浏览器，您都可以看到某些东西 —— 而无需使用 JavaScript 或下载 Flash。

它是如何工作的…

这个概念实际上非常简单：如果您的浏览器能够播放新的 HTML5 video元素文件，那么您将会看到它。如果它不能支持，代码堆栈中还包括了 Flash 电影，所以您应该会看到它。如果由于某种原因，您的浏览器无法原生支持新的 HTML5 video元素，Flash 播放器崩溃或不可用，您将会看到一个静态图像。每个人都有所涵盖。

使用这种方法显示新的 HTML5 video元素的浏览器包括：

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_17.jpg

使用这种方法显示 Flash video的浏览器包括：

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_18.jpg

还有更多…

所有其他 Flash video嵌入方法都会提示用户下载 Flash（如果尚未安装）。而“面向所有人的视频”独特之处在于它不会这样做。作者 Kroc Camen 出于设计目的这样做，他说：

“用户已经有足够的安全问题了，而不需要随机的网站提示他们安装东西-对于那些不想要或不能使用 Flash 的人来说，这更加恼人。”

浪费一个艺术家是一件可怕的事情

Kroc 提醒我们确保我们的服务器使用正确的mime-types，并建议将这些行放在你的.htaccess文件中：

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

外部“Video for Everybody”

现在 WordPress 有一个“Video for Everybody”插件，网址是wordpress.org/extend/plugins/external-video-for-everybody。现在你也可以在你的博客上轻松使用 Kroc 的方法。

灵活处理你的方法

稍后，我们将研究一种方法，该方法与 Kroc 的方法实现了几乎相同的效果，但这次是使用 JavaScript。记住：做对你、你的项目和最重要的是你的客户最有意义的事情。

另请参阅

Humanstxt.org 是一个项目，旨在让网站背后的开发人员更加知名。该网站鼓励开发人员包含一个小文本文件，其中包含有关为创建和构建网站做出贡献的每个团队成员的信息。请访问：humanstxt.org。

创建可访问的音频和视频

我们已经非常广泛地研究了如何向人们提供在线 HTML5video，而不管他们的浏览器是什么，但是对依赖辅助技术的人却没有给予太多关注。现在结束了。

如何做到…

首先，我们将从 Kroc Camen 的“Video for Everybody”代码块开始，并研究如何使其具有可访问性，最终看起来像这样：

<div id="videowrapper">
<video controls height="360" width="640">
<source src="img/__VIDEO__.MP4" type="video/mp4" />
<source src="img/__VIDEO__.OGV" type="video/ogg" />
<object width="640" height="360" type="application/ x-shockwave-flash" data="__FLASH__.SWF">
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&amp; image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
<img src="img/__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" />
</object>
<track kind="captions" src="img/videocaptions.srt" srclang="en" />
<p>Final fallback content</p>
</video>
<div id="captions"></div>
<p><strong>Download Video:</strong>
Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>
</p>
</div>

它是如何工作的…

你会注意到的第一件事是，我们将新的 HTML5video元素包装在一个包装器div中。虽然从语义上讲这并不是严格必要的，但它将为我们的 CSS 提供一个很好的“钩子”。

<div id="videowrapper">

下一部分的大部分内容应该是从前一部分中可以识别的。这里没有改变：

<video controls height="360" width="640">
<source src="img/__VIDEO__.MP4" type="video/mp4" />
<source src="img/__VIDEO__.OGV" type="video/ogg" />
<object width="640" height="360" type="application/ x-shockwave-flash" data="__FLASH__.SWF">
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&amp;
image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
<img src="img/__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" />
</object>

到目前为止，我们仍在使用向能够处理它的浏览器提供新的 HTML5video元素的方法，并将 Flash 作为我们的第一个备用选项。但是，如果 Flash 不是一个选择，接下来会发生什么很有趣：

<track kind="captions" src="img/videocaptions.srt" srclang="en" />

你可能会想，那是什么鬼。

“track元素允许作者为媒体元素指定显式的外部定时文本轨道。它本身不代表任何东西。”- W3C HTML5 规范

现在我们有机会使用 HTML5 规范的另一个新部分：新的<track>元素。现在，我们可以引用kind="captions"中指定的外部文件类型。你可以猜到，kind="captions"是用于字幕文件，而kind="descriptions"是用于audio描述。当然，src调用特定文件，srclang设置新的 HTML5track元素的源语言。在这种情况下，en代表英语。不幸的是，目前没有浏览器支持新的track元素。

最后，我们允许最后一点备用内容，以防用户无法使用新的 HTML5video元素或 Flash 时，我们给他们一些纯文本内容。

<p>Final fallback content</p>

现在，即使用户看不到图像，他们至少会得到一些描述性内容。

接下来，我们将创建一个容器div来容纳我们基于文本的字幕。因此，目前没有浏览器支持新的 HTML5audio或video元素的闭合字幕，我们必须留出空间来包含我们自己的：

<div id="captions"></div>

最后，我们将包括 Kroc 的文本提示，以下载 HTML5video的封闭或开放文件格式：

<p><strong>Download Video:</strong>
Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>
</p>

还有更多…

除了新的 HTML5audio和video元素的可选controls属性之外，还有可选的loop属性。你可能会猜到，这个例子将允许 HTML5video一直播放：

<video controls height="360" loop width="640">

始终考虑可访问性

我们默认的最终描述性内容可能是为使用辅助技术的人提供可下载链接的替代位置。这将使能够看到或听到的人无法下载，因此您应确定这种方法是否适合您。

浏览器支持

对于新的 HTML5“音频”和“视频”元素，具有最佳辅助功能支持的网络浏览器包括：

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_19.jpg

查看更多

您可以在html5accessibility.com上跟踪 HTML5 的可访问性。该网站跟踪新的 HTML5 功能，如“音频”和“视频”，以及在哪些浏览器中可用。您可能会惊讶地发现，截至目前，Opera 是最不友好的可访问性网络浏览器，甚至低于微软 Internet Explorer 9。令人惊讶。

另请参阅

Video.Js 是另一个免费的开源 HTML5 视频播放器。它轻巧，不使用图像，但仍然可以通过 CSS 完全定制。它看起来很棒，并支持苹果 Safari，谷歌 Chrome，微软 Internet Explorer 9，Mozilla Firefox 和 Opera，同时还支持 IE 6-8 的回退。它甚至适用于 iPhone，iPad 和 Android 等移动设备。在videojs.com上查看。

打造时尚的音频播放器

Neutron Creations 的负责人兼联合创始人兼前端开发人员 Ben Bodien 为 Tim Van Damme 的 The Box 播客创建了定制的 HTML5“音频”播放器，网址为thebox.maxvoltar.com。Ben 的创作快速，直观且时尚。让我们更深入地了解他是如何做到的。

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_20.jpg

Ben 的自定义 HTML5“音频”播放器具有被采访者（在这种情况下是 Shaun Inman）的吸引人照片，播放/暂停按钮，显示播放进度的轨道，以及如果您选择的话，将 HTML5“音频”播放器弹出到单独的窗口的能力。就是这样。没有更多的需要。作为一个额外的触摸，注意 HTML5“音频”播放器栏的轻微透明度的细节。平滑。

如何做…

起初，Ben 的标记似乎看起来简单欺骗人：

<p class="player">
<span id="playtoggle" />
<span id="gutter">
<span id="loading" />
<span id="handle" class="ui-slider-handle" />
</span>
<span id="timeleft" />
</p>

等一下，我听到你在想，“HTML5音频标签在哪里？！”别担心。Ben 是个聪明人，对此有计划。但首先让我们看看他到目前为止做了什么。

<p class="player">

到目前为止，这很简单。Ben 创建了一个包装元素（在这种情况下是<p>）来放置他的播放器。他可以使用<div>代替吗？也许。做对你和你的项目最有意义的事情。

<span id="playtoggle" />

然后，Ben 使用这个自闭合的（注意末尾的斜杠）span来进行播放/暂停切换按钮。

<span id="gutter">
<span id="loading" />
<span id="handle" class="ui-slider-handle" />
</span>

现在，事情变得有趣起来。Ben 的“gutter”span容纳了时间轴跟踪，其中有一个指示 HTML5“音频”文件加载或缓冲进度的条形元素，以及指示播放头的圆形元素，如果您选择，可以来回“擦洗”。

<span id="timeleft" />

最后，Ben 使用另一个自闭合的span来显示剩余时间，以分钟和秒为单位。

提示

<span>元素可以胜任，但它并不是非常语义化，是吗？Patrick H. Lauke 迅速指出，使用可聚焦元素将大大提高这种方法对依赖辅助技术的人的可访问性。

它是如何工作的…

Ben 使用 jQuery 来检测对 HTML5“音频”的支持。

if(!!document.createElement('audio').canPlayType) {
var player = '<p class="player"> ... </p>\
<audio>\
<source src="img/episode1.ogg" type="audio/ogg"></source>\
<source src="img/episode1.mp3"
type="audio/mpeg"></source>\
<source src="img/episode1.wav" type="audio/ x-wav"></source>\
</audio>';
$(player).insertAfter("#listen .photo");
}

在这段代码中，我们可以看到，如果浏览器支持 HTML5“音频”，它将提供完整的 HTML5<audio>标签，包括对.ogg，.mp3和.wav的回退，这是我们尚未使用过的文件格式。由于新的 HTML5<audio>和<video>元素是文件格式不可知的，因此.wav文件也应该可以正常工作。

Ben 创建了一个简单的 JavaScript 代码，允许浏览器做他们感觉最舒适的事情。如果这种方法对您和您的项目有意义，请考虑这种方法，但请记住，您依赖 JavaScript 来完成繁重的工作，而不是我们已经看过的其他不依赖它的方法。

提示

请注意，如果您使用<div>来包含 HTML5 的video播放器，那么 JavaScript 也必须进行调整。简单地说，<p class="player"> … </p>将被更改为<div class="player"> … </div>。

还有更多…

到目前为止，我们已经为播放器设置了标记，并“嗅探”了任何特定浏览器想要的文件格式。现在，我们需要添加一些功能。

audio = $('.player audio').get(0);
loadingIndicator = $('.player #loading');
positionIndicator = $('.player #handle');
timeleft = $('.player #timeleft');
if ((audio.buffered != undefined) && (audio.buffered.length != 0)) {
$(audio).bind('progress', function() {
var loaded = parseInt(((audio.buffered.end(0) / audio.duration) * 100), 10);
loadingIndicator.css({width: loaded + '%'});
});
}
else {
loadingIndicator.remove();
}

然后添加一个函数来计算播放头的位置，以确定剩余时间，注意如果剩余时间需要，要包括前导零。

$(audio).bind('timeupdate', function() {
var rem = parseInt(audio.duration - audio.currentTime, 10),
pos = (audio.currentTime / audio.duration) * 100,
mins = Math.floor(rem/60,10),
secs = rem - mins*60;
timeleft.text('-' + mins + ':' + (secs > 9 ? secs : '0' + secs));
if (!manualSeek) { positionIndicator.css({left: pos + '%'}); }
if (!loaded) {
loaded = true;
$('.player #gutter').slider({
value: 0,
step: 0.01,
orientation: "horizontal",
range: "min",
max: audio.duration,
animate: true,
slide: function() {
manualSeek = true;
},
stop:function(e,ui) {
manualSeek = false;
audio.currentTime = ui.value;
}
});
}
});

唯一剩下的就是调用播放/暂停按钮的功能。

$(audio).bind('play',function() {
$("#playtoggle").addClass('playing');
}).bind('pause ended', function() {
$("#playtoggle").removeClass('playing');
});
$("#playtoggle").click(function() {
if (audio.paused) { audio.play(); }
else { audio.pause(); }
});

风格和内容

在简单的标记和详细的 JavaScript 之后，创建本的定制 HTML5 audio播放器，唯一剩下的就是对其进行样式设置：

.player {
display: block;
height: 48px;
width: 400px;
position: absolute;
top: 349px;
left: -1px;
-webkit-box-shadow: 0 -1px 0 rgba(20, 30, 40, .75);
-moz-box-shadow: 0 -1px 0 rgba(20, 30, 40, .75);
-o-box-shadow: 0 -1px 0 rgba(20, 30, 40, .75);
box-shadow: 0 -1px 0 rgba(20, 30, 40, .75);
border-top: 1px solid #c2cbd4;
border-bottom: 1px solid #283541;
background: #939eaa;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(174, 185, 196, .9)), to(rgba(110, 124, 140, .9)), color-stop(.5, rgba(152, 164, 176, .9)), color-stop(.501, rgba(132, 145, 159, .9)));
background: -moz-linear-gradient(top, rgba(174, 185, 196, .9), rgba(152, 164, 176, .9) 50%, rgba(132, 145, 159, .9) 50.1%, rgba(110, 124, 140, .9));
background: linear-gradient(top, rgba(174, 185, 196, .9), rgba(152, 164, 176, .9) 50%, rgba(132, 145, 159, .9) 50.1%, rgba(110, 124, 140, .9));
cursor: default;
}
#playtoggle {
position: absolute;
top: 9px;
left: 10px;
width: 30px;
height: 30px;
background: url(../img/player.png) no-repeat -30px 0;
cursor: pointer;
}
#playtoggle.playing {background-position: 0 0;}
#playtoggle:active {top: 10px;}
#timeleft {
line-height: 48px;
position: absolute;
top: 0;
right: 0;
width: 50px;
text-align: center;
font-size: 11px;
font-weight: bold;
color: #fff;
text-shadow: 0 1px 0 #546374;
}
#wrapper #timeleft {right: 40px;}
#gutter {
position: absolute;
top: 19px;
left: 50px;
right: 50px;
height: 6px;
padding: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background: #546374;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#242f3b), to(#516070));
background: -moz-linear-gradient(top, #242f3b, #516070);
background: linear-gradient(top, #242f3b, #516070);
-webkit-box-shadow: 0 1px 4px rgba(20, 30, 40, .75) inset, 0 1px 0 rgba(176, 187, 198, .5);
-moz-box-shadow: 0 1px 4px rgba(20, 30, 40, .75) inset, 0 1px 0 rgba(176, 187, 198, .5);
-o-box-shadow: 0 1px 4px rgba(20, 30, 40, .75) inset, 0 1px 0 rgba(176, 187, 198, .5);
box-shadow: 0 1px 4px rgba(20, 30, 40, .75) inset, 0 1px 0 rgba(176, 187, 198, .5);
}
#wrapper #gutter {right: 90px;}
#loading {
background: #fff;
background: #939eaa;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eaeef1), to(#c7cfd8));
background: -moz-linear-gradient(top, #eaeef1, #c7cfd8);
background: linear-gradient(top, #eaeef1, #c7cfd8);
-webkit-box-shadow: 0 1px 0 #fff inset, 0 1px 0 #141e28;
-moz-box-shadow: 0 1px 0 #fff inset, 0 1px 0 #141e28;
-o-box-shadow: 0 1px 0 #fff inset, 0 1px 0 #141e28;
box-shadow: 0 1px 0 #fff inset, 0 1px 0 #141e28;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
display: block;
float: left;
min-width: 6px;
height: 6px;
}
#handle {
position: absolute;
top: -5px;
left: 0;
width: 20px;
height: 20px;
margin-left: -10px;
background: url(../img/player.png) no-repeat -65px -5px;
cursor: pointer;
}
.player a.popup {
position: absolute;
top: 9px;
right: 8px;
width: 32px;
height: 30px;
overflow: hidden;
text-indent: -999px;
background: url(../img/player.png) no-repeat -90px 0;
}
.player a.popup:active {background-position: -90px 1px;}Content matters

当包裹的内容引人入胜时，花时间创造有趣的东西会更容易且更有意义。Box 音频采访总是很有趣——只是遗憾的是作者 Tim Van Damme 并不经常发布它们。希望将来会有所改变。请访问thebox.maxvoltar.com查看。

注意细节

当页面上一次只有一个新的 HTML5 audio或video元素时，这种方法效果很好。如果您需要多个，您将需要修改 JavaScript 以连接到标记中的多个“挂钩”。

另请参阅

SublimeVideo 采用了一种不同的方法来进行 HTML5 在线video播放：在这种情况下，播放器不是由您创建或托管的，而是由播放器制造商自己在云中创建的。好处是您始终拥有可能的最新、最新鲜的播放器版本。这样，当新功能可用或错误修复时，您无需做任何操作。您自动拥有最新的功能。请访问sublimevideo.net查看。

为移动设备嵌入音频和视频

到目前为止，我们只是简单地涉及了移动体验，但随着对越来越智能的移动设备的开发增加，我们需要把注意力转向如何在这些设备上显示我们的新 HTML5 audio和video。以下是方法。

如何做…

既然我们知道如何为目标受众选择 HTML5 audio或video文件格式，现在我们可以把注意力转向确保他们不仅可以在台式电脑和笔记本电脑上听到或观看，还可以在移动设备上听到或观看。

我们将从vimeo.com创建一个免费账户。注册完成后，在主菜单中选择上传|视频功能。您将选择要上传的文件，添加可选的元数据，然后让 Vimeo 服务器设置您的文件。接下来就是真正的激动人心的时刻：嵌入video。从 Vimeo 主菜单中选择工具|嵌入此视频。

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_21.jpg

它是如何工作的…

Vimeo 以前使用的是我们之前看过的老式 Flash 嵌入方法。现在它使用基于 iFrame 的方法，可以让 HTML5 video在 iPhone、iPad 和其他移动设备上播放。以下是一个示例，基于作者上传的video：

<iframe src="img/20958090" width="400" height="300" frameborder="0"></iframe><p><a href="http://vimeo.com/20958090">Untitled</a> from <a href="http://vimeo.com/user6281288">Dale Cruse</a> on <a href="http://vimeo.com">Vimeo</a>.</p>

还有更多…

一旦您将基于 iFrame 的代码片段复制并粘贴到网页上，并在 iPhone 或 iPad 上查看它，您应该会看到一个移动友好的 HTML5 video，您可以像这样使其全屏：

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_08_22.jpg

Vimeo 提供了更多

Vimeo 还允许您从电子邮件联系人列表中添加朋友，创建video订阅，制作小部件等等。他们现在甚至提供视频学校，帮助用户了解捕捉、编辑和分享video的最有效方法。

全方位的

YouTube，世界上最受欢迎的在线视频观看网站，现在也使用基于 iFrame 的嵌入视频的方法。我们可以采用本章开头使用的“Neutraface”视频，使用新的基于 iFrame 的嵌入方法，最终得到更具语义和友好性的结果。它也通过了验证！

<iframe title="YouTube video player" width="1280" height="750" src="img/xHCu28bfxSI?rel=0&amp;hd=1" frameborder="0" allowfullscreen></iframe>

看看这样多漂亮！

我们已经完成了一整个循环，并完全改变了我们在现代浏览器中捕捉、编辑和播放视频的能力，同时支持那些依赖辅助技术和移动设备的人。这是一个可以发展的方向。

另请参阅

Adobe 是否在自掘坟墓？几乎没有。2011 年初，Adobe 推出了一个名为“Wallaby”的免费 Flash 到 HTML5 转换器。不幸的是，许多设计师和开发人员认为 Adobe 在声称 Wallaby 可以使用 Web 标准将 Flash 导出到 HTML5 时过于夸大其词。事实上，它所做的只是将在 Flash CS5 或更高版本中创建的最简单的动画转换为简单的标记和样式。它没有能力将 ActionScript 转换为 JavaScript，这种能力才会真正使该工具有价值。在 John Nack 的博客上查看有关 Wallaby 公告的信息blogs.adobe.com/jnack/2011/03/wallaby-flash-to-html5-conversion-tool-now-available.html。

第九章：数据存储

在本章中，我们将涵盖：

• 测试浏览器是否支持数据存储

• 使用浏览器开发工具监视 Web 存储

• 设置和获取会话存储变量

• 设置和获取本地存储变量

• 将本地存储字符串转换为数字使用parseInt

• 创建 Web SQL 数据库

• 使用 Web SQL 数据库

• 创建缓存清单并离线使用站点

• 使用 Geolocation API 和geo.js显示当前位置

介绍

HTML5 引入了一种新的存储信息的方式，而不使用 cookie。这为设计师和开发人员提供了更多的灵活性，以处理和显示动态内容。我们将从测试浏览器是否支持三种主要数据存储方法开始，并最终创建一个使用本地存储来存储和访问视频的 HTML5 页面。尽管这些示例都是基于彼此构建的，但您不必按照它们呈现的顺序完成它们。本章的示例文件可在www.packtpub.com/support?nid=7940上下载。

测试浏览器是否支持数据存储

知道如何快速测试浏览器是否支持您想要使用的数据存储方法将使页面和应用程序的开发更加容易。在这个示例中，我们将创建一个脚本，查询浏览器的 DOM，以测试对不同数据存储方法的支持。

做好准备

您将需要访问现代浏览器，如 Firefox 3.6，或流行浏览器的最新版本，如 Google Chrome，Opera，Safari 或 Internet Explorer。

如何做…

首先，我们将创建一个简单的 html 页面。打开一个 HTML 编辑程序或文本编辑器，并输入基本 HTML5 页面的起始代码：

<!doctype html><html lang="en"><head><title>Client-side Storage Test for HTML5</title>
<meta charset="utf-8">

现在需要对测试页面的外观进行样式设置。我们将在 HTML 页面的<head>标记中使用<style>标记，但您也可以将它们放在单独的 CSS 文件中。

<style>
#results { background-color: #ffcc99; border: 1px #ff6600 solid; color: #ff6600; padding: 5px 20px; margin-bottom: 10px; }
#results .value { font-weight: bold; }
#results h3 { color: #333333; }
</style>

输入一个关闭的head标记，然后创建一个body标记如下所示。请注意，主要区别在于我们在页面加载时调用RunTest()函数来激活。

</head><body onload="RunTest();">

创建一个段落标记，其中包含类似下面所示的描述性文本。关闭标记，并创建一个包含结果标题的<h3>标题标记。

<p>Does your browser support all storage methods?</p>
<div id="results"><h3>Browser Data Storage Support Results</h3>

现在，输入每种存储方法，然后输入一个由类值样式化的 span 标记。输入存储方法的 ID 和文本“不支持”。关闭 span 标记并添加一个换行标记，以便在浏览器窗口中将结果分开显示在单独的行上。结果显示区域应该如下代码块所示：

Session Storage: <span class="value" id="session">not supported</span><br/>
Local Storage: <span class="value" id="local">not supported</span> <br />
Database Storage: <span class="value" id="db">not supported</span> <br /></div>

我们几乎完成了创建我们的测试页面。创建一个段落来解释测试的目的。用<footer>标记结束内容区域，以包含我们接下来要添加的脚本块。描述性文本应如下代码所示：

<p>The test above shows whether the browser you are currently using supports a data storage method.</p> <footer>

现在，我们将添加script标记，以便浏览器处理一个小型测试程序：

<script language="javascript">
function RunTest() {
for (var mydata in window)
{

接下来，我们将创建一个包含每种数据存储方法的代码块的 case 语句，我们将要测试：

switch (mydata) {
case "sessionStorage": document.getElementById("session").innerHTML = "supported";
break;
case "localStorage": document.getElementById("local").innerHTML = "supported";
break;
case "openDatabase": document.getElementById("db").innerHTML = "supported";
break;
} }} </script> </footer> </body> </html>

将文件保存为data-storage-support-test.html，并在浏览器窗口中打开它。您应该看到类似以下截图的结果：

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_09_01.jpg

它是如何工作的…

我们创建的 HTML5 测试页面使用了一小段 JavaScript 代码来查询浏览器是否支持特定的存储方法。我们首先编写了一个标准的 HTML5 页面，包括适当的<html>，<head>和其他文档标签。如果您需要复习它们，它们在本书的早期章节中有介绍。接下来，我们使用简化的<script>标签设置了 JavaScript 代码片段的开头块。HTML5 JavaScript API 在本书的其他地方有更详细的介绍。我们创建了一个名为RunTest()的函数来包含变量和代码。然后创建了两个变量。变量supp被赋予了一个空字符串的值。这将包含每种存储方法的最终支持结果。我们正在循环遍历 window 对象的属性。在每次迭代中，当前属性暂时存储在mydata变量中。这使我们能够测试属性与三种情况进行比较。

接下来，我们使用 switch 语句来测试mydata变量与我们感兴趣的特定属性。因为我们一次只测试一个值，而且列表很短，这是测试每种存储方法支持的好方法。switch语句的主体包含三种情况，每种情况对应一种存储方法。每种情况都包含一个必须评估的表达式。如果支持存储方法，则每种情况的最终操作是将文档主体中结果文本的值从“不支持”更改为“支持”，如果表达式评估为真。如果情况评估为假，则页面结果部分显示的文本将保持不变。

创建代码后，我们使用 CSS 样式控制了结果的呈现。使用一个名为 results 的 div 标签创建了一个用于显示框的容器，并指定了背景颜色、字体颜色和粗细。这是 html 页面头部的最后一个代码块。

然后创建了页面的主体部分。使用onload命令设置了页面在浏览器中加载时激活测试。编写了结果框的开头文本和标题，并将每个结果的显示文本与唯一的 ID 相关联。然后输入了闭合标签以完成页面。保存页面后，当在浏览器窗口中查看测试页面时，结果将显示在屏幕上。截图中使用的浏览器是 Firefox 3.6.13。我们看到的结果反映了 Firefox 在 3.6 和 4.0.3 版本中对存储方法的当前支持。这帮助我们确定我们可以期望 Firefox 访问者轻松查看和使用依赖本地存储和会话存储方法的网页上的任何功能。他们将无法利用任何依赖于 WebSQL 的功能。

还有更多…

测试网站和在线应用程序从未如此简单。有许多可用的工具和服务可用于在不同平台和浏览器上进行测试。

移动测试

您可以在智能设备上下载多个浏览器，如 iPod Touch 或 iPad，从而可以测试移动设备和不同浏览器上丰富媒体内容的响应性。

Adobe 浏览器实验室

不需要 Adobe CS5 即可尝试 Adobe BrowserLab，这是一个与 Adobe CS5 产品集成的在线跨浏览器测试工具。访问browserlab.adobe.com了解更多信息。

使用 BrowserShots 进行免费的跨浏览器和操作系统测试

对于预算有限且有时间的人来说，BrowserShots.org是一个替代选择。该网站允许访问者输入其网站的 URL，然后从庞大的浏览器和操作系统列表中进行选择。使用免费版本的服务可能需要几分钟才能看到结果。

使用浏览器开发工具监视 Web 存储

Web 存储可能很难测试。使用浏览器中的开发者工具，如 Safari 或 Firefox 附加组件，如 Firebug，可以更容易地诊断问题并跟踪变量的值。在这个示例中，我们将使用 Google Chrome 浏览器中的原生开发者工具来探索浏览器本地存储区中存储的键/值对。

准备工作

您需要一个最新版本的 Google Chrome 浏览器和本章的一个本地存储代码文件。

如何操作…

在 Google Chrome 浏览器窗口中打开本章中的一个本地存储练习文件。

点击查看，从查看菜单中选择开发者，然后从开发者弹出菜单中选择开发者工具。

当开发者窗口出现在当前页面上时，选择资源选项卡，点击 Google Chrome 开发者工具窗口导航区域中的本地存储，然后选择其中的子菜单。您应该看到类似以下截图的结果：

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_09_02.jpg

在 Google 开发者工具窗口的资源选项卡下的本地存储部分，我们可以访问每个页面的本地存储区域。它在屏幕右侧显示键和它们对应的值。如果右键单击对象，您将有删除它的选项。

工作原理…

我们加载了一个我们知道使用本地存储的页面，以测试 Google Chrome 浏览器中的 Google 开发者工具窗口如何显示键/值对。

当我们在开发者工具的左侧菜单中导航时，我们可以选择不同的 Web 存储方法和其他资源。

还有更多…

有许多免费的插件和原生浏览器工具供开发人员利用。

即使不使用 Firefox，也可以使用 Firebug 附加组件

Firefox 用户长期以来一直在使用 Firebug 附加组件（getfirebug.com/downloads）来调试和浏览网站和其他在线应用程序。Opera、Google Chrome、Safari 和 IE 6+的用户可以使用 Firebug Lite（getfirebug.com/firebuglite），并通过轻量级的书签工具体验类似的功能，他们可以轻松地添加到他们的浏览器中。

Safari 开发者工具是 Safari 浏览器的原生工具

在打开 Safari 浏览器时，点击Safari，选择首选项，然后点击高级选项卡。点击“在菜单栏中显示开发菜单”旁边的复选框，开始使用原生开发者工具。

设置和获取会话存储变量

会话存储和本地存储都共享 Web 存储 API。在这个示例中，我们将定义两个会话存储变量，然后在屏幕上显示它们。

准备工作

您需要一个支持会话存储的最新版本的浏览器。如果您在本地计算机上测试文件，Safari 和 Google Chrome 会有最佳响应。

如何操作…

首先，我们将创建一个 HTML5 页面的头部区域和一个开放的body标签：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Show me the session storage</title></head><body>

添加一个section和一个article标签。给 article 标签一个 ID 为“aboutyou”。

<section><article id="aboutyou"><p></p></section>

接下来，我们将使用setItem方法创建两个会话存储变量，如下面的代码块所示：

<footer><script>sessionStorage.setItem('nickname', 'Jumpin Joseph'); sessionStorage.setItem('interest', 'bike ramps and bmx racing');

现在我们将使用getElementByID和getItem方法在屏幕上显示我们刚刚设置的会话存储变量：

document.getElementById('aboutyou').innerHTML = ("Your nickname is: " + sessionStorage.getItem('nickname') + "." + " You are interested in: " + sessionStorage.getItem('interest') + "."); </script></footer></body></html>

结果应该在浏览器中的 HTML 页面上显示，类似于以下截图中显示的方式：

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_09_03.jpg

工作原理…

在这个示例中，我们为两个会话变量设置了唯一的值。会话存储使用键/值对，因此在创建时必须为每个变量设置一个值。默认情况下，这些值都是字符串。

我们通过输入sessionStorage.setItem('为人的昵称定义了一个会话变量，然后为我们的变量添加了一个名称。

我们将变量命名为"nickname"，并赋予它值“Jumpin Joseph”：'nickname', 'Jumpin Joseph')。

当我们创建第二个会话变量来包含名为"interest"的变量及其值时，我们使用了与设置第一个会话变量时相同的语法格式。

尽管通常这些变量将由表单中的值填充，但我们在示例中专注于使用正确的语法。sessionStorage关键字标识了存储方法的类型。我们在关键字后面加上一个句点，附加了setItem动作到关键字上。然后声明了变量nickname并赋予了值Jumpin Joseph。当使用时，这将告诉浏览器创建一个名为nickname的新会话存储变量，并将Jumpin Joseph的值存储在其中。然后我们创建了第二个会话存储变量，只是因为我们可以。在本章的本地存储示例中，我们将使用表单来获取本地存储变量的值，以便全面了解存储方法的创建、使用和销毁的完整生命周期视图。

还有更多…

会话存储为我们提供了一种更强大的方式来提供短期客户端存储。

一个浏览器，一个会话

会话存储最适合于不需要访问者使用多个浏览器标签来浏览网站，并且需要存储是临时的情况。虽然 HTML5 规范的数据存储区域仍在不断发展，安全性在金融机构或其他需要高度安全信息的网站使用方面并没有长期的记录，但仍然有许多有用的方法可以利用会话存储。

另请参阅

设置和获取本地存储变量的教程。

设置和获取本地存储变量

尽管会话存储是临时的，只在浏览器会话处于活动状态时持续。本地存储甚至在关闭浏览器后仍然存在。在这个教程中，我们将使用 HTML5 的contenteditable属性和本地存储创建一个故事写作应用程序。

准备工作

您应该使用最近更新的浏览器。这个教程在 Google Chrome 和 Safari 中效果最佳，但在 Firefox 中也可以正常运行。

如何做…

首先创建一个基本的 HTML5 页面，然后在开放和关闭的head标签之间添加一个脚本标签。脚本应该链接到 1.5.2 最小化的 jQuery 库，网址为ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js。您的代码现在应该类似于以下代码块：

<!DOCTYPE html><html lang="en"><head><script src="img/ jquery.min.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Local Storage: Storywriter</title>

接下来，我们将添加 CSS 样式来设置文章标签的background-color和文本color，以及font-family。

<style> article{background-color: #9F6;color:#333; font-family:Verdana, Geneva, sans-serif} p{} </style>

关闭head标签并为body和header元素创建开放标签。添加一个h1标签来显示页面标题为Storywriter，然后关闭header标签。

</head><body> <header> <h1>Storywriter</h1> </header>

为section和article元素创建开放标签。将article元素的 id 设置为“mypage”，并将contenteditable属性设置为“true”。

<section><article id="mypage" contenteditable="true">

接下来，创建一个包含占位文本type something的段落标签，然后关闭段落、article和section标签。在两个em标签之间添加描述性的指令文本。您刚刚输入的内容应该如下所示的代码：

<p>type something</p> </article> </section><em>And then what happened? I'll remember next time you open this browser. </em>

创建一个script标签，然后通过键入$(function(){声明 jQuery 函数。

使用参数字符串“mypage”调用document.getElementById方法，将其分配给变量’edit’。

接下来，我们需要添加一个由“edit”元素的模糊事件触发的事件处理程序。键入$(edit).blur(function(){，然后键入localStorage.setItem('storyData", this.innerHTML);});以完成函数。

现在，由于本地存储可以使用setItem存储字符串，我们可以使用getItem通过键入if ( localStorage.getItem('storyData') ) { edit.innerHTML = localStorage.getItem('storyData'); } })将存储的字符串内容推送回页面。

脚本代码块现在应该如下所示：

<script>$(function() { var edit = document.getElementById('mypage'); $(edit).blur(function() { localStorage.setItem('storyData', this.innerHTML); }); if ( localStorage.getItem('storyData') ) { edit.innerHTML = localStorage.getItem('storyData'); } });</script>

关闭 body 和 HTML 标签，并保存文件。在浏览器窗口中打开它。现在，您应该能够开始输入自己的故事，并在页面上看到输入的文本，即使您关闭浏览器，稍后再次打开它。它应该看起来类似于以下的屏幕截图：

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_09_04.jpg

它是如何工作的…

当我们将article标签的contenteditable属性设置为true时，我们告诉浏览器允许用户输入文本。大多数 HTML5 元素都可以声明contenteditable属性，然后将其设置为true或false。然后，我们使用document.getElementById使用 IDmypage捕获输入的内容。getElementById jQuery 方法会在其参数中搜索特定 ID 名称的文档。然后，我们在blur事件上添加了一个事件处理程序，以使输入的文本看起来更加平滑。同时，我们还使用本地存储方法setItem和变量storyData存储文本。最后，我们使用getItem本地存储方法来检查storyData是否存在，如果存在，则将其加载到可编辑的 HTML 元素中，使用edit.innerHTML和getItem。

另请参阅

本书的前几章介绍了 HTML5 元素和 PACKT jQuery 书籍。

使用parseInt将本地存储的字符串转换为数字

在这个示例中，我们将从本地存储中获取一个字符串值，并将其转换为整数，以便我们可以使用parseInt进行数学运算。

准备工作

我们将使用 Modernizr (www.modernizr.com)来检测本地存储是否可用，将其托管在名为"js"的子文件夹中。您还需要至少一个最近更新的浏览器。

如何做…

按照下面的代码块创建一个新的 html 页面的开始，直到标题标签为止：

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <title>Using numbers with local storage</title>

接下来，添加样式来指定h1和h2标签的字体族、文本颜色，以及h2标签的背景颜色和高度。

<style>body{font-family:Verdana, Geneva, sans-serif;} h1{color:#333; }h2{color:#C30;background-color:#6CF; height:30px;}</style>

添加一个由 Google 托管的 IE HTML5 shiv，并添加一个指向本地 Modernizr JavaScript 文件的链接：

<!--[if IE]><script src="img/html5.js"></script> <![endif]--><script type="text/javascript" src="img/ modernizr-1.7.min.js"></script>

使用 Modernizr 脚本来检查浏览器是否支持本地存储：

<script>if (Modernizr.localstorage) {
// window.localStorage is available!}
else {// the browser has no native support for HTML5 storage document.getElementByID('yayanswer').innerHTML = "Local Storage is not supported by your browser. Maybe it's time for an update?";}

创建一个名为storemyradius()的函数，声明一个名为myradiusToSave的变量，并将其赋值为document.getElementById('myradius').value；以便在访问者点击保存时将输入的数值传递到文本字段中。

function storemyradius() {var myradiusToSave = document.getElementById('myradius').value;

添加一个if语句来检查myradiusToSave是否为 null。在此之下，创建一个本地存储setItem方法，键为"myradius"，值为"myradiusToSave"。在if语句的闭合括号和storemyradius函数的闭合括号之前，放置一个对displaymyradius()的函数调用，如下面的代码块所示：

if (myradiusToSave != null) { localStorage.setItem('myradius', myradiusToSave);displaymyradius();}}

创建一个名为displaymyradius的函数，不接受任何参数，然后添加一个名为myradius的变量。将其赋值为包含一个本地存储getItem方法的 JavaScript 函数parseInt，参数为"myradius"，基数为 10。到目前为止，函数应该如下面的代码块所示：

function displaymyradius() { var myradius = parseInt(localStorage.getItem('myradius'),10);

在同一个函数中，创建一个if语句，用于检查myradius变量是否不为 null 且大于零。创建变量diameter，并将其值赋为2乘以myradius的结果。使用document.getElementById和innerHTML来显示直径变量的值，以及在 HTML 页面的h2标签之间显示消息"The diameter of the circle is"。

if (myradius != null && myradius > 0) {var diameter = 2 * myradius;document.getElementById('yayanswer').innerHTML = "The diameter of the circle is: " + diameter + "!";}}

创建一个名为clearmyradius的函数，不接受任何参数，然后创建一个if语句，检查本地存储getItem方法是否包含一个不为 null 的值。在if语句的括号之间，放置本地存储removeItem方法，参数为字符串"myradius"，以及对本地存储clear方法的调用。关闭脚本和头标签。我们刚刚写的代码应该看起来类似于以下的代码块：

function clearmyradius() {if (localStorage.getItem('myradius') != null) {localStorage.removeItem('myradius'); window.localStorage.clear();}}</script></head>

创建开放的 body、section、hgroup和h1标签，在关闭的h1标签之前输入"localStorage Number Conversion"。创建一个h2标签，并为其分配一个 ID 为"yayanswer"。关闭hgroup标签，然后为myradius文本字段添加一个标签标签。输入标签文本为"输入圆的半径:"。创建一个带有 ID 为"myradius"和maxlength为"4"的输入表单字段标签。创建两个输入按钮，一个带有onclick值调用函数storemyradius()；另一个带有onclick值调用函数clearmyradius()。关闭 section、body 和 html 标签，并保存页面。最终的代码块应该如下所示：

<body ><section><hgroup><h1>localStorage Number Conversion</h1> <h2 id="yayanswer"></h2></hgroup><label for="myradius">Enter the radius of the circle:</label><input id="myradius" maxlength="4" /> <input onclick="storemyradius();" name="save" type="button" value="save"><input onclick="clearmyradius();" name="clear" type="button" value="clear"></section></body></html>

在 Google Chrome 浏览器窗口中，完成的 HTML 页面应该如下所示：

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_09_05.jpg

它是如何工作的…

在 HTML 页面中显示的文本字段接受访问者输入并将其作为值传递给storemyradius()函数。我们声明了一个名为myradiusToSave的变量，并将其分配为document.getElementById('myradius').value；它存储了myradius中包含的值。然后，它将传递到本地存储的setItem方法中。在将值传递到本地存储之前，我们需要验证myradiusToSave实际上包含的值不是 null。如果不是 null，则有数据保存到本地存储。然后，该值作为键/值对的一部分保存到本地存储中，使用setItem。为了将myradius值作为数字使用，我们需要将其从字符串转换为整数。这是通过调用parseInt JavaScript 函数来完成的。接下来，我们创建了一个名为diameter的变量，用于保存我们的直径公式的结果，即半径值的两倍。最后，我们使用getElementbyId方法将结果返回到屏幕上。

另一个页面上的选项是清除本地存储变量的值。虽然我们本可以使用removeItem方法，但同时使用 clear 方法可以确保没有其他潜在的本地存储变量。通过打开 Google 开发者工具刷新页面，可以验证本地存储区域为空。

还有更多…

当前，默认情况下localStorage将所有数据存储为字符串。我们刚刚练习了将localStorage变量转换为整数，但它们也可以转换为数组等对象。

在 localStorage 中存储和检索数组

在许多情况下，您会希望使用localStorage与数组一起保存游戏中的进度或保留用户数据或消息。您可以使用 Douglas Crockford 的 JSON 库来简化数组的存储和检索。访问github.com/douglascrockford/JSON-js下载代码并了解更多关于 JSON 的信息。

创建一个新的 HTML5 页面，并在两个页脚标签之间添加脚本标签。声明一个名为"horsedef"的新变量数组，并将其分配为以下键/值对，如下所示：

var horsedef = {"species":"equine","legs":4,"ears":2, "purposes":{"front":"neigh","behind":"flick"}};

现在，在本地存储中设置一个名为"describehorse"的新项目，同时使用JSON将我们的数组horsedef转换为字符串，如下所示：

window.localStorage.setItem('describehorse', JSON.stringify(horsedef));

使用 JSON 解析从本地存储中检索值：

console.log( alert('A horse is a horse of course! ' + JSON.parse (localStorage.getItem('describehorse')) ); // => Object { species="equine", more...} </script>

保存页面，打开浏览器窗口。您应该看到一个警报框，显示传递给describehorse的horsedef数组中的键/值对，如下面的屏幕截图所示：

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_09_06.jpg

提示

在使用 JSON 时要注意跨站点回调。通常最好从自己的服务器下载并使用文件。始终直接从源下载 JSON 的副本。不要上当受骗，比如 JSONP。

创建 Web SQL 数据库

在这个示例中，我们将创建一个 Web SQL 数据库，并赋予它定义版本、名称、大小和描述的属性。

准备工作

您需要使用支持 Web SQL 数据库的当前浏览器。

如何操作…

创建一个新的 HTML5 文件，并在两个页脚标签之间放置打开和关闭脚本标签。声明一个名为db的变量，然后将openDatabase()赋给它。给openDatabase以下参数：'mymotodb', '1.0', 'Motocross Rider List DB', 2 * 1024 * 1024，然后关闭声明。代码应该看起来像以下代码片段：

<script>var db = openDatabase('mymotodb', '1.0', 'Motocross Rider List DB', 2 * 1024 * 1024);</script>

保存文件。

它是如何工作的…

所有 Web SQL 数据库都使用openDatabase方法来为数据库分配值。第一个参数“mymotodb”是数据库的名称。下一个必需的参数是版本号。这里的数字必须与用户尝试使用 Web SQL 数据库时匹配。接下来，我们定义了数据库的描述，然后是估计的大小。一旦为请求的openDatabase方法定义了所有参数，数据库就被创建了，并且进行了第一次（不可见的）事务——数据库本身的创建。

还有更多…

诸如 Web SQL 数据库之类的规范的浏览器实现一直非常不可预测，同样，Web 开发社区对这些规范本身的支持也是如此。

Web SQL 可能会被 SQLite 取代

Web SQL 数据库规范本身已不再由 W3C 维护，但在大多数浏览器中运行得相当好。可能在接下来的一年左右，足够多的主要利益相关者将会就如何实现不同的客户端数据库解决方案达成一致，比如 SQLite，但这样的事情很难预测。关注www.w3.org/TR/webdatabase/上的规范，了解使用客户端数据库的当前选项的更新。

使用 Web SQL 数据库

在这个步骤中，我们将使用前面步骤中创建的数据库，并向其中添加表和数据，然后在 HTML 页面上显示结果。

准备工作

您需要一个当前的浏览器和一个带有基本标签的 HTML5 页面，用于头部区域和主体区域。

如何操作…

在一个基本的 HTML5 页面上，添加一个h1标签来显示页面标题，然后创建一个 ID 为“status”的div标签来保存我们的结果，如下面的代码块所示：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Using WEB SQL Databases</title></head><body><article><section><header><h1>Today's Riders</h1></header><div id="status" name="status"></div> </section></article><footer>

如果尚未创建数据库，请按照前面的步骤开始脚本以创建数据库。创建一个名为 info 的新变量，然后创建一个包含接受参数的函数的新事务。使用传递的参数，创建一个名为 RIDERS 的带有唯一 ID 和名为ridername的行的表。代码应该类似于以下代码块：

var info;db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS RIDERS (id unique, ridername)');

将数据添加到表行中，使用唯一 ID 的数字和每个名称的文本字符串：

tx.executeSql('INSERT INTO RIDERS (id, ridername) VALUES (1, "Joe Fly")'); tx.executeSql('INSERT INTO RIDERS (id, ridername) VALUES (2, "Gira Ettolofal")'); });

执行查询以从数据库中提取数据：

db.transaction(function (tx) { tx.executeSql('SELECT * FROM RIDERS', [], function (tx, results) {

创建一个新变量和for循环，循环遍历结果并将其打印到屏幕上：

var len = results.rows.length, i; for (i = 0; i < len; i++){ info = "<p><b>" + results.rows.item(i).ridername + "</b></p>"; document.querySelector('#status').innerHTML += info; } }, null);});

关闭脚本和 HTML 页面。

</script></footer></body></html>

它是如何工作的…

当我们在浏览器中打开我们刚创建的页面时，我们将看到我们使用数据库来显示的信息。这是因为查询和循环一起查看数据库并显示适当的信息。

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_09_07.jpg

还有更多…

在 HTML5 中，安全性和数据库事务可能执行不佳。在生产环境中，应该注意保护接受 SQL 查询的任何页面。

在单独的文件中保存脚本代码

为了简化本步骤，我们没有将 SQL 查询代码和 JavaScript 保存在单独的文件中。可以通过将代码保存在子文件夹中，如../js/myCode.js来完成。谨慎使用 Web SQL、Indexed DB 或任何其他类型的基于浏览器的查询 API 来获取安全信息。

在生产服务器上防范 SQL 注入

每当有可编辑字段时，都可能会有一些机器人尝试执行 SQL 注入攻击。可以通过在事务请求中使用“?”来采取基本预防措施。以下代码显示了一个例子。

store.db.transaction(function(tx) { tx.executeSql( "insert into bmxtricks " + "(time, latitude, longitude, trick) values (?,?,?,?);", [bmxtricks.time, bmxtricks.latitude, bmxtricks.longitude, bmxtricks.trick], handler, store.onError );});

另请参阅

SQL 的 Packt 图书，任何覆盖客户端数据库的 Packt HTML5 图书。

为离线存储创建缓存清单

在这个示例中，我们将创建一个缓存清单文件，以便我们能够离线存储 HTML5 页面，并仍然查看页面上显示的图像和视频。

准备工作

您将需要一个 HTML5 页面，例如本示例的代码文件中提供的页面，并且可以上传文件到服务器，然后在计算机、智能手机或其他具有浏览器的网络设备上查看它们。

如何做…

首先，我们将创建缓存清单文件。这应该在一个简单的文本编辑器中创建。它应该包含用户在离线时需要访问的所有文件和支持代码。首先列出的是当前文件类型（CACHE MANIFEST）。清单的版本号也应包括在内。请注意，我们在以下代码块中添加了所有我们希望用户在离线时访问的文件的路径：

CACHE MANIFEST
# version 0.1
itsallgooed.html
css/Brian Kent Font License.txt
css/exact-css-from-tutorial.css
css/font-stylesheet.css
css/plasdrip-webfont.eot
css/plasdrip-webfont.svg
css/plasdrip-webfont.ttf
css/plasdrip-webfont.woff
css/plasdrpe-webfont.eot
css/plasdrpe-webfont.svg
css/plasdrpe-webfont.ttf
css/plasdrpe-webfont.woff
css/style.css
images/gooed-science-logo.jpg
images/promo-bg.jpg
images/gakposter.png
movie/GakHowTo.mp4
movie/GakHowTo.ogv
movie/GakHowTo.webm

在index.html页面的DOCTYPE标签和head标签之间添加一个 manifest 属性，如下所示：

<!DOCTYPE html> <html lang="en" manifest="gooed.manifest"> <head>

最后，创建一个.htaccess文件来创建正确的 MIME 类型：

AddType text/cache-manifest .manifest

页面应该显示类似于以下内容：

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_09_08.jpg

它是如何工作的…

创建缓存清单为浏览器提供了一个加载离线页面时使用的清单。虽然离线存储页面的想法是它不需要频繁更新，但使用版本号允许作者在用户下次连接到互联网时推送更新。

并非所有浏览器或系统都能正确解释清单文件类型，因此包括一个.htaccess文件可以确保缓存清单被正确识别。

您可以排除您认为不重要的文件，以减小离线页面的大小并减少加载时间。

使用地理位置和 geo.js 显示当前位置

在这个示例中，我们将使用地理位置规范和geo.js来显示地图上活动用户的当前位置，并显示他们当前的纬度和经度。

准备工作

访问code.google.com/p/geo-location-javascript/下载最新版本的geo.js，或者从 wiki (http://code.google.com/p/geo-location-javascript/wiki/JavaScriptAPI)获取链接 URL 以直接在线链接到它。

如何做…

首先，我们将创建 HTML5 开头页面标签：。

然后，在 meta 标签中，我们将把 name 属性设置为“viewport”，并为 content 属性定义以下值：width = device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;

现在，声明一个带有 src 属性的脚本标签：code.google.com/apis/gears/gears_init.js

然后，调用geo.js脚本：src="img/geo.js"。

到目前为止，代码块应该如下所示：

<html><head><meta name = "viewport" content = "width = device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"> <script src="img/gears_init.js" type="text/javascript" charset="utf-8"></script><script src="img/geo.js" type="text/javascript" charset="utf-8"></script>

为 Google Maps API 添加一个脚本标签：<script type="text/javascript" src="img/js?sensor=false"></script>。

现在，我们将创建一个初始化地图的函数，命名为initialize_map()，然后创建一个名为myOptions的数组来存储地图属性。这些属性基于 Google Maps API。它们应该类似于以下代码块：

<script>function initialize_map(){ var myOptions = { zoom: 4, mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP }

使用google.maps.Map()方法向页面添加一个名为 map 的新地图，该方法将document.getElementById元素作为参数，该元素又传递了 id“map_canvas”。google.maps.Map接受的另一个方法是myOptions。

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}

创建initialize()函数，并添加一个if语句来检查geo_position_js.init()函数是否激活。使用document.getElementById和innerHTML为 id 为“current”的 div 输入一个新状态。状态文本为“接收中…”。

function initialize(){ if(geo_position_js.init()){ document.getElementById('current').innerHTML="Receiving...";

添加帮助消息文本，以显示如果我们无法获取位置或者由于某种原因浏览器不支持获取当前位置，如下所示的代码块：

geo_position_js.getCurrentPosition(show_position,function(){document. getElementById('current').innerHTML="Couldn't get location"}, {enableHighAccuracy:true}); } else{document.getElementById('current').innerHTML="Functionality not available"; }}
function show_position(p){ document.getElementById('current').innerHTML= "latitude="+p.coords.latitude.toFixed(2)+" longitude="+p.coords.longitude.toFixed(2); var pos=new google.maps.LatLng( p.coords.latitude,p.coords.longitude); map.setCenter(pos); map.setZoom(14);

创建一个名为infowindow的新变量，用于显示google.maps InfoWindow，即在点击标记时显示的气泡。给它一个文本字符串“yes”来显示。创建一个新的标记，与用户当前位置相关联，并为标记添加标题文本，以便在鼠标悬停时显示。添加一个事件监听器来检测标记何时被点击。

var infowindow = new google.maps.InfoWindow({ content: "<strong>yes</strong>"}); var marker = new google.maps.Marker({ position: pos, map: map, title:"Here I am!" }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker);});}</script >

样式化页面以控制字体系列、填充和标题和当前 div 的外观。

<style>body {font-family: Helvetica;font-size:11pt; padding:0px;margin:0px} #title {background-color:#0C3;padding:5px;} #current {font-size:10pt;padding:5px;}</style></head>

在 body 标签中创建一个onLoad命令，初始化initialize_map()和initialize()函数。创建一个新的div来显示页面标题，以及一个 id 为“current”的第二个div来显示位置获取过程的当前状态。最后，创建一个 id 为map_canvas的div来包含地图一旦显示，并使用内联样式设置div的宽度和高度。关闭标签并保存页面。

<body onLoad="initialize_map();initialize()"><div id="title">Where am I now?</div> <div id="current">Initializing...</div> <div id="map_canvas" style="width:320px; height:350px"></div></body></html>

在浏览器窗口中打开页面，您应该会看到类似以下截图的结果：

https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-vid-hwt/img/1048_09_09.jpg

工作原理…

使用geo.js简化了在多个设备上使用地理定位的过程。它提供了准备好的错误消息，并遵循 W3C 的实现标准，以及“回退”到诸如 Google Gears 之类的工具的能力。首先，我们需要创建一个包含地图显示和处理选项数组的变量的脚本，实例化一个新的地图对象，并绘制一个标记以将用户的当前位置固定到屏幕上。在标记上悬停会显示一个带有标题文本的气泡窗口。这个文本也可以包含一个链接，用于拉取和显示驾驶方向、评论或笔记。当页面加载时，地图选项创建函数map_initialize()和主要的触发函数initialize()被调用。在使用geo.js的帮助下确定用户的当前位置并绘制地图时，会显示一个临时状态消息。