前端 音频/视频(Audio/Video)开始加载以及播放的过程

<body>
    <video src="" id="video"></video>
</body>
<script>
    var elevideo = document.getElementById("video");
    let self = this
    elevideo.addEventListener('loadstart', function () {
        
        console.log('加载过程开始');
    });
    elevideo.addEventListener('durationchange', function () {
        
        console.log('当指定音频/视频的时长数据发生变化时,发生 durationchange 事件');
    });
    elevideo.addEventListener('loadedmetadata', function () {
        
        console.log('当指定的音频/视频的元数据已加载时,会发生 loadedmetadata 事件');
    });
 
    elevideo.addEventListener('loadeddata', function () {
       
        console.log('当当前帧的数据已加载,但没有足够的数据来播放指定音频/视频的下一帧时,会发生 loadeddata 事件');
    });
    elevideo.addEventListener('progress', function () {
       
        console.log('当浏览器正在下载指定的音频/视频时,会发生 progress 事件');
    });
    
    elevideo.addEventListener('canplay', function () {
        
        console.log('当浏览器能够开始播放指定的音频/视频时,发生 canplay 事件');
    });

    elevideo.addEventListener('canplaythrough', function () {
       
        console.log('当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时,会发生 canplaythrough 事件');
    });
 
    elevideo.addEventListener('play', function () {
        console.log("开始播放");
    });
 
    elevideo.addEventListener('playing', function () {
       console.log("播放中");
    });
 
    elevideo.addEventListener('waiting', function () {
        console.log("加载中");
    });
 
    elevideo.addEventListener('pause', function () {
        console.log("暂停播放");
    });
 
    elevideo.addEventListener('ended', function () {
        console.log("播放结束");
    }, false);
</script>

vue 项目中,放在 mounted间断监听

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值