HTML5网页前端设计第3版 第08章教案-HTML5媒体API

《HTML5网页前端设计》教案第8章HTML5媒体API一、教学目标：理解音频与视频的概念；理解HTML5音频与视频的作用；熟悉HTML5音频和视频支持的媒体文件格式；掌握检测浏览器是否支持HTML5媒体的方法；掌握HTML5中<audio>和<video>标签的常见用法；掌握HTML5媒体API其他功能。二、教学重点和难点：重点：掌握HTML5中<audio>和<video>标签的常见用法；难点：不支持HTML5媒体的兼容解决方法。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：本章主要介绍HTML5媒体API的功能与应用，包括HTML5音频和视频的使用。使用该技术可以在页面上直接播放当前浏览器所支持的音频或视频格式，无需使用flash等第三方插件。并且可以通过JavaScript代码控制媒体文件的暂停/播放和跳转等功能。五、教学基本内容：8.1HTML5媒体API概述 8.1.1HTML5音频和视频 HTML5媒体API提供了一种用元素标签来包含音频和视频的标准，可以做到在无需任何插件的情况下直接播放媒体文件，并通过一系列属性规定媒体文件的来源、循环方式和是否自动播放等。8.1.2HTML5媒体支持的格式 HTML5媒体支持的音频/视频文件格式主要有MP3、MPEG-4、Wav、Ogg和WebM。8.2主流浏览器支持情况一览 8.2.1对HTML5音频的支持情况 目前HTML5支持的常用音频格式有三种：MP3格式：媒体文件的后缀名为.mp3；Ogg格式：媒体文件的后缀名为.ogg；Wav格式：媒体文件的后缀名为.wav。主流浏览器对这三种视频格式的支持情况如表8-1所示。表8-SEQ表6-\*ARABIC1主流浏览器对HTML5音频格式的支持情况音频格式EdgeFirefoxChromeSafariOperaMP3支持不支持支持支持不支持Ogg支持支持支持不支持支持Wav支持支持不支持支持支持在开发过程中，如果无法明确用户使用的浏览器类型则需要起码准备两种音频格式进行备选。8.2.2对HTML5视频的支持情况 目前HTML5支持的常用视频格式有三种：MPEG4格式：带有H.264视频编码和AAC音频编码，媒体文件的后缀名为.mp4；Ogg格式：带有Theora视频编码和Vorbis音频编码，媒体文件的后缀名为.ogg；WebM格式：带有VP8视频编码和Vorbis音频编码，媒体文件的后缀名为.webm。主流浏览器对这三种视频格式的支持情况如表8-2所示。表8-SEQ表6-\*ARABIC2主流浏览器对HTML5视频格式的支持情况视频格式EdgeFirefoxChromeSafariOperaMPEG4支持支持支持支持支持Ogg不支持支持支持不支持支持WebM不支持支持支持不支持支持在开发过程中，如果无法明确用户使用的浏览器类型则需要起码准备两种视频格式进行备选。8.3HTML5音频的应用 8.3.1HTML5音频的基本格式 HTML5音频所使用的<audio>标签的基本语法结构如下：<audiosrc="音频文件的URL"controls></audio>其中src属性可以是音频文件的URL地址或本地文件路径；controls属性用于添加音乐播放器的播放/暂停按钮以及声音大小调节的控件，标准写法为controls=”controls”，也可以直接简写成controls，作用完全相同。例如：<audiosrc="song.mp3"controls></audio>8.3.2检查浏览器支持情况1.使用<audio>标签检测可以直接在<audio>首尾标签之间插入提示语句用于提示浏览器不支持的情况。在不支持<audio>标签的浏览器中会直接显示出该提示语句，若浏览器支持该标签则不会显示此提示语句。2.使用JavaScript检测除了直接使用<audio>标签提示浏览器对HTML5音频的支持情况外，还可以使用JavaScript语句检测浏览器是否支持HTML5音频。其原理是利用JavaScript的document.creatElement(‘标签名称’)语句动态创建<audio>标签，然后检测<audio>元素包含的canPlayType函数是否存在。代码如下：varsupportAudio=!!document.creatElement(‘audio’).canPlayType;其中等号左边的supportAudio是自定义的变量名称，可根据需要更改为其他内容；等号右边的document.creatElement(‘audio’)用于动态创建一个<audio>元素标签，然后检测其包含的canPlayType函数是否存在；前缀的双感叹号（！！）用于将检测结果转换为布尔值（boolean）类型，以此判断<audio>元素是否可以被真的创建出来，如果返回值为true则说明当前浏览器支持HTML5音频，否则说明当前浏览器不支持<audio>标签。8.3.3音频来源多样性 由于不同的浏览器对支持的音频格式不一样，可以在<audio>元素中使用<source>标签指定多个音频文件，为不同的浏览器提供可支持的编码格式。浏览器会按照先后顺序使用第一个可识别的格式。例如：<audiocontrols><sourcesrc="music/song.ogg"><sourcesrc="music/song.mp3">对不起，您的浏览器不支持HTML5音频API。</audio>在本例中浏览器会先判断音频是否支持.ogg格式，如果支持就会直接播放song.ogg文件，否则会继续判断是否支持.mp3格式，支持则播放song.mp3。如果依次判断下去没有任何文件格式可以被执行，则会返回给<audio>标签一个错误事件。使用这种方式可以确保主流浏览器均可正常播放音频文件。8.3.4自定义音频控制 如果不想在网页上显示<audio>标签自带的播放/暂停按钮以及音量调节等控件（例如希望作为网页的背景音乐），可以不添加其中的controls属性，重新用JavaScript对音频的播放进行控制。HTML5代码片段如下：//获取音频对象varmusic=document.getElementById("music");//获取音乐切换按钮vartoggleBtn=document.getElementById("btn");示例中节选JavaScript代码片段如下：if(music.paused){music.play();toggle.innerHTML="暂停";}else{music.pause();toggle.innerHTML="播放";}8.4HTML5视频的应用 8.4.1HTML5视频的基本格式HTML5视频所使用的<video>标签的基本语法结构如下：<videosrc="视频文件的URL"controls></video>其中src属性可以是视频文件的URL地址或本地文件路径。controls属性用于添加音乐播放器的播放和暂停按钮以及声音大小调节的控件。例如：<videosrc="video/art.mp4"controls></video>上述代码表示视频来源为video目录下的art.mp4视频文件，并且显示音乐播放器的播放、暂停按钮以及声音大小调节等控件。 8.4.2检查浏览器支持情况使用<video>标签检测和使用<audio>标签检查浏览器支持情况的原理一样，也可以直接在<video>和</video>标签之间插入提示语句用于检查浏览器支持情况。在不支持<video>标签的浏览器中会直接显示该提示语句，若浏览器支持该标签则不会显示此提示语句。使用JavaScript检测和检测浏览器是否支持HTML5音频的原理类似，也可以使用同样类型的JavaScript语句检测浏览器是否支持HTML5视频。用JavaScript的document.creatElement(‘标签名称’)语句动态创建<video>标签，然后检测<video>元素包含的canPlayType函数是否存在。代码如下：varsupportVideo=!!document.creatElement(‘video’).canPlayType; 8.4.3视频来源多样性 由于不同的浏览器对支持的视频格式不一样，可以在<video>元素中使用<source>标签指定多个视频文件，为不同的浏览器提供可支持的编码格式。浏览器会按照先后顺序使用第一个可识别的格式。例如：<videocontrols="controls"><sourcesrc="video/song.ogg"><sourcesrc="video/song.mp4">对不起，您的浏览器不支持HTML5视频API。</video>在本例中浏览器会先判断视频是否支持.ogg格式，如果支持就会直接播放song.ogg文件，否则会继续判断是否支持.mp4格式，支持则播放song.mp4。如果依次判断下去没有任何文件格式可以被执行，则会返回给<video>标签一个错误事件。如果能明确视频文件所需视频解码器的值，也可以在<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.4自定义视频控制 如果不想使用<video>标签自带的播放/暂停按钮等控件，同样也可以禁用其中的controls属性，用JavaScript对视频的播放进行控制。视频播放时默认的画面大小是视频源文件的画面尺寸，如果需要更改也可以为<video>标签添加width（宽度）和height（高度）属性放大或缩小视频画面。8.5HTML5媒体API其他通用功能 8.5.1标记媒体播放时间范围 在为<audio>标签或<video>标签设置src属性从而指定播放音频或视频来源时，可以加入一些额外的信息来指定需要播放的时间段。具体语法格式如下：src="音频或视频的URL地址#t=[starttime][,endtime]"需要使用井号（#）标志分割前面的媒体文件来源URL和后面的额外信息。其中starttime指的是指定音频或视频的开始播放时间，如果省略不写则默认开始时间是音频或视频的开头；endtime指的是指定音频或视频的终止播放时间，如果省略不写则默认终止时间是音频或视频的结束。开始时间starttime和终止时间endtime均可以填入整数或浮点数类型的秒数，也可以写成时:分:秒的格式。例如，表示指定的媒体文件从第8秒开始播放，到第25秒结束，相关代码如下：src="video/art.mp4#t=8,25"表示指定的媒体文件从第8.5秒开始播放，到第20秒结束，相关代码如下：src="video/art.mp4#t=8.5,20"表示指定的媒体文件从最开始播放，到第1小时50分钟的时候结束，相关代码如下：src="video/art.mp4#t=,01:50:00"表示指定的媒体文件从第20秒开始播放，一直播放到最后结束，相关代码如下：src="video/art.mp4#t=20"8.5.2跳转媒体播放时间点 HTML5媒体API允许媒体内容在播放过程中直接跳转到指定的时间点，可以通过设置<audio>或<video>标签的currentTime属性值（单位：秒）来完成。写法如下：//获取媒体元素对象varmediaFile=document.getElementById("media");//设置currentTime属性值，例如需要跳转到第200秒。mediaFile.currentTime=200;8.5.3获取媒体播放时间 HTML5媒体API允许获取媒体播放允许的开始时间与结束时间，需要使用<audio>或<video>标签的seekable属性。seekable属性的start(index)方法可以用于获取媒体播放的开始时间，end(index)方法用于获取媒体播放的结束时间，其中index表示媒体对象的来源序号，默认只有一个的情况填数字0。这两个方法的返回值均为时间单位秒。获取媒体的开始时间写法如下：//获取媒体元素对象varmediaFile=document.getElementById("media");//获取媒体播放的开始时间（单位：秒）mediaFile.seekable.start(0);获取媒体的结束时间写法如下：//获取媒体元素对象varmediaFile=document.getElementById("media");//获取媒体播放的结束时间（单位：秒）mediaFile.seekable.end(0);HTML5媒体API同时也允许获取媒体目前播放到的时间点，使用的是<audio>或<video>标签的played属性，该属性中的end(index)方法可以获取单位为秒的当前播放时间节点。获取媒体当前播放的秒数写法如下：//获取媒体元素对象varmediaFile=document.getElementById("media");//获取媒体当前播放的秒数mediaFile.played.end(0);注：played属性也包含start(index)方法用于获取视频播放的开始时间，已经播放的时间范围为start()和end()方法的时间差。如果媒体文件默认从0开始播放，则使用end(index)方法获取到的即是已经播放的时间，无需另外获取起始播放时间。8.5.4终止媒体文件的下载HTML5媒体API中的pause()方法可以用于暂停音频或视频的播放，但是即使处在暂停状态，浏览器仍然会在后台继续下载媒体文件。解决方案是先暂停媒体文件的播放，然后将<audio>或<video>标签的src属性去除或者设置为空。写法如下：//获取媒体元素对象varmediaFile=document.getElementById("ID名称");//暂停当前媒体文件的播放mediaFile.pause();//去除src属性mediaFile.removeAttribute("src");//或者将src属性设置为空值mediaFile.src=""; 8.5.5使用Flash播放器 由于不支持<audio>或<video>标签的浏览器会执行该标签首尾标记内部的内容，可以利用该原理为此类浏览器增加一个Flash播放器的备选项，以保证浏览器可以正常播放媒体文件。以<video>标签为例，其语法格式如下：<videosrc="video.mp4"controls><objectdata="player.swf"type="application/x-shockwave-flash"><paramvalue="player.swf"name="movie"/></object></video>当<video>标签不被支持时，浏览器就会执行其内部的<object>标签相关内容了。其中player.swf可替换为其他flash播放器。需要注意的是，只有IE浏览器可以接受为该<object>标签添加id名称或class名称，其他浏览器均不支持此做法。为保证浏览器兼容性最大化，尽量不要为<object>标签添加此类额外属性。8.6实验案例——在线教学视频的设计与实现背景介绍：现如今慕课（MassiveOpenOnlineCourses，MOOC）的概念正在兴起，例如哈佛大学等世界级名校陆续设立了网络学习平台，用户可以在线免费观看和学习自己感兴趣的课程。在我国，网易也正式推出了“全球名校视频公开课项目”，内容涵盖了科技、艺术、金融、人文多个领域。功能要求：设计一款基于HTML5视频技术的在线视频播放页面，包含视频播放窗口和课程目录列表。其中视频播放窗口带有相关控件，可以由用户点击切换全屏效果，以及随时暂停和拖拽到指定时间继续播放。课程目录列表用于显示当前课程的大纲，用户点击列表中不同的选项可以使得课程跳转到相应的播放时间继续进行播放。8.7本章小结本章节介绍了HTML5媒体API中的两个重要标签：<audio>标签和<video>标签。使用<a