To aby si udělal progressbar ti stačí základy Javascriptu a umět dělat animace pomocí setInterval atp...Já jsem se naučil první základy, a pak jsem se učil dělat ty animace - práce s časovačem atp...Je tady na to tutoriál, nebo pěkný tutorial je na této stránce, stačí si najít ve levém menu "DOM animation" - https://www.w3schools.com/js/default.asp
Tak já si nějak poradil se svejma znalostma, jen mě zajímalo, jestli není nějaký lepší řešení, třeba to dělám jak blbec úplně složitě. A navíc ať nastavím interval sebekratší, tak ten pohyb progressbaru není úplně plynulej.
function progress() {
var dur = vid.duration;
var cur = vid.currentTime;
var perc = (cur / dur) * 100;
var pgBar = document.getElementById("progress");
pgBar.style.width = perc + "%";
}
setInterval(progress, 1);O lepším řešení nevím, ale pokud umíš třeba i jQuery, tak tam by si to možná měl jednodušší, jinak, jak už jsem psal, ja jsem se to učil z w3schools.com....
Nebylo by lepší použít CSS animaci? Nastavíš CSS, aby zvětšovalo délku vybarvené části scrollbaru, pausovat/resumovat by to mělo jít pomocí JS. Asi to nebude moc odlišné, ale zdá se mi to jako lepší řešení, než to dělat celé přes JS.
Pause/resume animace: https://stackoverflow.com/…g-javascript
Časovač mi pripadá nevhodný, tým dupľom časovač ktorý pustíš 1000 krát za sekundu a vykonáva kompletný prepočet celej stránky. Ten totiž tipujem, že beztak trvá dlhšie ako milisekundu, takže to ani nemá zmysel. Skús toto:
function step (bar, dur) {
return function () {
var cur = vid.currentTime
var perc = (cur / dur) * 100
bar.style.width = perc + "%"
window.requestAnimationFrame(step(bar, dur))
}
}
window.requestAnimationFrame(
document.getElementById("progress"),
vid.duration
)Netestoval som to, píšem to z hlavy, tak neviem, či som sa niekde nepomýlil, či nepreklepol. Ale ak to pojmeš len ako ukážku princípu - requestAnimationFrame vs. setInterval - tak tento kód by mal byť aspoň výrazne efektívnejší.
Jop... Skús a hlavne daj vedieť. Ak to nebude riešenie, ešte sú tu teoreticky aj iné možnosti.
PS: Uvedomil som si, že tam je preklep. Nový kód:
function step (bar, dur) {
return function () {
var cur = vid.currentTime
var perc = (cur / dur) * 100
bar.style.width = perc + "%"
window.requestAnimationFrame(step(bar, dur))
}
}
window.requestAnimationFrame(step(
document.getElementById("progress"),
vid.duration
))Zkusil jsem to tam jenom přehodit a nefungovalo mi to. Nijak jsem to neupravoval, jsem na mobilu, na počítač se dostanu až asi za 2 dny, tak uvidím.
Alebo zjednodušene aj takto:
var step = (bar, video) => _ => {
bar.style.width = ((video.currentTime / video.duration) * 100) + 'px'
requestAnimationFrame(step(bar, video))
}
requestAnimationFrame(step(document.getElementById("progress"), vid))Ok, skús to potom na pc a pozri konzolu, či tam nepíše nejakú chybu.
Tak jo, dal jsem to tam a funguje to, vizuálně to vypadá stejně. Jenom to
nemaj bejt pixely, ale procenta. Jsem se trochu divil co to dělá 
Zobrazeno 14 zpráv z 14.