html5 + js 获取视频播放进度及播放百分比的方法【video控件】
HTML5基础 2022-06-08 14:52:3541小码哥的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格式动画测试视频：
