- Događaj reprodukcije aktivira se tek kada multimedijski sadržaj stvarno počne s reprodukcijom, što ga razlikuje od događaja reprodukcije koji samo označava namjeru pokretanja.
- Njegovo izvršenje izravno ovisi o stanju spremnosti elementa, što zahtijeva da dostigne stanje HAVE_FUTURE_DATA ili više.
- Dopunjen je promise API-jem metode .play() za rukovanje ograničenjima automatske reprodukcije koje nameću moderni preglednici.
Ako ste se ikada pitali kako vaš preglednik zna kada započeti reprodukciju video ili audio datoteke nakon što kliknete gumb za reprodukciju, odgovor leži u događaju ` play` HTMLMediaElementa . Ovaj mali, ali moćan mehanizam nam daje do znanja da je medij konačno počeo s reprodukcijom, bez obzira je li bio pauziran ili je preglednik zaglavio u učitavanju podataka (zloglasno međuspremništvo) i konačno je mogao nastaviti.
Razumijevanje kako ovaj događaj funkcionira i kako se razlikuje od sličnih događaja, poput događaja reprodukcije, ključno je za svakog programera koji želi stvoriti glatka multimedijska iskustva . Nije isto da preglednik pokušava nešto reproducirati kao što to zapravo čini, i upravo tu dolazi do izražaja logika stanja učitavanja i okidača DOM događaja.
Ključna razlika između play događaja i igranja
Često se brkaju, ali imaju potpuno različite funkcije. Događaj reprodukcije se aktivira u trenutku kada se svojstvo paused promijeni iz true u false . Drugim riječima, namjera je reprodukcije, bez obzira jeste li pozvali metodu .play() ili je atribut autoplay obavio svoj posao. Međutim, želja za reprodukcijom ne znači da će se videozapis odmah početi reproducirati.
Tu dolazi do izražaja događaj `playing` . Pokreće se kada se medij zapravo reproducira. Ako videozapis mora pričekati još nekoliko megabajta za preuzimanje prije prikaza prve slike, prvo će se dogoditi događaj `play`, ali događaj `playing` će pričekati dok ne bude dovoljno podataka za učinkovitu reprodukciju. Ukratko, jedno je naredba, a drugo je stvarno izvršenje.
Stanja pripreme okruženja (readyState)
Da bi se događaj reprodukcije pokrenuo, element mora dosegnuti određeno stanje spremnosti. Preglednik koristi atribut readyState za praćenje količine dostupnih informacija.
- NEMAM_NIŠTA: Ništa nije učitano. Nema šanse da se događaj reprodukcije ovdje dogodi.
- IMAM_METAPODATKE: Već znamo trajanje i veličinu videa, ali još uvijek nema stvarnih podataka za reprodukciju.
- IMAM_TRENUTNE_PODATKE: Imamo trenutni kadar, ali ne i sljedeći. Videozapis se može gotovo trenutno zaustaviti.
- IMAM_BUDUĆE_PODATKE: Tu stvari postaju zanimljive. Ima dovoljno podataka da se krene malo naprijed bez zaustavljanja. Događaj počinje sviranje općenito kada prijeđemo u ovo ili više stanje i nismo zaustavljeni.
- IMAM_DOVOLJNO_PODATAKA: Preglednik procjenjuje da može reproducirati cijelu datoteku bez prekida zbog nedostatka međuspremnika.
Kako implementirati događaj u svoj kod
Za snimanje ovog trenutka, najbolji pristup je korištenje metode `addEventListener` , jer vam omogućuje dodavanje više slušača bez preklapanja. Na primjer, možete odabrati svoj video element i dodijeliti mu funkciju koja izvršava radnju čim se sadržaj počne kretati.
Tu je i svojstvo `onplaying` koje je jednostavnije, ali ima nedostatak: ako dodijelite jednu funkciju `onplaying`, a zatim drugu, druga će prebrisati prvu. Stoga, ako želite održati čist i skalabilan kod, držite se `addEventListener`. Imajte na umu da se ovaj događaj ne može ni otkazati niti se pojavljuje u obliku mjehurića , pa ga morate osluškivati izravno na audio ili video elementu.
Drugi multimedijski događaji o kojima biste trebali znati
Ekosustav HTMLMediaElement je opsežan, a događaj reprodukcije koegzistira s drugima koji vam omogućuju kontrolu korisničkog toka. Na primjer, događaj pretraživanja pokreće se kada korisnik pomakne traku napretka kako bi preskočio na drugi dio videa, dok nas događaj pretraživanja obavještava da je skok završen i da je novi okvir sada vidljiv.
Također imamo događaj čekanja , koji je korisnikov najgori neprijatelj: događa se kada se reprodukcija zaustavi jer u međuspremniku nema dovoljno podataka. Zanimljivo je da se, nakon što se međuspremnik napuni i video ponovno pokrene, događaj reprodukcije ponovno pokreće , čime se zatvara ciklus čekanja i reprodukcije.
Izazov automatske igre i obećanja
Danas su preglednici vrlo strogi u pogledu automatskog zvuka kako bi izbjegli preplašenje korisnika. Stoga metoda `.play()` sada vraća JavaScript obećanje . Ako reprodukcija uspješno započne, obećanje se rješava; ako ga preglednik blokira (jer nije bilo prethodne interakcije korisnika), obećanje se odbija.
Ovo je ključno jer u nekim slučajevima preglednik može odgoditi reprodukciju (na primjer, ako kartica nije vidljiva). Obećanje se neće ispuniti dok se medijski sadržaj zapravo ne počne reproducirati ili se videozapis ne pokrene, što ga čini puno pouzdanijim alatom od pokušaja pogađanja točnog trenutka isključivo na temelju događaja "reprodukcije".
Upravljanje zapisima i metapodacima
Osim reprodukcije, medijski elementi upravljaju tekstualnim, audio i video zapisima. TextTracks vam omogućuju dodavanje titlova ili opisa koji se sinkroniziraju s vremenskom crtom. Ovi elementi imaju vlastite događaje, poput promjene titla, koji vam govori kada se titl pojavljuje ili nestaje s ekrana.
Važno je napomenuti da upravljanje ovim zapisima može utjecati na performanse. Stoga se programerima savjetuje da oslobode alokaciju medijskih resursa kada više nisu potrebni, bilo uklanjanjem svih referenci na objekt ili pražnjenjem atributa `src`, čime se sprječava nepotrebno zasićenje memorije uređaja.
Interakcija između stanja mreže, pripreme podataka i DOM okidača omogućuje da događaj reprodukcije bude definitivan signal da je multimedijski sadržaj aktivan i vidljiv korisniku, razlikujući ga od jednostavne namjere reprodukcije i koordinirajući ga s modernim sustavom obećanja kako bi se osiguralo stabilno iskustvo bez obzira na ograničenja preglednika.