获取视频播放进度及播放百分比_前端获取2个视频的进度条

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>
1
2
3
4
5
6
7
8
9
10
11

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22