HTML5中video元素事件汇总

html5的video标签播放视频,其中涉及的不同的应用场景以及开发需求,下面是涉及到的事件和参数。

<video id="myVideo" 
       controls="controls"
       poster='预览图' 
       preload="auto" 
       x5-playsinline=""
       playsinline=""
       webkit-playsinline="">
    <source src="" type="video/mp4">
</video>
  • src :视频的属性
  • poster:视频封面,没有播放时显示的图片
  • preload:预加载,如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
  • autoplay:自动播放
  • loop:循环播放
  • controls:浏览器自带的控制条
  • width:视频宽度
  • height:视频高度
  • muted:规定视频的音频输出应该被静音。


    <script>
let 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 () {
    let timeDisplay;
    //用秒数来显示当前播放进度
    timeDisplay = Math.floor(myVideo.currentTime);
    console.log(Math.floor(myVideo.currentTime))

    //当视频播放到 4s的时候做处理
    if ( timeDisplay == 4 ) {
        //处理代码
    }
}, false);

</script>


事件

事件描述
loadstart浏览器开始在网上寻找媒体数据
progress浏览器正在获取媒体数据
suspend浏览器暂停获取媒体数据,但是下载过程并滑正常结束
abort浏览器在下载完全部媒体数据之前中止获取媒体数据,但是并不是由错误引起的
error获取媒体数据过程中出错
emptiedvideo元素或audio元素所在网络突然变为未初始化状态可能原因有两个:1.载入媒体过程中突然发生一个致命错误

 

2.在浏览器正在选择支持的播放格式时,又调用 了load方法重新载入媒体

stalled浏览器尝试获取媒体数据失败
play即将开始播放,当执行了play方法时触发,或数据下载后元素被设为autoplay属性
pause播放暂停,当执行了pause方式时触发
loadedmetadata浏览器获取完毕媒体的时间长和字节数
waiting播放过程由于得不到下一帧而暂停播放(例如下一帧尚未加载完毕),但很快就能够得到下一帧
canplay浏览器能够播放媒体,但估计以当前的播放速率不能直接播放完毕,播放期间需要缓冲
canplaythrough浏览器能够播放媒体,而且以当前播放速率能够将媒体播放完毕,不再需要进行缓冲
seekingseeking属性变为true,浏览器正在请求数据
seekedseeking属性变为false,浏览器停止请求数据
timeupdate由于播放位置被改变,可能是播放过程中的自然改变,也可能是被人为的改变,或由于播放不能连续而发生的跳变
ended播放结束后停止播放
ratechangedefaultplaybackRate属性(默认播放速率)或playbackRate属性(当前播放速率)被改变
druationchange播放时长被改变
volumechangevolume属性(音量)被改变或muted属性(静音状态)被改变

 


想要整理更多的碎片知识,扫码关注下面的公众号,让我们在哪里接着唠!

  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值