第8章HTML5.pptVIP

【例8-2】 在HTML文件中定义一个audio标签，用于播放背景音乐music.wav，代码如下： html head title使用audio标签播放背景音乐/title /head body h1播放背景音乐的例子/h1 audio src=music.wav autoplay loop 您的浏览器不支持 audio 标签。 /audio /body /html 8.1.3 设置替换音频源 在audio标签中，可以使用source标签指定多个要播放的音频文件。语法如下： audio source src=音频文件1 source src=音频文件2 source src=音频文件3 …… /audio 2．effectAllowed属性 【例8-3】 改进【例8-2】，增加替换音频源music.mp3，代码如下： html head title使用audio标签播放音频/title /head body h1Audio标签的例子/h1 audio src=music.wav controls source src= music.wav source src= music.mp3 您的浏览器不支持 audio 标签。 /audio /body /html 【例8-6】 在网页中定义一个按钮，单击此按钮时，会播放music.wav。定义按钮的代码如下： button id=play onclick=playAudio();播放/button 单击按钮play将调用playAudio()函数。playAudio()函数的定义代码如下： script type=text/javascript function playAudio(){ if(window.HTMLAudioElement){ media = new Audio(music.wav); media.controls = false; media.play(); } } /script 【例8-7】 改进【例8-6】，播放音频后，将“播放”按钮改为“暂停”按钮，单击“暂停”按钮后，暂停播放，并将按钮改为“播放”按钮。 因为要对同一个音频进行播放和暂停2种操作，所以不能像【例8-6那样】在每次操作时创建audio对象，需要在网页中定义一个音频播放器，代码如下： audio id=audio1 src=music.wav 您的浏览器不支持 audio 标签。/audio 定义“播放／暂停”按钮的代码如下： button id=play onclick=playAudio();播放/button playAudio()函数 script type=text/javascript function playAudio(){ if(window.HTMLAudioElement){ var media = document.getElementById(audio1); var btn = document.getElementById(play); if (media.paused) { media.play(); btn.textContent = 暂停; } else { media.pause(); btn.textContent = 播放; } } } /script 5．audio对象的事件 【例8-8】 改进【例8-7】，当播放完音频后，将按钮标题改为 “播放”。 在playAudio()函数中添加如下代码： media.addEventListener(ended, playend, true); 即指定media对象的ended事件触发时调用playend()函数。playend()函数的定义代码如下： function playend(){ var btn = document.getElementById(play); btn.textContent = 播放; } 8.２ HTML5视频 8.2.1 video标签 8.2.1 video标签 在HTML5中，可以使用video标签定义一个视频播放器，语法如下： video src=视频文件…/video src属性用于指定视频文件的url。 video标签支持的视频文件格式包括. Ogg、MPEG 4和WebM等。 video和之间的字符串/ video指定当浏览器不支持video标签时显示的字符串。 video标签的主