文档介绍：
教学内容:在过去的10年里,网页设计师使用 Flash、JavaScript 或其他复杂的软件和技术来创建网站。现在可以使用HTML5实现交互式服务、单页UI、交互式游戏、复杂业务应用。凭借对标准驱动的移动应用开发的支持,以及各种强大特性,HTML5迎来了它的黄金时代。本章就来介绍HTML5开发实战。
第11章 HTML5开发实战
教学重点
掌握HTML5 视频video
掌握HTML5 音频Audio
掌握HTML5 地理定位
掌握HTML5 画布canvas
掌握HTML5 SVG
11.1 HTNL5视频video
以前我们要在网页中嵌入视频的最常用的办法是使用Flash,通过使用object和embed标签,就可以通过浏览器播放SWF、FLV等格式视频文件,但是前提是浏览器必须安装第三方插件Adobe Flash Player。而HTML5的到来,改变了这一事实,只需要使用video标签就可以轻松加载视频文件,而不需要任何第三方插件。
HTML5中的video标签的出现将改变浏览器必须加载插件的情况,进一步改善用户Web体验,让用户在轻松愉快的情况下观看视频。HTML5使用video标签可以控制视频的播放与停止、循环播放、视频尺寸等。Video标签含有src、poster、preload、autoplay、loop、controls、width、height等属性。
11.1.1 video概述
以前网页中的大多数视频是通过插件来显示的。然而,并非所有浏览器都拥有同样的插件。HTML5规定了一种通过video元素来包含视频的标准方法。
11.1.2 在网页中添加视频文件
Source元素用于给媒体指定多个可选择的文件地址,且只能在媒体标签没有使用src属性时使用。source 元素可以链接不同格式的视频文件。浏览器检测并使用第一个可识别的格式。
11.1.3 链接不同的视频文件
HTML5规定了一种通过audio元素来包含音频的标准方法。audio元素能够播放声音文件或者音频流。
11.2 HTML5音频Audio
11.2.1 Audio元素简介
在HTML5中,audio元素与video元素非常类似,但audio元素没有视频效果。audio元素是HTML5的一个原生元素,它消除了使用第三方播放器的必要。与video元素类似,可以使用CSS设置audio元素的样式。
在audio标记中,如果不包含controls属性,则audio播放器将不会呈现在页面上。在这种情况下,用户无法使用标准控件来启动音频播放。在不呈现audio播放器的情况下,可以启动audio元素音频播放的方法放在页面的load事件中。
11.2.2 隐藏audio播放器
11.2.3 使用audio元素的事件
audio可以触发很多事件。其中很多是标准事件,如鼠标单击(click)、鼠标移动(mouse move)、获得焦点(focus)等事件。另外一些则是audio元素所特有的事件,包括播放(play)、暂停(pause)、音量改变(volume change)、播放完毕(ended)等。

1