HTML/XHTML  »  Articoli  »  HTML5 

Questa è la traduzione dell'articolo How to Embed Video Using HTML5 di Justin Whitney, pubblicato originariamente su htmlgoodies.com. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.

Come si inserisce un video in una pagina Web utilizzando la sintassi HTML5? è semplice:

<video id="sampleMovie" src="HTML5Sample.mov" controls></video>

Tutto qui! Questo è ciò che serve per aggiungere un videoplayer al proprio sito senza installare add-on di terze parti o incorporare codici da altri siti, serve solo un semplice tag... se solo fosse così facile!

La complessità di HTML5 nasce non tanto dalla sintassi, quanto dal supporto delle funzionalità da parte dei browser e dal video encoding. Gli sviluppatori web sono abituati a combattere con le compatibilità dei browser, ma a questo si aggiunge lo spinoso problema del disaccordo tra i produttori di browser sugli standard video.

Per scrivere un sito che funzioni in HTML5, bisognerà quindi tener conto sia di come moderni browser quali Chrome, Firefox e Internet Explorer 9 implementano gli standard Web HTML5 per i video, sia di come gestire la visualizzazione nei browser più vecchi.

Limiti e vantaggi

Prima di tutto, per ridimensionare le nostre aspettative, è utile conoscere i limiti di HTML5 per quanto riguarda la riproduzione video.

• Ad esempio la riproduzione Full-screen attualmente non rientra nella specifica HTML5;
• i menu forniti di default dal player sono essenziali e dar loro un aspetto più sofisticato o coordinato con un brand anzidale, può richiedere un certo sforzo;
• a complicare il tutto ci sono i browser, che implemeno HTML5 e i CSS ognuno in modo diverso. Per fare un esempio, se aggiungiamo al video player gli angoli arrotondati su IE e Firefox, potremmo visualizzarlo squadrato su Chrome e Safari.
• non c'è nulla nelle specifiche che permetta uno streaming omogeneo o adattivo, che invece rappresenta una caratteristica essenziale per un sito serio di riproduzione video;
• ma forse è ancor più importante il fatto che la specifica non includa, ed evidentemente non lo farà mai, i Digital Rights Management (DRM). Questo significa che i contenuti protetti da copyright non potranno essere distributi attraverso HTML5 (almeno non dai detentori del copyright);
• e, naturalmente, i codec. Ma ne riparleremo tra breve.

Ma cosa si ottiene in cambio della rinuncia a queste cose? Un bel po', in realtà.

Prima di tutto, gli sviluppatori occasionali di siti che non sono super-specializzati sulla riproduzione video riescono ad inserire video in streaming in modo molto più facile e senza passare per siti di terze parti come YouTube o Vimeo.

In precedenza, gli sviluppatori avevano fondamentalmente tre opzioni per fare direttamente l'embed video:

• L'embed di un file non-streaming, che quindi doveva essere scaricato per intero prima di essere riprodotto;
• l'acquisto di plugin di terze parti (che potevano o meno funzionare su tutti i browser);
• l'uso di un media server dedicato, una soluzione troppo costosa e/o complicata da usare per la maggior parte dei siti.

HTML5 risolve questi problemi e offre una cornice personalizzabile per riprodurre video in streaming senza ricorrere a software di terze parti.

In secondo luogo, le specifiche HTML5 ci permettono di distribuire video su piattaforme proprietarie, come quelle dei prodotti iOS (iPhone, iPad). Ma guardando a questo aspetto da un'altra prospettiva, ciò libera gli sviluppatori dai vincoli imposti dalle piattaforme di distribuzione proprietarie che possono limitare o controllare come vengono distribuiti i file media. Dopo tutto, è questo il motivo per cui esistono gli standard aperti.

Infine, HTML5 non è tecnologia aliena: è l'ultima revisione di HTML. Ciò significa che possiamo lavorare tranquillamente anche con JavaScript e CSS e manipolare il codice lato client o lato server, come siamo abituati a fare.

Altri articoli

Altre guide

Altre newsletter