opro.onchange = function() {//拖动range改变currentTime
var ovideo=document.getElementsByClassName("video")[0];
ovideo.load();
var son = document.getElementById("purse");
if(p == 0) {
son.src = "../img/开始.png";
ovideo.play();
p = 1;
}
ovideo.currentTime = opro.value; //opro是一个range。
otito.innerText = turnTime(ovideo.currentTime);
};
问题就是每次拖动range后进度自动跳到0
//下面2句放到放opro.onchange函数外,要不每次拖动后video.load从头开始,currentTime重置为0,从而触发timeupdate更新orpo.value为0了
有帮助麻烦点个采纳【本回答右上角】,谢谢~~
var ovideo=document.getElementsByClassName("video")[0];
ovideo.load();
opro.onchange = function() {
//下面这2句放到opro.onchange外,
//var ovideo=document.getElementsByClassName("video")[0];
// ovideo.load();
var son = document.getElementById("purse");
if(p == 0) {
son.src = "../img/开始.png";
ovideo.play();
p = 1;
}
ovideo.currentTime = opro.value;
otito.innerText = turnTime(ovideo.currentTime);//turnTime就是用来转换单位的
console.log(opro.value);
};
用console.log(opro.value)打印一下,看看有没有获取到最新的值。
你视频的video 的src地址为服务器地址不用本地地址,试试服务器上面的,就是在百度上面找一段然后右键取出他们src下的视频播放地址试试
//控制进度条
var opro = document.getElementById("pro");
var otito = document.getElementById("tito");
var otiall = document.getElementById("tiall");
ovideo.oncanplay = function() {
opro.max = ovideo.duration;
opro.min = 0;
// opro.value = 0;
otiall.innerText = turnTime(ovideo.duration);
};
opro.onchange = function() {
var ovideo=document.getElementsByClassName("video")[0];
ovideo.load();
var son = document.getElementById("purse");
if(p == 0) {
son.src = "../img/开始.png";
ovideo.play();
p = 1;
}
ovideo.currentTime = opro.value;
otito.innerText = turnTime(ovideo.currentTime);//turnTime就是用来转换单位的
console.log(opro.value);
};
function f() {
opro.value = ovideo.currentTime;
otito.innerText = turnTime(opro.value);
if(ovideo.currentTime >= opro.max-1) {
son.src = "../img/暂停.png";
ovideo.pause();
p = 0;
}
};
ovideo.addEventListener("timeupdate",f);