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