原生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) + '%';
	  }
	}
  }

全部评论

相关推荐

11-04 14:10
东南大学 Java
_可乐多加冰_:去市公司包卖卡的
点赞 评论 收藏
分享
Bug压路:老哥看得出来你是想多展示一些项目,但好像一般最多两个就够了😂页数一般一页,多的也就2页;这些项目应该是比较同质化的,和评论区其他大佬一样,我也觉得应该展示一些最拿手的(质量>数量)😁😁😁专业技能部分也可以稍微精简一些
点赞 评论 收藏
分享
点赞 收藏 评论
分享
牛客网
牛客企业服务