原文：
zh.annas-archive.org/md5/E84C7ACCB273D1B70039D0DDC29824AC译者：飞龙
第八章：拥抱音频和视频
在本章中，我们将涵盖：
-
对 Flash 说不
-
理解“音频”和“视频”文件格式
-
为所有人显示“视频”
-
创建可访问的“音频”和“视频”
-
打造时髦的“音频”播放器
-
为移动设备嵌入“音频”和“视频”
介绍
“Flash 是在 PC 时代创建的-为 PC 和鼠标。Flash 对 Adobe 来说是一个成功的业务，我们可以理解他们为什么想将其推广到 PC 之外。但移动时代是关于低功耗设备、触摸界面和开放的网络标准，所有这些领域 Flash 都做得不够好。提供其内容给苹果移动设备的媒体机构的大量增加表明，Flash 不再是观看视频或消费任何类型网络内容的必要条件。”- 史蒂夫·乔布斯
与我们已经看过的许多其他新技术一样，在开源 HTML5 标准中，新的“音频”和“视频”元素比以往任何时候都更加成熟和可用。这是一件好事，因为用户对多媒体的期望比以往任何时候都要高。在过去，我们使用需要 10 分钟才能下载一张照片的 300 波特调制解调器。后来，我们使用 Napster 非法下载 MP3“音频”文件。现在，我们在移动设备上播放电视和色情内容。由于带宽管道变得越来越宽，我们对互动娱乐的需求几乎变得无法满足。现在是展示成果的时候了。
多年来，视频播放在网页上一直是 QuickTime、RealPlayer 和 Flash 之间的战斗。这些浏览器插件安装起来很容易，通常能产生预期的结果。
随着时间的推移，QuickTime 和 RealPlayer 继续作为播放平台，但专有 Flash 工具的制造商也创建了一个强大的开发环境，使设计师和开发人员都认为它是一个可行的平台。
虽然 QuickTime 和 RealPlayer 仍然存在，但 Flash 赢得了这场战争。对于动画和卡通来说，Flash 是理想的工具。但它是否仍然是最好的“音频”和“视频”播放工具呢？史蒂夫·乔布斯肯定不这么认为。
2010 年，苹果电脑的负责人乔布斯划定了界限，并表示 Flash 永远不会出现在他最畅销的 iPhone 和 iPad 上。相反，他坚定地支持开放的 HTML5 标准，并引发了一场在线圣战。
不久之后，“Flash 的死亡”宣言成为媒体头条和博客圈的热门话题。有些人写得如此恶毒，好像一道堤坝决堤，所有积累的污秽和淤泥都被允许淹没我们的多媒体对话。
很快，即使非网页设计师和开发人员也开始注意到，比如 C.C. Chapman，著名书籍《内容规则》的作者，表达了他对《今日秀》无法在 iPad 上观看的不满：
这个问题迅速渗透到我们的在线娱乐讨论中。你不再需要成为网页设计师或开发人员才知道这里存在真正的问题。
C.C.说得简单明了，但作者知道他在谈论史蒂夫制造的 Flash/HTML5“视频”战争时，他已经说错了话。有时他争论得太过激和傲慢，但事实是，像网页设计师杰西卡·邦恩这样头脑清晰的人在提醒我们，Flash 和 HTML5“视频”可以和平共存。
自从史蒂夫做出上述宣言以来不到一年的时间，像 ABC、CBS、CNN、ESPN、Facebook、Fox News、MSNBC、National Geographic、Netflix、《纽约时报》、NPR、People、《体育画报》、《时代》、Vimeo、《华尔街日报》、YouTube 等网站都采用了新的 HTML5“音频”和“视频”元素。截至目前，超过 60%的网络“视频”现在都已经准备好使用 HTML5。可以说，新的 HTML5“音频”和“视频”功能是一些最令人兴奋和期待的新发展！
支持新的 HTML5“音频”和“视频”元素的浏览器包括：
在这一章中，我们将看一些现实生活中的例子，比如对 Flash 说不，理解新的video和audio文件格式，为所有人显示video，创建可访问的audio和video，打造时尚的audio播放器，以及为移动设备嵌入audio和video。
现在，让我们开始吧！
对 Flash 说不
作者的妈妈过去常说，万事都有其时机和地点，我们相信 Flash 也有其时机和地点。只是现在，随着技术的成熟，作者认为 Flash 的时间和地点越来越少。
在那些糟糕的旧日子里，如果我们想在网页中使用 YouTube 视频，比如“Neutraface”，这是排版界对 Lady Gaga 的“Pokerface”的回应，我们就不得不使用一些丑陋的代码，比如这样：
<object width="640" height="390">
<param name="movie" value="http://www.youtube.com/v/xHCu28bfxSI?fs=1&hl=en_US"> </param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="img/xHCu28bfxSI?fs=1&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指的是源video文件，controls表示video应该使用标准的播放和音量控件，height和width是不言自明的。
现代浏览器现在有了自己的原生 HTML5audio和video播放控件。让我们来看看每一个，从苹果 Safari 开始：
这是谷歌 Chrome 显示播放控件的方式：
微软 Internet Explorer 9 以不同的方式显示它：
然后，Mozilla Firefox 以不同的方式做到了：
不足为奇的是，Opera 以另一种方式显示播放控件：
所有这些看起来都不一样。如果每一个不同的外观都满足你的需求，太好了！如果不是，那肯定需要更多的工作来让它们行为和外观相似。
还有更多…
还有一些可选的属性我们可以包括。它们是：
-
autobuffer- 这个布尔属性告诉浏览器在用户点击播放按钮之前就开始下载歌曲或电影。 -
autoplay- 你可能已经猜到，这告诉浏览器自动播放 HTML5audio或video。 -
loop- 也是一个布尔属性，它会一遍又一遍地播放 HTML5audio或video文件。 -
preload - preload 属性在播放之前开始加载文件。
-
poster-poster属性是在新的 HTML5video加载时显示的静态占位图像。显然，这个属性不适用于 HTML5audio文件。
无论你包括了这些可选属性中的哪些，你最终都会得到一种更漂亮、更语义化、更可访问的显示audio和video的方法，比起依赖 Flash 为你提供它们。
一些好消息
与canvas章节不同，关于新的 HTML5audio和video元素的好消息是它们是可访问的。新的 HTML5audio和video元素具有键盘可访问性。由于浏览器现在原生地处理新的 HTML5audio和video元素，它可以像按钮一样支持你的键盘。这一点单独就足以推动这项新技术的接受。
带样式的视频
新的 HTML5 audio和video元素可以使用 CSS 进行视觉样式设置。我们可以使用 CSS 不仅控制播放器的大小，还可以添加:hover和:transform效果。此外，我们可以使用 JavaScript 来控制新的 HTML5 audio和video的行为。很酷！
保护你的资产
Flash 确实提供优势的一个领域是保护你的音频和视频内容。请记住，新的 HTML5 audio和video元素天生是开源的，没有数字版权管理。如果保护你的音频或视频文件不被下载对你来说很重要，那么新的 HTML5 audio和video元素不适合你 - Flash 可能仍然适合。这并不是说 Flash 能够终极保护不被盗用 - 只是说，Flash 默认隐藏了媒体轨道的能力，而新的 HTML5 <audio>和<video>元素则默认将这些文件完全暴露给任何人。然而，Flash Media Server 可以完全保护你的资产。
仍然不确定是选择 HTML5 音频和视频还是 Flash？试试这个方便的提示列表。
HTML5 的好处包括：
-
**可访问性：**如果可访问性对你很重要（应该是的），那么新的 HTML5
audio和video元素是你最好的选择。 -
**iOS：**如果你希望你的
音频和视频能在 iPhone 或 iPad 上显示，HTML5 是你唯一的选择。 -
**移动设备：**除了苹果的移动设备外，其他移动设备对新的 HTML5
audio和video元素有很好的支持。 -
视频/音频**流媒体：**如果你正在流媒体的内容不是专有的，也不需要版权管理，HTML5 是你的完美选择。
Flash 的好处包括：
-
**可访问性：**如果你不在乎盲人或聋人，也不支持他们。谁在乎你是否被起诉呢？
-
**动画：**毫无疑问，使用 Flash 的最好理由是如果你的网站有复杂的动画。像
jibjab.com这样的网站如果没有 Flash 就无法存在。 -
**仅桌面开发：**如果你不需要支持移动用户。那只是一个时尚。
-
视频/音频**流媒体：**如果你不喜欢分享并且必须锁定你的音频或视频，使其不容易被人下载，那就坚持使用 Flash。 -
**网络摄像头：**如果你使用网络摄像头（除了
chatroulette.com之外，还有谁在用？），那么 Flash 就是最好的选择。
这真的是使用 Flash 的最具说服力的理由吗？
另请参阅
想要能够在所有主要浏览器中播放新的 HTML5 audio和video元素，甚至包括远至 Internet Explorer 6？谁不想呢？如果是这样，那就去看看免费的开源 Projekktor 项目，网址是projekktor.com。Projekktor 是 Sascha Kluger 的创意，它使用 JavaScript 来确保各种支持的浏览器都能正确解释和显示特定的 HTML5 video文件格式。
了解音频和视频文件格式
有很多不同的音频和视频文件格式。这些文件不仅可能包括视频，还可能包括音频和元数据 - 都在一个文件中。这些文件类型包括：
-
.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-mtmd-dev-cb/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 视频文件格式的浏览器包括：
- 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-mtmd-dev-cb/img/1048_08_12.jpg
还有更多…
到目前为止，这似乎是一长串音频和视频文件格式，最多只有零星的浏览器支持。如果你开始有这种感觉，那么你是对的。
事实上，没有一个音频或视频文件格式能够成为统治它们所有的真正格式。相反，我们开发人员通常必须以多种格式提供新的音频和视频文件，让浏览器决定它最舒适和能够播放的格式。目前这有点麻烦，但希望未来我们能够选择更少的格式，获得更一致的结果。
音频文件格式
还有一些音频文件格式。让我们来看看这些。
-
AAC - 高级音频编码文件更为人所知的是 AAC。这种音频文件格式被设计成在相同比特率下比 MP3 更好听。苹果使用这种音频文件格式来制作 iTunes 音乐商店的音频文件。由于 AAC 音频文件格式支持 DRM，苹果提供受保护和非受保护格式的文件。AAC 有专利，因此从定义上来说，我们也不能完全称其为开源音频文件格式。所有苹果硬件产品，包括他们的 iPhone 和 iPad 移动设备以及 Flash，都支持 AAC 音频文件格式。支持 AAC 的浏览器包括：https://github.com/OpenDocCN/freelearn-html-css-js-zh/raw/master/docs/h5-mtmd-dev-cb/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-mtmd-dev-cb/img/1048_08_14.jpg
-
Ogg - 我们之前讨论过 Ogg Theora 视频文件格式。现在，让我们来看看 Ogg Vorbis 音频格式。正如之前提到的，Ogg 文件没有专利，因此被视为开源。
提示
另一个有趣的事实是：根据维基百科，“Vorbis 是以《小神》中的 Exquisitor Vorbis 角色命名的。”
文件格式不可知。
我们花了很多时间来检查这些不同的视频和音频文件格式。每种格式都有其优点和缺点，并且受到各种浏览器的支持（或不支持）。有些比其他的效果更好，有些听起来和看起来比其他的更好。但好消息是：新的 HTML5 <video>和<audio>元素本身是文件格式不可知的！这些新元素不在乎您引用的视频或音频文件的类型。相反，它们提供您指定的内容，并让每个浏览器做它最舒服的事情。
有一天我们能停止这种疯狂吗？
最重要的是，直到一个新的 HTML5 音频和一个新的 HTML5 视频文件格式成为所有浏览器和设备的明确选择，音频和视频文件将不得不被编码多次进行播放。不要指望这种情况很快会改变。
为所有人显示视频
根据作者 Mark Pilgrim 的说法，您的 HTML5 网络视频工作流程将如下所示：
-
制作一个使用 WebM（VP8 和 Vorbis）的版本。
-
制作另一个版本，该版本在 MP4 容器中使用 H.264 基线视频和 AAC“低复杂度”音频。
-
制作另一个版本，该版本在 Ogg 容器中使用 Theora 视频和 Vorbis 音频。
-
从单个
<video>元素链接到所有三个视频文件，并回退到基于 Flash 的视频播放器。
Kroc Camen 在创建“面向所有人的视频”时确实做到了这一点，这是一段 HTML 代码，如果用户的浏览器可以处理它，就会显示新的 HTML5 视频元素，如果不能，就会显示 Flash 电影 —— 而无需 JavaScript。让我们看看 Kroc 是如何做到的：camendesign.com/code/video_for_everybody。
如何做…
<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& image=__POSTER__.JPG&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 做了什么。首先，他调用了浏览器本地播放控件，以及新的 HTML5 视频元素的相关高度和宽度。
<video controls height="360" width="640">
接下来，Kroc 依次调用每个新的 HTML5 视频源，从 MP4 文件开始。桌面浏览器不太在乎 HTML5 视频文件的顺序，但 iPad 对于想要首先指定 MP4 文件很挑剔，所以好吧。又是你赢了，史蒂夫·乔布斯。
<source src="img/__VIDEO__.MP4" type="video/mp4" />
<source src="img/__VIDEO__.OGV" type="video/ogg" />
然后，Kroc 通过调用相同文件的 Flash 视频版本来保险，以应对无法处理新的 HTML5 视频元素的软弱浏览器。
<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& image=__POSTER__.JPG&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 视频文件本身，以封闭（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 视频元素文件，那么您将看到它。如果它不能做到，代码堆栈中还包括了一个 Flash 电影，所以您应该会看到它。如果由于某种原因，您的浏览器无法原生支持新的 HTML5 视频元素，Flash 播放器崩溃或不可用，您将看到一个静态图像。每个人都有保障。
使用此方法将显示新的 HTML5 视频元素的浏览器包括：
使用此方法将显示 Flash 视频的浏览器包括：
还有更多…
所有其他 Flash 视频嵌入方法都会提示用户下载 Flash（如果尚未安装）。《面向所有人的视频》独特之处在于它不会这样做。作者 Kroc Camen 是有意为之，他说：
“用户已经有足够的安全问题了，而不需要随机的网站提示他们安装东西-对于那些不想要或无法使用 Flash 的人来说，这更加恼人。”
浪费 mime 是一件可怕的事情
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。
创建无障碍音频和视频
我们已经非常广泛地研究了如何向人们提供在线 HTML5 video，而不管他们的浏览器是什么，但对于依赖辅助技术的人，我们并没有给予太多关注。现在结束了。
如何做到…
首先，我们将从 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& image=__POSTER__.JPG&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>
它是如何工作的…
你会注意到的第一件事是，我们将新的 HTML5 video元素包装在一个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&
image=__POSTER__.JPG&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>
到目前为止，我们仍然使用的是向能够处理它的浏览器提供新的 HTML5 video元素的方法，并将 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设置新的 HTML5 track元素的源语言。在这种情况下，en代表英语。不幸的是，目前没有浏览器支持新的track元素。
最后，我们允许最后一点备用内容，以防用户无法使用新的 HTML5 video元素或 Flash 时，我们会给他们一些纯文本内容。
<p>Final fallback content</p>
现在，即使用户看不到图像，他们至少会得到一些描述性内容。
接下来，我们将创建一个容器div来容纳我们基于文本的字幕。因此，目前没有浏览器支持新的 HTML5 audio或video元素的闭合字幕，我们将留出空间来包含我们自己的字幕：
<div id="captions"></div>
最后，我们将包括 Kroc 的文本提示，以下载 HTML5 video的封闭或开放文件格式：
<p><strong>Download Video:</strong>
Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>
</p>
还有更多…
除了新的 HTML5 audio和video元素的可选controls属性之外，还有可选的loop属性。你可能会猜到，这个例子将允许 HTML5 video一直播放：
<video controls height="360" loop width="640">
始终考虑无障碍。
我们默认提供的最终描述性内容可能是为使用辅助技术的人提供可下载链接的替代位置。这将使能够看到或听到的人无法下载，因此你应该确定这种方法是否适合你。
浏览器支持
对新的 HTML5 audio和video元素具有最佳辅助功能支持的网络浏览器包括：
查看更多
你可以在html5accessibility.com上跟踪 HTML5 的可访问性。该网站跟踪新的 HTML5 功能，如audio和video在哪些浏览器中可用。你可能会惊讶地发现，截至目前，Opera 是最不友好的可访问性的网络浏览器，甚至低于微软 Internet Explorer 9。惊喜吧。
另请参阅
Video.Js 是另一个免费的开源 HTML5 视频播放器。它很轻量，不使用任何图像，但通过 CSS 完全可定制。它看起来很棒，并支持苹果 Safari、Google Chrome、微软 Internet Explorer 9、Mozilla Firefox 和 Opera，同时还支持 IE 6-8 的回退。它甚至适用于 iPhone、iPad 和 Android 等移动设备。请访问videojs.com查看。
打造流畅的音频播放器
Neutron Creations 的负责人和联合创始人兼前端开发人员本·博迪恩为 Tim Van Damme 的 The Box 播客创建了一个定制的 HTML5 audio播放器，网址为thebox.maxvoltar.com。本的创作快速、直观且流畅。让我们深入了解他是如何做到的。
本的自定义 HTML5 audio播放器具有被采访者（在这种情况下是 Shaun Inman）的吸引人照片，一个播放/暂停按钮，指示播放进度的轨道，以及如果你愿意，将 HTML5 audio播放器弹出到一个单独的窗口的能力。就是这样。没有更多的需要。作为一个额外的触摸，注意 HTML5 audio播放器条的轻微透明度细节。平滑。
如何做到这一点…
起初，本的标记似乎看起来非常简单：
<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 audio标签在哪里？！”别担心。本是个聪明人，对此有计划。但首先让我们看看他到目前为止做了什么。
<p class="player">
到目前为止，这很简单。本创建了一个包装元素（在这种情况下是<p>）来放置他的播放器。他可以使用<div>吗？也许。做对你和你的项目最有意义的事情。
<span id="playtoggle" />
然后，本使用这个自闭合的（注意末尾的斜杠）span来进行播放/暂停切换按钮。
<span id="gutter">
<span id="loading" />
<span id="handle" class="ui-slider-handle" />
</span>
现在，事情变得有趣起来。本的“排水沟”span包含了时间轴轨道，显示 HTML5 audio文件的加载或缓冲进度的条形元素，以及指示播放头的圆形元素，如果你选择，可以来回“擦洗”。
<span id="timeleft" />
最后，本使用另一个自闭合的span来显示剩余的时间，以分钟和秒为单位。
提示
<span>元素可以胜任，但它并不是非常语义化，是吗？Patrick H. Lauke 迅速指出，使用可聚焦元素将大大提高这种方法对依赖辅助技术的人的可访问性。
它是如何工作的…
本使用 jQuery 来检测对 HTML5 audio的支持。
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 audio，它将提供完整的 HTML5 <audio>标签，包括对.ogg, .mp3和.wav的回退，这是我们尚未使用过的文件格式。由于新的 HTML5 <audio>和<video>元素是文件格式不可知的，.wav文件也应该可以正常工作。
本已经创建了一个简单的 JavaScript 代码片段，允许浏览器做他们感觉最舒服的事情。如果这对你和你的项目有意义，考虑这种方法，但记住，你依赖 JavaScript 来完成大部分工作，而不是我们已经看过的其他方法，这些方法不依赖于它。
提示
请注意，如果您使用<div>来包含 HTML5“视频”播放器，那么 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 来创建 Ben 定制的 HTML5“音频”播放器之后，唯一剩下的就是对其进行样式设置：
.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
当包装内容引人入胜时，花时间创造有趣的东西会更容易和更有回报。The Box 音频采访总是很有趣——只是可惜作者 Tim Van Damme 不经常发布它们。希望将来会有所改变。在thebox.maxvoltar.com上查看。
注意细节
当页面上一次只有一个新的 HTML5“音频”或“视频”元素时，这种方法效果很好。如果您需要多个，您将不得不修改 JavaScript 以连接到标记中的多个“挂钩”。
另请参阅
SublimeVideo 采用了一种不同的方法来进行 HTML5 在线视频播放：在这种情况下，播放器不是由您创建或托管的，而是由云中播放器的制造商创建的。好处是您始终拥有可能的最新、最新鲜的播放器版本。这样，当新功能可用或错误被修复时，您无需做任何事情。您自动拥有最新的功能。在sublimevideo.net上查看。
为移动设备嵌入音频和视频
到目前为止，我们只是触及了移动体验，但随着越来越智能的移动设备的开发增加，我们需要将注意力转向如何在这些设备上显示我们的新 HTML5“音频”和“视频”。以下是方法。
如何做…
现在我们知道如何为我们的目标受众选择 HTML5“音频”或“视频”文件格式，我们现在可以将注意力转向确保他们不仅可以在台式电脑和笔记本电脑上听到或观看，还可以在移动设备上听到或观看。
我们将首先在vimeo.com上创建一个免费帐户。注册完成后，选择主菜单中的上传|视频功能。您将选择要上传的文件，添加可选的元数据，然后让 Vimeo 服务器设置您的文件。接下来真正的激动时刻开始了：嵌入“视频”。从 Vimeo 主菜单中选择工具|嵌入此视频。
它是如何工作的…
Vimeo 过去使用我们之前看过的老式 Flash 嵌入方法。现在它使用基于 iFrame 的方法，可以在 iPhone、iPad 和其他移动设备上播放 HTML5“视频”。以下是一个示例，基于作者上传的一个“视频”：
<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“视频”，您可以像这样使其全屏：
Vimeo 提供了更多
Vimeo 还允许您从电子邮件联系人列表中添加朋友，创建“视频”订阅，制作小部件等等。他们现在甚至提供视频学校，以帮助用户了解捕捉、编辑和分享视频的最有效方法。
循环回来。
YouTube，世界上最受欢迎的在线视频观看网站，现在也采用基于 iFrame 的嵌入视频的方法。我们可以采用本章开头使用的“Neutraface”视频，使用新的基于 iFrame 的嵌入方法，得到更语义化和友好的结果。它也通过了验证！
<iframe title="YouTube video player" width="1280" height="750" src="img/xHCu28bfxSI?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
看看这有多漂亮！
我们已经完全转变了我们的视频捕捉、编辑和播放能力，以在现代浏览器中运行，同时支持依赖辅助技术和移动设备的用户。这是一个不断发展的过程。
另请参阅
Adobe 是否在自掘坟墓？并非如此。2011 年初，Adobe 推出了一个免费的 Flash 转 HTML5 转换器，代号“Wallaby”。不幸的是，许多设计师和开发人员认为 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 数据库
-
创建一个缓存清单并离线使用站点
-
使用地理位置 API 和
geo.js显示当前位置
介绍
HTML5 引入了一种新的存储信息的方式，而不使用 cookies。这使得设计师和开发人员在处理和显示动态内容时具有更大的灵活性。我们将从测试浏览器是否支持三种主要的数据存储方法开始，最后创建一个使用本地存储来存储和访问视频的 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，并在浏览器窗口中打开它。你应该看到类似以下截图的结果：
它是如何工作的…
我们创建的 HTML5 测试页面使用了一小段 JavaScript 代码来查询浏览器是否支持特定的存储方法。我们首先编写了一个标准的 HTML5 页面，包括适当的<html>、<head>和其他文档标签。如果需要复习它们，可以在本书的早期章节中找到。接下来，我们使用简化的<script>标签设置了 JavaScript 代码片段的开头块。HTML5 JavaScript API 在本书的其他地方有更详细的介绍。我们创建了一个名为RunTest()的函数来包含变量和代码。然后创建了两个变量。变量 supp 被赋予了一个空字符串的值。这将包含每种存储方法的最终支持结果。我们正在循环遍历 window 对象的属性。在每次迭代中，当前属性暂时存储在mydata变量中。这使我们能够测试属性是否符合三种情况。
接下来，我们使用 switch 语句来测试mydata变量与我们感兴趣的特定属性。因为我们一次只测试一个值，而且列表很短，这是测试每种存储方法支持的好方法。switch 语句的主体包含三种情况，每种情况都包含一个必须评估的表达式。如果支持存储方法，则每种情况的最终操作是，如果表达式评估为 true，则将文档主体中结果文本的值从“不支持”更改为“支持”。如果情况评估为 false，则页面结果部分显示的文本将保持不变。
创建代码后，我们使用 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 开发人员工具窗口导航区域中的本地存储，然后单击其中的子菜单。您应该看到类似以下截图的结果：
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标签。给文章标签一个 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 页面上显示，类似于以下截图中显示的方式：
它是如何工作的…
在这个例子中，我们为两个会话变量设置了唯一的值。会话存储使用键/值对，因此每个变量在创建时必须设置一个值。默认情况下，这些值是字符串。
我们通过输入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标签之间添加一个脚本标记。脚本应链接到ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js上的 1.5.2 最小化的 jQuery 库。您的代码现在应该类似于以下代码块：
<!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 标签，并保存文件。在浏览器窗口中打开它。现在，您应该能够开始输入自己的故事，并在页面上看到输入的文本，即使您关闭浏览器并稍后重新打开它。它应该类似于以下截图：
工作原理…
当我们将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的变量。将 JavaScript 函数parseInt赋值给它，其中包含一个本地存储getItem方法，参数为"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文本字段添加一个标签标签。将"Enter the radius of the circle:"作为标签文本。创建一个带有 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 页面应该如下所示：
它是如何工作的…
HTML 页面中显示的文本字段接受访问者输入并将其作为值传递给storemyradius()函数。我们声明了一个名为myradiusToSave的变量，并将其赋值为document.getElementById('myradius').value；它存储了myradius中包含的值。然后它将文本字段"myradius"中输入的值传递给本地存储的setItem方法。在将值传递给本地存储之前，我们需要验证myradiusToSave实际包含一个不为空的值。如果不为空，那么就有数据可以保存到本地存储中。然后，使用setItem将该值保存到本地存储中，作为键/值对的一部分。为了将myradius值作为数字使用，我们需要将其从字符串转换回整数。这是通过调用parseInt JavaScript 函数来完成的。接下来，我们创建了一个名为diameter的变量，用于保存我们的直径公式的结果，即半径值乘以 2。最后，我们使用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数组中的键/值对，如下面的屏幕截图所示：
提示
在使用 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>
它是如何工作的…
当我们在浏览器中打开我们刚创建的页面时，我们将看到我们使用数据库来显示的信息。这是因为查询和循环一起工作，通过数据库并显示适当的信息。
更多信息…
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
页面应该显示类似于以下内容：
它是如何工作的…
创建缓存清单为浏览器提供了一个在离线加载页面时使用的清单。虽然离线存储页面的想法是它不需要频繁更新，但使用版本号允许作者在用户下次连接到互联网时推送更新。
并非所有浏览器或系统都能正确解释清单文件类型，因此包含一个.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元素作为参数，而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 输入一个新的状态。状态文本为"Receiving…"。
function initialize(){ if(geo_position_js.init()){ document.getElementById('current').innerHTML="Receiving...";
如果我们无法获取位置或者由于某种原因浏览器不支持获取当前位置，可以在 helper 消息文本中添加文本以显示，如下所示的代码块：
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>
在浏览器窗口中打开页面，您应该看到类似以下截图的结果：
它是如何工作的…
使用geo.js简化了在多个设备上使用地理位置信息。它提供了准备好的错误消息，并遵循 W3C 的实现标准，以及“回退”到诸如 Google Gears 之类的工具的能力。首先，我们需要创建一个包含地图显示和处理选项数组的变量脚本，实例化一个新的地图对象，并绘制一个标记以将用户的当前位置固定到屏幕上。悬停在标记上会显示一个带有标题文本的气泡窗口。这个文本也可以包含一个链接，用于获取并显示驾驶方向、评论或笔记。当页面加载时，地图选项创建函数map_initialize()和主要的触发函数initialize()被调用。在使用geo.js的帮助下确定用户的当前位置并绘制地图时，会显示一个临时状态消息。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
