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);
}
项目演示地址：点击查看
时间： 2024-10-25 11:55:04