html5 + js 获取视频播放进度及播放百分比的方法【video控件】
HTML5基础 2022-06-08 14:52:35小码哥的IT人生shichen
本文示例基于video控件进行视频播放，在此基础上再进行视频相关属性操作，具体如下：
1.HTML页面
<div class="course-video">
<video id="video" width="100%" src="${courseSection.videoUrl}" height="100%" controls preload>
<source type="video/mp4"/>
</video>
<div id="progress">
<div id="bar"></div>
</div>
<h3 id="text-progress">0%</h3>
<b id="beginTime">0.00</b>
<b id="lastTime">0.00</b>
</div>
2.js代码
// 根据id查找指定对象
myVid = document.getElementById("video");
var bgTime = document.getElementById("beginTime");
var lsTime = document.getElementById("lastTime");
var elem = document.getElementById("text-progress");
//执行获取方法
getvideoprogress();
function getvideoprogress() {
//设置循环,没10毫秒执行一次
var id = setInterval(frame,10);
function frame() {
// 使用duration获取视频总时长,使用toFixed保留两位小数
lsTime.innerHTML = myVid.duration.toFixed(2) + "s";
// 使用currentTime获取视频当前播放位置
bgTime.innerHTML = myVid.currentTime.toFixed(2) + "s";
//获取当前位置占总视频百分比并显示
var bili = (myVid.currentTime.toFixed(2) / myVid.duration.toFixed(2)) * 100;
elem.innerHTML = bili.toFixed(0) + "%";
}
}
完整实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>获取视频播放进度及播放百分比</title>
</head>
<body>
<div class="course-video">
<video id="video" width="100%" src="demo.mp4" height="100%" controls preload>
<source type="video/mp4"/>
</video>
<div id="progress">
<div id="bar"></div>
</div>
<h3 id="text-progress">0%</h3>
<b id="beginTime">0.00</b>
<b id="lastTime">0.00</b>
</div>
<script>
// 根据id查找指定对象
myVid = document.getElementById("video");
var bgTime = document.getElementById("beginTime");
var lsTime = document.getElementById("lastTime");
var elem = document.getElementById("text-progress");
//执行获取方法
getvideoprogress();
function getvideoprogress() {
//设置循环,没10毫秒执行一次
var id = setInterval(frame,10);
function frame() {
// 使用duration获取视频总时长,使用toFixed保留两位小数
lsTime.innerHTML = myVid.duration.toFixed(2) + "s";
// 使用currentTime获取视频当前播放位置
bgTime.innerHTML = myVid.currentTime.toFixed(2) + "s";
//获取当前位置占总视频百分比并显示
var bili = (myVid.currentTime.toFixed(2) / myVid.duration.toFixed(2)) * 100;
elem.innerHTML = bili.toFixed(0) + "%";
}
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
PS：这里附带一个笔者常用的MP4格式动画测试视频：
