ugrás a tartalomhoz

Html5 video események

berdi.gergo · 2014. Ápr. 12. (Szo), 23.47
Sziasztok!

A következő problémám lenne! Szeretnémha a HTML 5 video lejátszása közben bizonyos időszakokra meg tudjak jeleníteni dolgokat a honlapon. Pl: megy a szöveg és mondja h kattints a most megjelenő piros gombra és akkor tűnik fel a gomb. Próbáltam java scripttel megoldani (settimeout), csak azzal az volt a baj, hogy ha laggol a video vagy csúszik, attól függetlenül a js végrehajtja a feladatot és az egész elcsúszik. Hogy tudjátok pontosan miről is van szó:

Javascripttel megoldott bemutatás

Várom a válaszokat és köszönöm előre is a segítséget!
G
‹ Az oldal ujratöltődik reCaptcha modal windowban ›
 ■
1

Tobb video

janoszen · 2014. Ápr. 13. (V), 00.32
Sztem tobb darabra kell vagnod a videot es minden egyes resz vegenel meg kell jelenitened a kovetkezot. Pl igy:

$("video1").bind("ended", function() {
   //kovetkezo video
});
Ennek megfeleloen a videot is ugy kell felvenni, hogy legyen egy kis lehetoseg benne a kihagyasra.

A masik lehetoseg hogy pollozod a lejatszofejet rendszeres idokozonkent vagy a timeupdate eventtel.
2

Én elsőre a timeupdate-et

csla · 2014. Ápr. 13. (V), 11.21
Én elsőre a timeupdate-et mondtam volna:

$("video1").bind('timeupdate', function() {
  //this.currentTime-ot figyelni
});
Van ennek valami hátránya (pl. sokkal nagyobb erőforrásigény), hogy inkább a videó vágását javasoltad elsőként, és csak egyéb lehetőségként ezt?
3

Engem az érdekelne hogy

berdi.gergo · 2014. Ápr. 13. (V), 22.47
Engem az érdekelne hogy létezik-e olyan hogy a video indításától függővé tenni az időzítést. Eléggé kezdő vagyok még Javascript témában, annyi kérésem lehetne-e hogy egy példakódot írnátok a hozzászóláshoz? Értem hogy mit csinálna meg minden csak a funkciót nem tudom hozzáírni. Nem azt kérem hogy ti írjátok meg helyettem, csak legyen valami amin el tudok indulni :)
4

timeupdate (+JSFiddle)

pkadam · 2014. Ápr. 14. (H), 04.13
Szerintem a több videófájlra bontás bonyolítaná a munkát, én is a timeupdate eseménynél javaslom figyelni a currentTime tulajdonságot. Csináltam példának egy JSFiddle-t, ami a videó időbélyege alapján változtatja a videó alatt megjelenő feliratot és az oldal háttérszínét: http://jsfiddle.net/vs6vQ/

Ebből szerintem már ki tudsz indulni, láthatod, miként lehet bizonyos függvényeket az időbélyeg alapján meghívni. A timeupdate esemény nálam másodpercenként 2-4 alkalommal jelentkezett, ennek intenzitása valószínűleg több tényezőtől is függ, de ez alapján nem tartom túlzottan erőforrás-igényesnek. Célszerű, ha másodpercenként legfeljebb egy alkalommal hívsz meg függvényt, és eltárolod azt is, lefutott-e már a kérdéses függvény (hogy ne hívd meg másodpercenként akár négyszer), vagy az utolsó időbélyeg elmentésével mindig megnézed, hogy az adott másodperc "új-e", tehát csak akkor hajtod végre a függvényt, ha az előző időbélyeg másodperce nem egyezik meg az aktuálissal. De érdemes próbálgatni és kísérletezgetni, mert izgalmas terület ez.

(A JSFiddle-ben látott eseménykezelés csak bemutató jellegű, élesben természetesen addEventListener() ill. attachEvent() használatával, vagy a jQuery .on() metódusával akaszd rá a video elemre.)
5

Elkezdtem módosítani a

berdi.gergo · 2014. Ápr. 14. (H), 17.02
Elkezdtem módosítani a kódot:

function hideDiv() {
document.getElementById("toHide2").style.opacity = 0;
}

