HTML5程序设计-播放多媒体.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 视频的宽度 接上 ended 是否结束 height 视频的高度 loop 是否循环播放 muted 是否静音 networkState 当前的网络状态。0表示尚未初始化，1表示正常但没有使用网络，2表示正在下载数据，3表示没有找到资源 paused 是否暂停 played 是否已播放 preload 设置或返回视频是否应该在页面加载后进行加载 src 设置或返回视频元素的当前来源 volume 设置或返回视频文件的音量 videoWidth 原始视频的宽度 【例8-12】 演示width属性和videoWidth属性的使用 在网页中定义一个video标签，代码如下： video id = video1 src=/lab/inc/BigBuckBunny.mp4 controls 您的浏览器不支持video标签。 /video 定义一个“小”按钮，定义按钮的代码如下： button id=MakeSmall onclick= MakeSmall ();小/button 单击按钮Ma