0
Hello, I’m making a player and would like to know if you have a function that runs full time, or only when such element changes
In case I have that function
function updateTime(){
var bufferedEnd = view.buffered.end(view.buffered.length- 1);
videoLoader.style.width = String((bufferedEnd / view.duration) * 100) + '%';
pctSeek = (view.currentTime / view.duration) * 100;
progress.style.width = String(pctSeek)+'%';
currentHour = Math.floor(view.currentTime / 3600);
currentMin = Math.floor(view.currentTime / 60);
currentSec = Math.floor(((view.currentTime / 60) % 1) * 60);
timer.innerHTML = convertTime(currentHour, currentMin, currentSec);
}
That makes the player loading bar update all the time and the video time too
But when I call this function, I call with a setInterval
intervalTimer = setInterval(updateTime, 10);
And this is making the site very slow (by the thousandth of a second).
I tried to leave a longer time, but as the load bar loads along with this function, it was crashing if you were dragging (because it ran every 100 thousandths)
I tried to use the resize()
only that it wasn’t either
Gabriel, have you checked out Videojs? It’s an HTML5 Video Player framework, take a look at how they do these things and draw on them, they have great documentation :)
– JassRiver
if you use 10ms you will be doing 100x per second (much higher than most monitors which is only 60fps)... I recommend you impose limits like: update only if there is percentage difference (ex: from 34% to 35% you update the width, but from 34% to 34% do nothing). And do not update any more than the support monitor; use this (https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame)
– Leonardo Bosquett