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) + "%";
}
}