HTML5中video元素事件详解(实时监测当前播放时间)
html 代码:
video后边几个元素,可处理ios 系统的兼容性
<video id="myVideo" controls="controls" poster='预览图' preload="auto" x5-playsinline="" playsinline="" webkit-playsinline="" >
<source src="" type="video/mp4">
</video>
js 代码:
<script>
//获取视频DOM元素
var myVideo = document.getElementById("myVideo");
myVideo.oncanplay = function(){
console.log("准备就绪");
};
//监听播放开始
myVideo.addEventListener('play',function(){
console.log("开始播放");
});
//监听播放结束
myVideo.addEventListener('pause',function(){
console.log("播放暂停");
});
//监听播放结束
myVideo.addEventListener('ended',function(){
console.log("播放结束");
});
//使用事件监听方式捕捉事件, 此事件可作为实时监测video 播放状态
myVideo.addEventListener("timeupdate",function(){
var timeDisplay;
//用秒数来显示当前播放进度
timeDisplay = Math.floor(myVideo.currentTime);
console.log(Math.floor(myVideo.currentTime))
//当视频播放到 4s的时候做处理
if(timeDisplay == 4){
//处理代码
}
},false);
</script>
事件介绍:
事件 | 描述 |
---|---|
loadstart | 浏览器开始在网上寻找媒体数据 |
progress | 浏览器正在获取媒体数据 |
suspend | 浏览器暂停获取媒体数据,但是下载过程并滑正常结束 |
abort | 浏览器在下载完全部媒体数据之前中止获取媒体数据,但是并不是由错误引起的 |
error | 获取媒体数据过程中出错 |
emptied | video元素或audio元素所在网络突然变为未初始化状态可能原因有两个:1.载入媒体过程中突然发生一个致命错误
2.在浏览器正在选择支持的播放格式时,又调用 了load方法重新载入媒体 |
stalled | 浏览器尝试获取媒体数据失败 |
play | 即将开始播放,当执行了play方法时触发,或数据下载后元素被设为autoplay属性 |
pause | 播放暂停,当执行了pause方式时触发 |
loadedmetadata | 浏览器获取完毕媒体的时间长和字节数 |
waiting | 播放过程由于得不到下一帧而暂停播放(例如下一帧尚未加载完毕),但很快就能够得到下一帧 |
canplay | 浏览器能够播放媒体,但估计以当前的播放速率不能直接播放完毕,播放期间需要缓冲 |
canplaythrough | 浏览器能够播放媒体,而且以当前播放速率能够将媒体播放完毕,不再需要进行缓冲 |
seeking | seeking属性变为true,浏览器正在请求数据 |
seeked | seeking属性变为false,浏览器停止请求数据 |
timeupdate | 由于播放位置被改变,可能是播放过程中的自然改变,也可能是被人为的改变,或由于播放不能连续而发生的跳变 |
ended | 播放结束后停止播放 |
ratechange | defaultplaybackRate属性(默认播放速率)或playbackRate属性(当前播放速率)被改变 |
druationchange | 播放时长被改变 |
volumechange | volume属性(音量)被改变或muted属性(静音状态)被改变 |
黑蜘蛛