Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
Petr Fiedler
Člen
Avatar
Petr Fiedler:23.12.2017 18:31

Zdravím, nevíte jak udělat progress bar videa?

 
Odpovědět
23.12.2017 18:31
Avatar
Jurajs
Člen
Avatar
Odpovídá na Petr Fiedler
Jurajs:23.12.2017 19:22

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

Editováno
 
Nahoru Odpovědět
23.12.2017 19:22
Avatar
Petr Fiedler
Člen
Avatar
Odpovídá na Jurajs
Petr Fiedler:23.12.2017 19:38

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);
 
Nahoru Odpovědět
23.12.2017 19:38
Avatar
Jurajs
Člen
Avatar
Odpovídá na Petr Fiedler
Jurajs:23.12.2017 19:44

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....

 
Nahoru Odpovědět
23.12.2017 19:44
Avatar
Petr Fiedler
Člen
Avatar
Petr Fiedler:23.12.2017 19:54

jinak můj výsledek tady: http://feedly.maweb.eu/

 
Nahoru Odpovědět
23.12.2017 19:54
Avatar
Petr Šťastný
Tvůrce
Avatar
Odpovídá na Petr Fiedler
Petr Šťastný:23.12.2017 20:27

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

 
Nahoru Odpovědět
23.12.2017 20:27
Avatar

Člen
Avatar
Odpovídá na Petr Fiedler
:26.12.2017 15:51

Č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 - requestAnimati­onFrame vs. setInterval - tak tento kód by mal byť aspoň výrazne efektívnejší.

Editováno
 
Nahoru Odpovědět
26.12.2017 15:51
Avatar
Petr Fiedler
Člen
Avatar
Odpovídá na
Petr Fiedler:26.12.2017 16:06

Zní to rozumnějc. Hned, jak se k tomu dostanu, zkusím to.

 
Nahoru Odpovědět
26.12.2017 16:06
Avatar

Člen
Avatar
Odpovídá na Petr Fiedler
:26.12.2017 16:09

Jop... Skús a hlavne daj vedieť. Ak to nebude riešenie, ešte sú tu teoreticky aj iné možnosti.

 
Nahoru Odpovědět
26.12.2017 16:09
Avatar

Člen
Avatar
Odpovídá na Petr Fiedler
:26.12.2017 16:26

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
))
 
Nahoru Odpovědět
26.12.2017 16:26
Avatar
Petr Fiedler
Člen
Avatar
Odpovídá na
Petr Fiedler:26.12.2017 16:39

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.

 
Nahoru Odpovědět
26.12.2017 16:39
Avatar

Člen
Avatar
Odpovídá na Petr Fiedler
:26.12.2017 16:39

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))
Editováno
 
Nahoru Odpovědět
26.12.2017 16:39
Avatar

Člen
Avatar
Odpovídá na Petr Fiedler
:26.12.2017 16:42

Ok, skús to potom na pc a pozri konzolu, či tam nepíše nejakú chybu.

 
Nahoru Odpovědět
26.12.2017 16:42
Avatar
Petr Fiedler
Člen
Avatar
Petr Fiedler:29.12.2017 12:16

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á :D

 
Nahoru Odpovědět
29.12.2017 12:16
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 14 zpráv z 14.