function showDiv() {
document.getElementById("toHide2").style.opacity = 1;
}


function timeHandler(e) {
var time = e.target.currentTime;

if (time < 3) {
showDiv('#toHide2');
}

else if (time < 27) {
hideDiv('#toHide2');


}
else if (time < 33) {
showDiv('#toHide2');



}

else if (time < 34) {
hideDiv('#toHide2');

}

}

document.querySelector('video').ontimeupdate = timeHandler;
document.querySelector('video').onended = function() { hideSubtitle(); setBg('#F9F9F9'); };
</script>

Eddig tök jól működik minden, viszont több ID-re nem tudok hivatkozni valami miatt, mert egyszerre kezeli őket valamiért. Ezt próbáltam:


function hideDiv() {
document.getElementById("toHide2").style.opacity = 0;
document.getElementById("toHide3").style.opacity = 0;
}

function showDiv() {
document.getElementById("toHide2").style.opacity = 1;
document.getElementById("toHide3").style.opacity = 1;
}

ez egy egységként kezelte mind 2 ID-t. Valami megoldás van erre?
6

Paraméter

pkadam · 2014. Ápr. 14. (H), 21.34
Ha jól tudom kihámozni, mit szeretnél: meg akarod mondani a függvénynek, hogy melyik div-et rejtse el/jelenítse meg. Nagyszerű hírem van: a függvények pont erre valók. Azonban nekik is tudniuk kell arról, hogy paramétert várnak, tehát ha csak a meghívásukkor adsz át paramétert, de a függvénytörzsben erre nem hivatkozol, akkor ezzel nem tudnak mit kezdeni. Az elrejtéshez például:

function hideDiv(id) {
	document.getElementById(id).style.opacity = 0;
}

hideDiv('toHide2');
Vagyis a függvény deklarálásakor megadtuk, hogy egy paramétert vár, amit "id"-nek neveztünk el, a belsejében ezt már egy változóként fel tudjuk használni, a meghívásakor pedig a konkrét ID-t paraméterként átadod, így az adott műveletet azon az elemen fogja elvégezni.

Ha több ID-ra is szeretnél hivatkozni, akkor vagy hívd meg többször az adott függvényt, vagy mindig tömbként add át az ID-k listáját, és a függvényben azokon iterálj végig. Pl. showDiv(['toHide2', 'toHide3']);

Kód beszúrásakor pedig használj kódszínezőt (a kód köré [ colorer = js ] ... [ / colorer ] – szóközök nélkül), mert így tudjuk gyorsan átlátni, és nagyobb eséllyel segíteni. Az eseménykezelést pedig – mint javasoltam – bízd a jQuery-re, vagy használd az addEventListener() ill. attachEvent() függvényeket.
7

Időtúllépés

berdi.gergo · 2014. Ápr. 24. (Cs), 15.15
Megoldódott a probléma most viszont új lépett fel: 60 sec felett nem teljesíti a parancsokat. Esetleg ötlet, hogy ez mitől lehet? 1perc 15 sec a videóm hossza azaz 75 sec. 60sec alatt minden végrehajtódik maradéktalanul, viszont felette semmi :/
 
function timeHandler(e) {
	var time = e.target.currentTime;
	
	if (time < 75) {
		showDiv('#video-container');
	}
	
	
	else if (time < 76) {
		hideDiv('#video-container');
		
	}
	
}
8

Máshol lehet a gond

pkadam · 2014. Ápr. 24. (Cs), 16.50
Az egy perc túllépése elvileg nem okozhat gondot, az előbb kipróbáltam egy 10 perces videóval, és a 60 másodpercen túli parancsok is teljesültek. Érdemes lenne mutatnod egy működő oldalt (akár a JSFiddle-ben), mert valószínűleg máshol lesz a probléma.
10

Időtúllépés

berdi.gergo · 2014. Ápr. 24. (Cs), 17.57
Megvan a hiba: Hiába 1:15 a video hossza, a beépített csuszka szerint csak 1:14 ezért hiába is adtam meg a 75 sec-t várhattam volna vele mert soha nem ér el odáig
9

Popcorn JS

Kevlar · 2014. Ápr. 24. (Cs), 16.55
Ez nem pont ezt csinálja?
http://popcornjs.org/