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

maoxiaozhu

已于 2023-07-19 17:20:16 修改

阅读量1.8k

点赞数 1

文章标签： javascript 前端开发语言

于 2022-09-25 12:27:48 首次发布

本文链接：https://blog.csdn.net/maoxiaozhu/article/details/127036457

版权

<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间断监听