<!DOCTYPE html > <html > <head> <title>Video events example</title> <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet or local site. --> <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"/> --> </head> <body > <div> <label>Type or paste a video URL: <br/> <input type="text" id="videoFile" style=" 300px;" title="video file input field" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" /> <button id="loadVideo" title="Load video button" >Load</button> </label> </div> <video id="Video1" controls style="border: 1px solid blue;" height="240" width="320" title="video element"> HTML5 Video is required for this example </video> <div id="buttonbar" style="display: none; font-size:larger;")> <button id="restart" title="Restart button">[]</button> <button id="slower" title="Slower playback button">-</button> <button id="rew" title="Rewind button" ><<</button> <button id="play" title="Play button">></button> <button id="fwd" title="Forward button" >>></button> <button id="faster" title="Faster playback button">+</button> <button id="mute" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button> <br /> <label>Reset playback rate: </label><button id="normal" title="Reset playback rate button">=</button> <br /> <label> Volume: </label> <button id="volDn" title="Volume down button">-</button> <button id="volUp" title="Volume up button">+</button> <br /> <div id="status" >Length(seconds): <span id="vLen"></span> <br /> Current time: <span id="curTime" title="Current time"></span><br /> Remaining time: <span id="vRemaining" title="Remaining time"></span></div> </div> <br/> <div title="Error message area" id="errorMsg" style="color:Red;"></div> <div title="Event status area" > <label>oncanplaythrough: </label><span class="stats" id="cpt"></span><br /> <label>onloadstart: </label><span class="stats" id="ls"></span><br /> <label>onprogress: </label><span class="stats" id="pg"></span><br /> <label>onloadeddata: </label><span class="stats" id="ld"></span><br /> <label>onended: </label><span class="stats" id="ndd"></span><br /> <label>onemptied: </label><span class="stats" id="mt"></span><br /> <label>onstalled: </label><span class="stats" id="stall"></span><br /> <label>onwaiting: </label><span class="stats" id="waiting"></span><br /> <label>ondurationchange: </label><span class="stats" id="dc"></span><br /> </div> <script> var video = document.getElementById("Video1"); var vLength; var pgFlag = ""; // used for progress tracking if (video.canPlayType) { // 检测是否支持HTML5视频标签 // 播放视频 function vidplay(evt) { if (video.src == "") { // 初始化视频资源 getVideo(); } if (video.paused) { //检测视频播放状态 video.play(); } else { video.pause(); } } // 从输入框获取视频文件 function getVideo() { var fileURL = document.getElementById("videoFile").value; // 获取输入框的值 if (fileURL != "") { video.src = fileURL; video.load(); document.getElementById("play").click(); // 开始播放 } else { errMessage("Enter a valid video URL"); // 抛出异常 } } // 设置播放时间 function setTime(tValue) { // 视频文件没有加载，则抛出异常 try { if (tValue == 0) { video.currentTime = tValue; } else { video.currentTime += tValue; } } catch (err) { // 抛出异常 errMessage("Video content might not be loaded"); } } // 改变音量 function setVol(value) { var vol = video.volume; vol += value; if (vol >= 0 && vol <= 1) { video.volume = vol; } else { video.volume = (vol < 0) ? 0 : 1; } } // 按钮事件 // 播放 document.getElementById("play").addEventListener("click", vidplay, false); // 重置视频 document.getElementById("restart").addEventListener("click", function () { setTime(0); }, false); // 后退10秒 document.getElementById("rew").addEventListener("click", function () { setTime(-10); }, false); // 前进10秒 document.getElementById("fwd").addEventListener("click", function () { setTime(10); }, false); // 设置视频文件 document.getElementById("loadVideo").addEventListener("click", getVideo, false); // 音量按钮 document.getElementById("volDn").addEventListener("click", function () { setVol(-.1); // 调低 10% }, false); document.getElementById("volUp").addEventListener("click", function () { setVol(.1); // 升高 10% }, false); // 播放速度按钮 document.getElementById("slower").addEventListener("click", function () { video.playbackRate -= .25; }, false); document.getElementById("faster").addEventListener("click", function () { video.playbackRate += .25; }, false); document.getElementById("normal").addEventListener("click", function () { video.playbackRate = 1; }, false); document.getElementById("mute").addEventListener("click", function (evt) { if (video.muted) { video.muted = false; } else { video.muted = true; } }, false); // 抛出错误 video.addEventListener("error", function (err) { errMessage(err); }, true); // 加载完毕 video.addEventListener("canplay", function () { document.getElementById("buttonbar").style.display = "block"; }, false); // 显示视频的持续时间 video.addEventListener("loadedmetadata", function () { vLength = video.duration.toFixed(1); document.getElementById("vLen").textContent = vLength; }, false); // 显示视频播放当前时间和剩余时间 video.addEventListener("timeupdate", function () { // 当前时间 var vTime = video.currentTime; document.getElementById("curTime").textContent = vTime.toFixed(1); document.getElementById("vRemaining").textContent = (vLength - vTime).toFixed(1); }, false); // 终止和播放事件来改变按钮的状态 video.addEventListener("pause", function () { document.getElementById("play").textContent = ">"; }, false); video.addEventListener("playing", function () { document.getElementById("play").textContent = "||"; }, false); video.addEventListener("volumechange", function () { if (video.muted) { // 如果没有声音，则显示该图标 document.getElementById("mute").innerHTML = "<img alt='volume off button' src='mute2.png' />"; } else { // 如果有声音则显示该图标 document.getElementById("mute").innerHTML = "<img alt='volume on button' src='vol2.png' />"; } }, false); // 开始加载时触发事件 video.addEventListener("loadstart", function () { document.getElementById("ls").textContent = "Started"; }, false); // 加载结束时触发事件 video.addEventListener("loadeddata", function () { document.getElementById("ld").textContent = "Data was loaded"; }, false); // 视频播放结束时触发事件 video.addEventListener("ended", function () { document.getElementById("ndd").textContent = "Playback ended"; }, false); video.addEventListener("emptied", function () { document.getElementById("mt").textContent = "Video reset"; }, false); video.addEventListener("stalled", function () { document.getElementById("stall").textContent = "Download was stalled"; }, false); video.addEventListener("waiting", function () { document.getElementById("waiting").textContent = "Player waited for content"; }, false); video.addEventListener("progress", function () { pgFlag += "+"; if (pgFlag.length > 10) { pgFlag = "+"; } document.getElementById("pg").textContent = pgFlag; }, false); video.addEventListener("durationchange", function () { document.getElementById("dc").textContent = "Duration has changed"; }, false); video.addEventListener("canplaythrough", function () { document.getElementById("cpt").textContent = "Ready to play whole video"; }, false); } else { errMessage("HTML5 Video is required for this example"); // 结束 } // 显示错误信息 function errMessage(msg) { // displays an error message for 5 seconds then clears it document.getElementById("errorMsg").textContent = msg; setTimeout("document.getElementById('errorMsg').textContent=''", 5000); } </script> </body> </html>