HTML5程序设计基础教程第8章.pptVIP

提示 不同浏览器的音频播放器控件的外观也不尽相同Internet Explorer 8及其之前版本不支持 audio标签。 使用source标签指定多个要播放的视频文件 video source src=视频文件1 source src=视频文件2 source src=视频文件3 …… /video 【例8-10】 html head title使用audio标签播放音频/title /head body h1Audio标签的例子/h1 video controls=controls source src=/lab/inc/BigBuckBunny.mp4 type=video/mp4/ source src=/lab/inc/BigBuckBunny.ogv type=video/ogg/ /video /body /html 8.2.2 使用JavaScript语言访问video对象 1．检测浏览器是否支持video标签 2．在JavaScript程序中获得video对象 3．video对象的属性 4．video对象的方法 5．video对象的事件 1．检测浏览器是否支持video标签 可以通过document.createElement()方法创建一个video对象，如果成功则表示浏览器支持video标签，否则表示不支持。 【例8-11】 在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持video标签。定义按钮的代码如下： button id=check onclick=check();检测浏览器是否支持video标签/button 单击按钮check将调用check()函数。check()函数的定义代码如下： script type=text/javascript function check(){ if(supports_video()){ alert(您的浏览器支持video标签。); } else{ alert(您的浏览器不支持video标签。); } } /script supports_video()函数用于检测浏览器是否支持video标签，代码如下： function?supports_video(){ return !!document.createElement(video).canPlayType; } 【例8-11】所述的网页 2．在JavaScript程序中获得video对象 一般在需要HTML网页中定义一个video标签，然后调用document.getElementById()函数获取对应的audio对象。例如定义video标签的代码如下： video id = video1 src=/lab/inc/BigBuckBunny.mp4 controls 您的浏览器不支持video标签。 /video 获取对应video对象的代码如下： var media = document.getElementById(video1); 3．video对象的属性 属 性 具 体 描 述 autoplay 设置或返回是否在加载完成后随即播放音频/视频 controls 设置或返回是否显示视频控件 currentSrc 返回当前视频的 URL currentTime 设置或返回视频文件开始播放的位置，返回值以“秒”为单位 duration 返回播放音频在某秒上的播放的长度 videoHeight 原始视频的高度 width 视频的宽度 HTML5基础教程 授课教师： 职务： 第8章 播放多媒体 课程描述 在HTML5之前，要在网页中播放多媒体，需要借助于flash插件。浏览器需要安装flash插件才能播放多媒体。使用HTML5提供的新标签audio和video可以很方便地在网页中播放音频和视频。 本章知识点 8.1 HTML5音频 8.２ HTML5视频 8.1 HTML5音频 8.1.1 audio标签 8.1.2 播放背景音乐 8.1.3 设置替换音频源 8.1.4 使用JavaScript语言访问audio对象 8.1.1 audio标签 在HTML5中，可以使用audio标签定义一个音频播放器，语法如下： audio src=音频文件…/audio src属性用于指定音频文件的url。audio标签支持的音频文件类型包括.wav、.mp3和.ogg等。 audio 和之间的字符串/ audio 指定当浏览器不支持audio标签时显示的字符串。 【例8-1】 html hea