I am writing a video player. As a timebar I use a range. As video is playing, range is changing too. But I want to change it in the opposite way. I want range make video change its currentTime. But, because they change each other, I can't move a thumb. I'd tried setting Interval null but it didn't work. Give me a hand with this, please.
$(document).ready( function () {
$("#PlayerVideo").on("loadedmetadata", function (event) {
Video = $("#PlayerVideo")[0];
Duration = Video.duration;
hours = Math.floor(Duration / 60 / 60);
mins = Math.floor((Duration - hours * 60 * 60) / 60);
secs = Math.floor(Duration - mins * 60);
$("#durTime").html(hours + ":" + mins + ":" + secs);
// display cur time
Interval = setInterval(
function () {
Play();
}, 250
);
});
$("#TimeRange").on("input",
function()
{
$.when().then(
function()
{
Interval = null;
}
).then(
function ()
{
Video = $("#PlayerVideo")[0];
Video.currentTime = $(this).val()*Duration;
console.log("cur time is " + Video.currentTime);
CurTime = $(this).val()*Duration;
}
).then(
function ()
{
Interval = setInterval(
function () {
Play();
}, 250
);
}
);
}
);
function Play()
{
Video = $("#PlayerVideo")[0];
CurTime = Video.currentTime;
console.log(CurTime);
hours = Math.floor(CurTime / 60 / 60);
mins = Math.floor((CurTime - hours * 60 * 60) / 60);
secs = Math.floor(CurTime - mins * 60);
$("#curTime").html(hours + ":" + mins + ":" + secs);
$("#TimeRange").val(CurTime / duration * 100);
}
});