标签：
HTML5 视频对象提供了很多事件，这些事件可以帮助简化和增强网页的内容。
在此处将看到使用事件检查内容是否可用、视频播放状态以及如何在视频中监视当前播放位置的示例。
HTML代码如下：
<!DOCTYPE html > <html lang="en"> <head> <meta charset="utf-8"> <meta name="author" content="boloog" /> <meta name="format-detection" content="telephone=no" /> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" name="viewport" /> <meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi"> <title>视频事件的例子</title> </head> <body> <p>粘贴视频URL地址：</p> <input type="text" id="videoFile" style="width: 300px;" value="http://gdzhcdn.vxinyou.com/down/video/vxinyou/ios_640x480.MP4" /> <button id="loadVideo">加载</button><br/> <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">重新开始</button> <button id="slower">播放减慢</button> <button id="rew">倒回</button> <button id="play" title="Play button">播放</button> <button id="fwd">快进</button> <button id="faster">播放加快</button> <button id="mute">禁音</button> <br /> <label>复位回放速度: </label><button id="normal" title="Reset playback rate button">=</button> <br /> <label> 音量: </label> <button id="volDn" title="Volume down button">-</button> <button id="volUp" title="Volume up button">+</button> <div id="status">总时长（秒）: <span id="vLen"></span> <br /> 当前时间: <span id="curTime" title="Current time"></span><br /> 剩余的时间: <span id="vRemaining" title="Remaining time"></span></div> </div> <div id="errorMsg" style="color:Red;"></div> <div title="事件状态区域" > <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> </body> </html>
JS事件代码：
var video = document.getElementById("Video1"); var vLength; var pgFlag = ""; // 用于进度跟踪 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(); // 如果HTML源元素的应用 document.getElementById("play").click(); // 开始使用 } else { errMessage("请输入有效的视频网址"); // 网址失败 } } // 按钮帮助函数 跳过向前，向后，或重新启动 function setTime(tValue) { // 如果没有视频加载，这将抛出一个异常 try { if (tValue == 0) { video.currentTime = tValue; } else { video.currentTime += tValue; } } catch (err) { // 错误消息（ERR） 显示异常 errMessage("视频内容可能无法加载"); } } // 体积变化根据传入的值 function setVol(value) { var vol = video.volume; vol += value; // 测试范围0 - 1避免异常 if (vol >= 0 && vol <= 1) { // 如果有效的值，使用它 video.volume = vol; } else { // 在其他替代的0或1 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); // 设置 src == 最新视频文件的URL 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) { // 如果静音，静音imageif显示没有静音，静音的图像显示不 document.getElementById("mute").innerHTML = "打开"; } else { // 如果没有静音，静音的图像显示不 document.getElementById("mute").innerHTML = "禁音"; } }, false); // 下载和播放状态事件。 video.addEventListener("loadstart", function() { document.getElementById("ls").textContent = "开始"; }, false); video.addEventListener("loadeddata", function() { document.getElementById("ld").textContent = "数据加载"; }, false); video.addEventListener("ended", function() { document.getElementById("ndd").textContent = "播放结束"; }, false); video.addEventListener("emptied", function() { document.getElementById("mt").textContent = "视频复位"; }, false); video.addEventListener("stalled", function() { document.getElementById("stall").textContent = "下载了"; }, false); video.addEventListener("waiting", function() { document.getElementById("waiting").textContent = "播放器等内容"; }, 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 = "时间改变"; }, false); video.addEventListener("canplaythrough", function() { document.getElementById("cpt").textContent = "准备好了整个视频"; }, false); } else { errMessage("HTML5 Video is required for this example"); // 结束运行 } // 显示一个错误信息 function errMessage(msg) { // 显示一个5秒错误消息，然后清除它 document.getElementById("errorMsg").textContent = msg; setTimeout("document.getElementById(‘errorMsg‘).textContent=‘‘", 5000); }
项目演示地址：点击查看
标签：
原文地址：http://www.cnblogs.com/bolong/p/html5-video.html
