Mediaelement - media player pe html, tutorial html5

Ceea ce avem pe pagină este MediaElement, care la rândul său generează obiecte HTMLAudioElement și HTMLVideoElement, a căror interfață aproape coincide. Următoarele metode și evenimente sunt furnizate pentru media playerul tegagtored:







Var audio = document. createElement ("audio"); dacă (audio.canPlayType ("audio / mpeg")

Audio. addEventListener ("canplaythrough", funcția ()

- încărcare - încarcă fișierul media prin urlul specificat în atributul src, în timp ce fișierul încărcat anterior este înlocuit;

- pauză - întrerupe redarea fișierului media;

- play - pornește sau reia redarea unui fișier media.

Încercăm să precizăm evenimentele în ordine:

- loadstart - începutul încărcării datelor media;

- durationchange - apare după ce browserul web primește durata clipului încărcat;

- loadedmetadata - finalizarea încărcării metadatelor;

- durationchange - apare după ce browserul web primește durata clipului încărcat. Apare după evenimentul de pornire de încărcare și înainte de evenimentul de încărcaremetadată;

- loadeddata - volumul de date multimedia descărcate este suficient pentru a începe redarea;

- canplay - volumul de date multimedia descărcate este suficient pentru a începe cu succes redarea;

- canplaythrough - apare când datele multimedia încep să se descarce cu o viteză suficientă pentru redare, fără a întrerupe încărcarea;

- progresul - procesul de descărcare a conținutului media;

- redare - apare imediat după începerea redării video. Redarea poate fi pornită fie de către vizitatorul însuși, fie prin apelarea metodei de redare;

- așteptare - apare atunci când redarea videoclipului este suspendată pentru a încărca următoarea porțiune de date din fișierul media;

- blocat - apare la trei secunde după oprirea procesului de încărcare a următoarei porțiuni de date din fișierul media;

- încărcare - apare după descărcarea clipului;

- timeupdate - evenimentul are loc în timpul redării conținutului (când se schimbă poziția de timp);

- încheiat - apare atunci când conținutul se termină redarea.

Următoarele evenimente apar ca urmare a influențelor externe

- joaca. * clarificați dacă punctul * - apare după apelul la metoda de redare;

- pauză - apare atunci când videoclipul este întrerupt de către vizitator sau apelând metoda pauzei;

- căutarea - apare atunci când vizitatorul mișcă controlerul poziției curente de redare a clipului;

- căutat - apare după ce vizitatorul mișcă controlerul poziției curente de redare a fișierului într-o nouă poziție;







- volumul schimbat - apare când schimbați volumul, precum și dezactivați și activați sunetul;

- abort - apare atunci când vizitatorul întrerupe descărcarea unui fișier multimedia cu clipul;

- ratechange - apare când se modifică valoarea proprietății playbackRate (a se vedea mai jos);

- readystatechange - apare când se modifică valoarea proprietății readyState (a se vedea mai jos);

- golit - apare după apelarea metodei de încărcare atunci când conținutul încărcat în prezent este deja descărcat și noul conținut al cărui url a fost atribuit proprietății src nu a fost încă încărcat.

- eroare - apare atunci când apare o eroare în timpul procesului de descărcare.

Toate aceste evenimente vor fi utile pentru element

Acum, ia în considerare proprietățile containerului media. În plus față de dublarea atributelor (de exemplu, fontrols sau src), trebuie să aibă următoarele date utile:

- currentTime - poziția curentă de redare a fișierului media în secunde;

- defaultPlaybackRate - viteza de redare normală a fișierului. Acesta este coeficientul pentru viteza naturală de redare a unui fișier multimedia. Aceasta înseamnă că, dacă este setată defaultPlaybackRate = 4, melodia va fi redată la viteză cvadruplă;

- durata - durata redării în secunde;

- ended - returnă true dacă fișierul a terminat de redat (numai pentru citire);

- întrerupt - returnează adevărat dacă fișierul este întrerupt (numai pentru citire);

- playbackRate - viteza curentă de redare a fișierului. Acesta este coeficientul pentru viteza naturală de redare a unui fișier multimedia;

- readyState - returnează o valoare de șir indicând starea curentă a fișierului media (numai pentru citire). Sunt posibile următoarele valori:

• neinitializat - fișierul nu a fost încărcat încă;

• încărcare - fișierul este descărcat;

• încărcat - fișierul este încărcat complet, dar este posibil să nu fie gata de redare;

• interactiv - utilizatorul poate porni redarea fișierului (nu garantează terminarea descărcării);

• completă - fișierul este descărcat și gata de redare;

- căutarea - returnează adevărat dacă vizitatorul efectuează în prezent o "derulare rapidă" (numai pentru citire);

- startTime - poziția piesei (în secunde) de la care poate fi pornit redarea (numai pentru citire);

- volum - volumul curent ca valoare de la 0,0 - tăcere până la 1,0 - volumul maxim (valoarea implicită).

Să aplicăm noi oportunități în practică.

Când listați comenzile pentru a controla player-ul, nu a fost întâmplător că metoda de stop a fost ratată, pur și simplu nu există. Din pauză, această operațiune este diferită prin faptul că poziția de redare este returnată la punctul zero. Nu există o astfel de comandă, dar acum o putem seta cu ușurință programabil:

Dacă jucătorul (cmd == 'minus'). volum = 0,1;

Dacă (cmd == 'stop')

Să încercăm ceva mai complicat.

Încercarea de a apela mediobook-ul primit de către jucător în timp ce acesta nu reușește, cel puțin pentru că poate juca doar o singură compoziție. Să corectăm această neînțelegere, să pierdem întregul album!

Pentru a începe cu jucătorul însuși:

Playerul Var; // obiectul media în sine

Var traseu = 0; contor de albume

Var trasee = ['Waitin pentru bus. mp3 ',' Sheik. mp3 ',' Master of Sparks. mp3 '] o serie de piese de album. Într-o aplicație reală, ea poate fi obținută prin ajax / json-request

Player = document. getElementByld ("plr"); jucător. addEventListener ("terminat", nextTrack, false); jucător. src = melodii [pistă];

Aici, înainte de a încărca prima piesă în player, asociază evenimentul final al redării melodiei cu funcția care oferă următorul fișier audio. Este foarte simplu:

Funcția nextTrack ()

Jucător. src = melodii [pistă]; jucător. juca ();

Ați putea fi, de asemenea, interesat de următoarele articole:







Trimiteți-le prietenilor: