Wdb前端开发》实验教学指导/实验四:在网页中使用表单和多媒体8 <video id="VideoPlayer"width="552" height=311"autoplay> <source src="media/Wo-ShangWenjie mp4" type="video/mp4"> <source src="media/Wo-ShangWenjie webm"type="video/ogg"> 您的浏览器不支持vdeo元素 div id="button Div"> -播放进度条-> <progress id="play Percent "max=100> div id="progress"> <div id="progressValue"></div> <!-播放控制按钮-> id="Play Br <button id="btn Play"onclick="Play OrPause("/il</button> < button id=" btn Mute" onclick=" setMute0”/>暂时静音</ button> /body> script type="text/javascript"> var muted=false var video= document. getElementByld("Video Player) videoaddEventListener(loadedmetadata', loadedmetadata, false video addEventListener(ended, videoEnded, false) video addEventListener(play, videoPlay, false) video addEventListener('pause', videoPause, false) video addEventListener(timeupdate', update Progress, false); video addEventListener("error", catchError, false) progress=document. getElement(progress") progress.onmouseover-progress_mouseover; progress.onmouseout=progress_mouseout, play Percent=document getElementByld(play Percent) play Percent. onmouseout=progress_mouseout <play Percent_clic function catch Error var error video error case 1 alert("视频的载入过程以为用户操作,已经被中止。"); 河南中医学院互联网应用技术研究 本讲共计12页|当前第8页《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单和多媒体 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 8 页 <video id="VideoPlayer" width="552" height="311" autoplay> <source src="media/Wo-ShangWenjie.mp4" type="video/mp4"> <source src="media/Wo-ShangWenjie.webm" type="video/ogg"> 您的浏览器不支持 video 元素 </video> </div> <div id="buttonDiv"> <!--播放进度条--> <progress id="playPercent" max=100> <div id="progress"> <div id="progressValue"></div> </div> </progress> <!--播放控制按钮--> <div id="PlayButton"> <button id="btnPlay" onclick="PlayOrPause()" />暂停</button> <button id="btnMute" onclick="setMute()" />暂时静音</button> </div> </div> </body> <script type="text/javascript"> var muted=false; var video = document.getElementById("VideoPlayer"); if(video.canPlayType) { video.addEventListener('loadedmetadata',loadedmetadata,false); video.addEventListener('ended',videoEnded,false); video.addEventListener('play',videoPlay,false); video.addEventListener('pause',videoPause,false); video.addEventListener('timeupdate',updateProgress,false); video.addEventListener("error",catchError,false); progress=document.getElementById("progress"); progress.onmouseover=progress_mouseover; progress.onmouseout=progress_mouseout; progress.onclick=progress_click; playPercent=document.getElementById("playPercent"); playPercent.onmouseover=progress_mouseover; playPercent.onmouseout=progress_mouseout; playPercent.onclick=playPercent_click; } function catchError() { var error = video.error; switch(error.code) { case 1: alert("视频的载入过程以为用户操作，已经被中止。"); break; case 2: