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