JS判断视频Video的播放、暂停、结束完成及获取长度事件监听处理

发布网友发布时间：2022-11-13 19:16

共1个回答

热心网友时间：2024-11-17 23:03

（1）HTML页面视频标签大体如下

<video id="video"controls="controls">

<source src="./video/2.mp4" type="video/mp4" />

</video>

（2）视频加载后获取视频的长度

varelevideo = document.getElementById("video");

elevideo.addEventListener('loadedmetadata', function () {//加载数据

//视频的总长度 console.log(elevideo.ration);

});

（3）视频开始播放

varelevideo = document.getElementById("video");

elevideo.addEventListener('play', function () {//播放开始执行的函数

        console.log("开始播放");

});

（4）视频正在播放中

varelevideo = document.getElementById("video");

elevideo.addEventListener('playing', function () {//播放中console.log("播放中");

});

（5）视频加载中

varelevideo = document.getElementById("video");

elevideo.addEventListener('waiting', function () {//加载

        console.log("加载中");

});

（6）视频暂停播放

varelevideo = document.getElementById("video");

elevideo.addEventListener('pause', function () {//暂停开始执行的函数

        console.log("暂停播放");

});

（7）视频结束播放

varelevideo = document.getElementById("video");

elevideo.addEventListener('ended', function () {//结束

        console.log("播放结束");

}, false);