js获取视频总时长,监听播放进度
作者:互联网
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <title>播放时长</title> </head> <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script> <video id="myVideo" controls="controls"> <source type="video/mp4" src="C:\Users\Administrator\Downloads\2923395-1.mp4"> </video> <script> function videoInit(){ let elevideo = document.getElementById('myVideo'); elevideo.addEventListener('waiting', function () { //加载 console.log("加载中"); }); elevideo.addEventListener('loadedmetadata', () => { //视频的总长度 console.log('总长度:' + elevideo.duration); clearInterval(this.timer); }); elevideo.addEventListener('play', () => { //播放开始执行的函数 console.log('开始播放'); }); elevideo.addEventListener('playing', () => { //播放中 console.log('播放中'); this.timer = setInterval(() => { console.log('播放进度:' + parseFloat(elevideo.currentTime)); }, 1000); }); elevideo.addEventListener('pause', ()=> { //暂停开始执行的函数 console.log("暂停播放"); clearInterval( this.timer); }); elevideo.addEventListener( 'ended', () => { //结束 console.log('播放结束'); clearInterval(this.timer); }, false ); }; videoInit() </script> </body> </html>
原文地址:https://blog.csdn.net/weixin_41827052/article/details/123639686
标签:console,log,总时长,elevideo,timer,js,addEventListener,播放,监听 来源: https://www.cnblogs.com/junyi-bk/p/16288679.html