Redare multimedia în HTML5

Când lucrăm pe web, trebuie să ne asigurăm că fiecare utilizator are o experiență satisfăcătoare pe pagina noastră, de multe ori acest lucru implică nevoia de a crea un cod suplimentar sau mai puțin eficient, totul pentru ca pagina noastră să nu eșueze.
Cu noul standard HTML avem noile elemente multimedia, precum audio și video, deoarece ambele au o origine comună, le putem evalua formatele și în acest fel știm dacă browserul poate reda sau nu fișierele specificate.
Metoda CanPlayType
Metoda canPlayType Ne permite să știm sau să avem o noțiune dacă browserul poate reda sau nu fișierul multimedia pe care îl indicăm.
Prin utilizarea acestei metode putem avea 3 tipuri de răspuns:

• “” gol acest lucru ne spune că nu puteți reda fișierul în formatul specificat.
• pot fi acest răspuns ne spune că formatul poate fi redat.
• probabil Cu acest răspuns, browserul ne spune că există probabilități mari ca acesta să poată reproduce conținutul în formatul specificat.

Să vedem mai jos un cod în care folosim această metodă pe un fișier multimedia:

 Exemplul video nu poate fi afișat 
 
Proprietate
Valoare

 

 

Aici pur și simplu ceea ce facem este să performăm două matrice, în prima plasăm numele fișierelor cu diferite extensii, în a doua plasăm formatele pe care le avem, odată cu aceasta trecem prin matricea de formate și apoi evaluăm cu metoda canPlaytype pentru a obține răspunsul de care avem nevoie.
Până în prezent totul merge fără probleme, odată ce avem evaluarea, întrebăm cine a returnat răspunsul probabil și acesta este cel pe care îl vom plasa pentru reproducere.
Să vedem cum arată acest lucru în browser:

În acest exemplu specific pe care îl folosim Firefox, în acest caz formatul pe care browserul îl poate reproduce este formatul webm și este efectiv cel prezentat în elementul corespunzător.
După cum putem vedea, această metodă ne permite să stabilim mai multe opțiuni și dacă ne dezvoltăm corect algoritmul, putem realiza o funcționalitate foarte robustă care ne va permite să ne bucurăm de avantajele HTML5 în gestionarea multimedia în mai multe browsere fără a fi nevoie să vă faceți griji cu privire la experiența utilizatorului.
Cu aceasta ne terminăm tutorialul, având acum cunoștințele despre cum să evaluăm diferitele formate multimedia și despre modul în care browserele le pot trata pe fiecare.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv