HTML5网页前端设计（第3版）- 微课视频版 课件 CH08 HTML5 媒体API

第8章HTML5媒体API主讲人：XX老师本章学习目标理解音频与视频的概念；理解HTML5音频与视频的作用；熟悉HTML5音频和视频支持的媒体文件格式；掌握检测浏览器是否支持HTML5媒体的方法；掌握HTML5中<audio>和<video>标签的常见用法；目录8.1HTML5媒体API概述8.2主流浏览器支持情况一览8.3HTML5音频的应用8.4HTML5视频的应用8.5HTML5媒体API其他通用功能8.1.1HTML5音频和视频8.1.2HTML5媒体支持的格式8.1HTML5媒体API概述8.1.1HTML5音频和视频在HTML5之前，音频和视频通常是在浏览器上使用插件进行播放的，比如使用Flash播放器。但是这些插件不是所有浏览器都可以支持的，例如苹果公司的iOS系统、MacOS系统等使用的主流浏览器为Safari浏览器，该浏览器就无法支持flash插件。HTML5媒体API提供了一种用元素标签来包含音频和视频的标准，可以做到在无需任何插件的情况下直接播放媒体文件，并通过一系列属性规定媒体文件的来源、循环方式和是否自动播放等。8.1.2HTML5媒体支持的格式HTML5媒体支持的音频/视频文件格式主要有MP3、MPEG-4、Wav、Ogg和WebM。8.1.2HTML5媒体支持的格式MP3MP3全称为MPEG-1AudioLayer3，是由动态图像专家组（MovingPictureExpertsGroup，MPEG）制定的一套用于音频的混合压缩技术。其优点是压缩率高，可达到10:1-12:1左右，适用于网络传播。MPEG-4MPEG-4是一套用于音频、视频新的压缩编码标准，通常媒体文件的后缀名是.mp4。和MP3一样，MPEG-4由动态图像专家组（MPEG）制定的。MPEG-4于1998年11月被批准为正式标准，编号是ISO/IEC14496。8.1.2HTML5媒体支持的格式WavWav格式是一项微软和IBM定制的音频文件格式标准，用于在PC端存储音频流，通常该格式的媒体文件后缀名是.wav。Wav格式符合资源交换档案标准（ResourceInterchangeFileFormat，RIFF）标准。该格式主要用在Windows系统上，属于无损音乐格式，因此相对来说文件较大。8.1.2HTML5媒体支持的格式OggOgg是一种完全免费开放的媒体容器格式，由Xiph.Org组织进行维护，通常媒体文件的后缀名是.ogg。Ogg来源于游戏术语“ogging”，该术语来源于一款发布于1988年的免费开源网络游戏Netrek，这也是最早的网络团队游戏之一。Ogg容器格式拥有对于高质量多媒体的处理能力，包含一系列独立的流媒体如视频、音频、元数据、文本等。在Ogg多媒体框架中包含由Theora格式提供的视频层以及Vorbis格式和Opus格式提供的音频层。8.1.2HTML5媒体支持的格式WebMWebM是由Google发行的一种完全免费开放的视频文件格式，通常媒体文件的后缀名为.webm。WebM格式是基于Matroska容器（常见为后缀名为.mkv格式的文件）改造开发的新标准。WebM最初支持VP8视频和Vorbis音频解码器，2013年更新后支持VP9视频和Opus音频解码器。WebM标准是于2010年GoogleI/O大会上发布，支持Firefox、Opera和Chrome浏览器。8.2.1对HTML5音频的支持情况8.2.2对HTML5视频的支持情况8.2主流浏览器支持情况一览8.2.1对HTML5音频的支持情况目前HTML5支持的常用音频格式有三种：MP3格式：媒体文件的后缀名为.mp3；Ogg格式：媒体文件的后缀名为.ogg；Wav格式：媒体文件的后缀名为.wav。8.2.1对HTML5音频的支持情况音频格式EdgeFirefoxChromeSafariOperaMP3支持不支持支持支持不支持Ogg支持支持支持不支持支持Wav支持支持不支持支持支持注：在开发过程中，如果无法明确用户使用的浏览器类型则需要起码准备两种音频格式进行备选。8.2.2对HTML5视频的支持情况目前HTML5支持的常用视频格式有三种：MPEG4格式：带有H.264视频编码和AAC音频编码，媒体文件的后缀名为.mp4；Ogg格式：带有Theora视频编码和Vorbis音频编码，媒体文件的后缀名为.ogg；WebM格式：带有VP8视频编码和Vorbis音频编码，媒体文件的后缀名为.webm。8.2.2对HTML5视频的支持情况注：在开发过程中，如果无法明确用户使用的浏览器类型则需要起码准备两种视频格式进行备选。视频格式EdgeFirefoxChromeSafariOperaMPEG4支持支持支持支持支持Ogg不支持支持支持不支持支持WebM不支持支持支持不支持支持8.3.1HTML5音频的基本格式8.3.2检查浏览器支持情况8.3.3音频来源多样性8.3.4自定义音频控制8.3HTML5音频的应用8.3.1HTML5音频的基本格式HTML5提供了一种使用<audio>和</audio>标签来显示音频的标准方法。8.3.1HTML5音频的基本格式HTML5音频所使用的<audio>标签的基本语法结构如下：<audiosrc="音频文件的URL"controls></audio>其中src属性可以是音频文件的URL地址或本地文件路径；controls属性用于添加音乐播放器的播放/暂停按钮以及声音大小调节的控件，标准写法为controls=”controls”，也可以直接简写成controls，作用完全相同。8.3.1HTML5音频的基本格式例如：<audiosrc="song.mp3"controls></audio>8.3.1HTML5音频的基本格式【例8-1】音频标签<audio>的简单应用

8.3.1HTML5音频的基本格式HTML5音频API的<audio>标签有一系列属性用于对音频文件的播放进行设置，如表8-3所示。8.3.2检查浏览器支持情况使用<audio>标签检测使用JavaScript检测8.3.2检查浏览器支持情况1.使用<audio>标签检测可以直接在<audio>首尾标签之间插入提示语句用于提示浏览器不支持的情况。在不支持<audio>标签的浏览器中会直接显示出该提示语句，若浏览器支持该标签则不会显示此提示语句。8.3.2检查浏览器支持情况1.使用<audio>标签检测【例8-2】使用<audio>标签检测浏览器支持情况

8.3.2检查浏览器支持情况2.使用JavaScript检测除了直接使用<audio>标签提示浏览器对HTML5音频的支持情况外，还可以使用JavaScript语句检测浏览器是否支持HTML5音频。其原理是利用JavaScript的document.creatElement(‘标签名称’)语句动态创建<audio>标签，然后检测<audio>元素包含的canPlayType函数是否存在。8.3.2检查浏览器支持情况2.使用JavaScript检测varsupportAudio=!!document.creatElement(‘audio’).canPlayType;前缀的双感叹号（！！）用于将检测结果转换为布尔值（boolean）类型，以此判断<audio>元素是否可以被真的创建出来，如果返回值为true则说明当前浏览器支持HTML5音频，否则说明当前浏览器不支持<audio>标签。8.3.2检查浏览器支持情况2.使用JavaScript检测【例8-3】检测浏览器对HTML5音频的支持情况8.3.3音频来源多样性由于不同的浏览器对支持的音频格式不一样，可以在<audio>元素中使用<source>标签指定多个音频文件，为不同的浏览器提供可支持的编码格式。浏览器会按照先后顺序使用第一个可识别的格式。8.3.3音频来源多样性例如：<audiocontrols><sourcesrc="music/song.ogg"><sourcesrc="music/song.mp3">对不起，您的浏览器不支持HTML5音频API。</audio>在本例中浏览器会先判断音频是否支持.ogg格式，如果支持就会直接播放song.ogg文件，否则会继续判断是否支持.mp3格式，支持则播放song.mp3。如果依次判断下去没有任何文件格式可以被执行，则会返回给<audio>标签一个错误事件。8.3.3音频来源多样性【例8-4】音频来源的多样性8.3.4自定义音频控制如果不想在网页上显示<audio>标签自带的播放/暂停按钮以及音量调节等控件（例如希望作为网页的背景音乐），可以不添加其中的controls属性，重新用JavaScript对音频的播放进行控制。8.3.4自定义音频控制【例8-5】自定义音频控制按钮8.4.1HTML5视频的基本格式8.4.2检查浏览器支持情况8.4.3视频来源多样性8.4.4自定义视频控制8.4HTML5视频的应用8.4.1HTML5视频的基本格式HTML5提供了一种使用<video>和</video>标签来显示视频的标准方法8.4.1HTML5视频的基本格式HTML5视频所使用的<video>标签的基本语法结构如下：<videosrc="视频文件的URL"controls></video>其中src属性可以是视频文件的URL地址或本地文件路径。controls属性用于添加音乐播放器的播放和暂停按钮以及声音大小调节的控件。8.4.1HTML5视频的基本格式例如：<videosrc="video/art.mp4"controls></video>上述代码表示视频来源为video目录下的art.mp4视频文件，并且显示音乐播放器的播放、暂停按钮以及声音大小调节等控件。8.4.1HTML5视频的基本格式【例8-6】视频标签<video>的简单应用8.4.1HTML5视频的基本格式8.4.2检查浏览器支持情况1.使用<video>标签检测2.使用JavaScript检测8.4.2检查浏览器支持情况1.使用<video>标签检测和使用<audio>标签检查浏览器支持情况的原理一样，也可以直接在<video>和</video>标签之间插入提示语句用于检查浏览器支持情况。在不支持<video>标签的浏览器中会直接显示该提示语句，若浏览器支持该标签则不会显示此提示语句。8.4.2检查浏览器支持情况1.使用<video>标签检测【例8-7】使用<video>标签检测浏览器支持情况

8.4.2检查浏览器支持情况2.使用JavaScript检测和检测浏览器是否支持HTML5音频的原理类似，也可以使用同样类型的JavaScript语句检测浏览器是否支持HTML5视频。用JavaScript的document.creatElement(‘标签名称’)语句动态创建<video>标签，然后检测<video>元素包含的canPlayType函数是否存在。8.4.2检查浏览器支持情况2.使用JavaScript检测代码如下：varsupportVideo=!!document.creatElement(‘video’).canPlayType;前缀的双感叹号（！！）用于将检测结果转换为布尔值（boolean）类型，以此判断<video>元素是否可以被创建出来，如果返回值为true则说明当前浏览器支持HTML5视频，否则说明当前浏览器不支持<video>标签。8.4.2检查浏览器支持情况2.使用JavaScript检测【例8-8】检测浏览器对HTML5视频的支持情况8.4.3视频来源多样性由于不同的浏览器对支持的视频格式不一样，可以在<video>元素中使用<source>标签指定多个视频文件，为不同的浏览器提供可支持的编码格式。浏览器会按照先后顺序使用第一个可识别的格式。8.4.3视频来源多样性例如：<videocontrols="controls"><sourcesrc="video/song.ogg"><sourcesrc="video/song.mp4">对不起，您的浏览器不支持HTML5视频API。</video>8.4.3视频来源多样性如果能明确视频文件所需视频解码器的值，也可以在<source>标签的type属性中指定，这样可以帮助浏览器更有效率地做出正确的判断。例如：<videocontrols="controls"><sourcesrc="video/song.ogg"type=’video/ogg;codec="dirac,speex"’><sourcesrc="video/song.mp4"type=’video/mp4;codecs="avc1.42E01E,mp4a.40.2"’>对不起，您的浏览器不支持HTML5视频API。</video>8.4.3视频来源多样性【例8-9】视频来源的多样性8.4.4自定义视频控制

如果不想使用<video>标签自带的播放/暂停按钮等控件，同样也可以禁用其中的controls属性，用JavaScript对视频的播放进行控制。

视频播放时默认的画面大小是视频源文件的画面尺寸，如果需要更改也可以为<video>标签添加width（宽度）和height（高度）属性放大或缩小视频画面。8.4.4自定义视频控制【例8-10】自定义视频控制按钮8.4.4自定义视频控制【例8-10】自定义视频控制按钮cont.8.5.1标记媒体播放时间范围8.5.2跳转媒体播放时间点8.5.3获取媒体播放时间8.5.4终止媒体文件的下载8.5.5使用Flash播放器8.5HTML5媒体API其他通用功能8.5.1标记媒体播放时间范围在为<audio>标签或<video>标签设置src属性从而指定播放音频或视频来源时，可以加入一些额外的信息来指定需要播放的时间段。8.5.1标记媒体播放时间范围具体语法格式如下：src="音频或视频的URL地址#t=[starttime][,endtime]"需要使用井号（#）标志分割前面的媒体文件来源URL和后面的额外信息。其中starttime指的是指定音频或视频的开始播放时间，如果省略不写则默认开始时间是音频或视频的开头；endtime指的是指定音频或视频的终止播放时间，如果省略不写则默认终止时间是音频或视频的结束。8.5.1标记媒体播放时间范围开始时间starttime和终止时间endtime均可以填入整数或浮点数类型的秒数，也可以写成时:分:秒的格式。例如，表示指定的媒体文件从第8秒开始播放，到第25秒结束，相关代码如下：src="video/art.mp4#t=8,25"8.5.1标记媒体播放时间范围表示指定的媒体文件从第8.5秒开始播放，到第20秒结束，相关代码如下：src="video/art.mp4#t=8.5,20"8.5.1标记媒体播放时间范围表示指定的媒体文件从最开始播放，到第1小时50分钟的时候结束，相关代码如下：src="video/art.mp4#t=,01:50:00"8.5.1标记媒体播放时间范围表示指定的媒体文件从第20秒开始播放，一直播放到最后结束，相关代码如下：src="video/art.mp4#t=20"8.5.1标记媒体播放时间范围【例8-11】指定媒体文件的播放时间8.5.2跳转媒体播放时间点HTML5媒体API允许媒体内容在播放过程中直接跳转到指定的时间点，可以通过设置<audio>或<video>标签的currentTime属性值（单位：秒）来完成。8.5.2跳转媒体播放时间点写法如下：//获取媒体元素对象varmediaFile=document.getElementById("media");

//设置currentTime属性值，例如需要跳转到第200秒。mediaFile.currentTime=200;8.5.2跳转媒体播放时间点【例8-12】媒体文件播放时间点的跳转8.5.3获取媒体播放时间HTML5媒体API允许获取媒体播放允许的开始时间与结束时间，需要使用<audio>或<video>标签的seekable属性。seekable属性的start(index)方法可以用于获取媒体播放的开始时间，end(index)方法用于获取媒体播放的结束时间，其中index表示媒体对象的来源序号，默认只有一个的情况填数字0。这两个方法的返回值均为时间单位秒。8.5.3获取媒体播放时间获取媒体的开始时间写法如下：//获取媒体元素对象varmediaFile=document.getElementById("media");

//获取媒体播放的开始时间（单位：秒）mediaFile.seekable.start(0);8.5.3获取媒体播放时间获取媒体的结束时间写法如下：//获取媒体元素对象varmediaFile=document.getElementById("media");

//获取媒体播放的结束时间（单位：秒）mediaFile.seekable.end(0);8.5.3获取媒体播放时间HTML5媒体API同时也允许获取媒体目前播放到的时间点，使用的是<audio>或<video>标签的played属性，该属性中的end(index)方法可以获取单位为秒的当前播放时间节点。获取媒体当前播放的秒数写法如下：//获取媒体元素对象varmediaFile=document.getElementById("media");

//获取媒体当前播放的秒数mediaFile.played.end(0);8.5.3获取媒体播放时间【例8-13】获取当前播放时间8.5.4终止媒体文件的下载