<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>前端播放mp4格式视频</title>
</head>
<body>
<div>
<video id="myVideo" controls="controls">
<source type="video/mp4" src="https://www.qipa250.com/uploadedqrcode/qipa250.mp4">
</video>
</div>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<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>
学习使用js得到视频时长和播放时长
最新推荐文章于 2024-06-11 15:13:58 发布