原生js video获取当前视频时间进度和视频总时长

<div id="toolist">
    <!-- video测试 -->
    <video src="./resource/VID_0005.3gp" autoplay="autoplay" loop controls="controls " id="video-active">
      <source type="video/mp4" />
      <source type="video/webm" />
    </video>
    <div id="progress">
      <div id="bar"></div>
    </div>
    <h3>
      <h3 id="text-progress">0%</h3>
    </h3>
    <b id="beginTime">0.00</b>
    <b id="lastTime">0.00</b>
  </div>

myVid = document.getElementById("video-active");
var bar = document.getElementById("bar");
var bgTime = document.getElementById("beginTime");
var elem = document.getElementById("text-progress");
ltTim.innerHTML = myVid.duration.toFixed(2) + "s";

bgmove();
move();
function bgmove() {
	var long = 0.00;

	var id = setInterval(frame, 10);
	function frame() {

		// video自带属性myVid.duration获取时长
		if (long >= myVid.duration) {
		  long = 0.00;
		} else {
		  long += 0.01;
		  if (long >= myVid.duration) {
			long = 0.01
		  }
		  bgTime.innerHTML = long.toFixed(2) + 's';
		}
	}
}

  function move() {
	var width = 6;
	var id = setInterval(frame, 10);
	function frame() {
	  if (width >= 100) {
		width = 5;
	  } else {
		width += (1 / myVid.duration)
		if (width >= 100) {
		  width = 100
		}
		bar.style.width = width + '%';
		elem.innerHTML = Math.floor(width) + '%';
	  }
	}
  }

全部评论

相关推荐

点赞 评论 收藏
分享
01-02 21:17
已编辑
西安理工大学 后端
程序员小白条:项目不太重要,你的优势的算法竞赛,然后多背相关的八股文,项目可以不作为重点考虑,面试可能就简单带过项目就行了,你可以直接写简历,背项目相关的八股文就行,也不用自己做,时间紧张的情况下,性价比最高
点赞 评论 收藏
分享
02-11 12:20
门头沟学院 Java
面试中的青提很胆小:我不信有比我们学校更逆天的,计算机专业就业第一位是我们学校二餐厅的打印店
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客企业服务