Riproduzione multimediale in HTML5

Quando lavoriamo sul web dobbiamo assicurarci che ogni utente abbia un'esperienza soddisfacente sulla nostra pagina, molte volte questo implica dover fare codice aggiuntivo o meno efficiente, il tutto affinché la nostra pagina non fallisca.
Con il nuovo standard HTML abbiamo i nuovi elementi multimediali, come audio e video, poiché entrambi hanno un'origine comune, possiamo valutarne i formati e in questo modo sapere se il browser può riprodurre o meno i file specificati.
Metodo CanPlayType
Il metodo canPlayType Ci permette di sapere o avere un'idea se il browser può riprodurre o meno il file multimediale che stiamo indicando.
Utilizzando questo metodo possiamo avere 3 tipi di risposta:

• “” vuoto questo ci dice che non puoi riprodurre il file nel formato specificato.
• può essere questa risposta ci dice che il formato potrebbe essere riproducibile.
• probabilmente Con questa risposta il browser ci dice che ci sono alte probabilità che possa riprodurre il contenuto nel formato specificato.

Vediamo di seguito un codice dove utilizziamo questo metodo su un file multimediale:

 Esempio Il video non può essere visualizzato 
 
Proprietà
Valore

 

 

Qui semplicemente quello che facciamo è esibirci due array, nella prima posizioniamo i nomi dei file con estensioni diverse, nella seconda posizioniamo i formati che abbiamo, una volta con quella passiamo attraverso l'array di formati e poi stiamo valutando con il metodo canPlaytype per ottenere la risposta di cui abbiamo bisogno.
Finora sta andando tutto liscio, una volta che abbiamo la valutazione chiediamo chi ha restituito la risposta probabilmente e questo è quello che collocheremo per la riproduzione.
Vediamo come appare nel browser:

In questo esempio specifico usiamo Firefox, in questo caso il formato che il browser può riprodurre è il webm ed è effettivamente quello mostrato nell'elemento corrispondente.
Come possiamo vedere, questo metodo ci consente di stabilire diverse opzioni e se sviluppiamo correttamente il nostro algoritmo, possiamo eseguire una funzionalità molto robusta che ci consentirà di godere dei vantaggi di HTML5 nella gestione di contenuti multimediali in più browser senza doversi preoccupare dell'esperienza dell'utente.
Con questo concludiamo il nostro tutorial, avendo ora la conoscenza di come valutare i diversi formati multimediali e come i browser possono trattarli ciascuno.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo