【HTML5】HTML5中video元素事件详解（实时监测当前播放时间）

【HTML5】HTML5中video元素事件详解（实时监测当前播放时

间）

html 代码。。video后边⼏个元素，可处理ios 系统的兼容性

</video>

js 代码

//获取视频DOM元素

var myVideo = ElementById("myVideo");

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获取媒体数据过程中出错

video元素或audio元素所在⽹络突然变为未初始化状态可能原因有两个:1.载⼊媒体过程中突然发⽣⼀个致命错误emptied

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属性（静⾳状态）被改变

本文发布于:2024-09-22 09:30:05，感谢您对本站的认可！

本文链接：https://www.17tex.com/tex/4/91519.html

上一篇：多媒体著作工具的具体分类

下一篇：多媒体技术期末试题与答案2

标签：播放媒体数据

留言与评论（共有 0 条评论）