Posizionare un video in markup HTML5 è semplice, non più complesso per un dato browser che posizionare un'immagine. In questo articolo trarremo pieno vantaggio dal supporto del browser integrato per creare il video player più semplice possibile.

Disporremo il framework di base dell'applicazione e quindi useremo il

Prerequisiti

Utilizza Chrome, Safari o Internet Explorer 9+. Per il momento dovrai evitare Firefox e Opera a causa dei problemi relativi al formato di file video cross-browser. Sebbene il supporto per l'elemento video sia coerente in tutti i browser moderni, il formato MP4 fa scattare Firefox e Opera. Puoi controlla la compatibilità qui.

Prima di iniziare dovrai trovare un file .mp4 che puoi usare, se non ne hai uno, troverai molti file mp4 online gratuiti.

Costruire il quadro di base

Il seguente codice è il framework attorno al quale costruisci il giocatore. Crea un layout semplice e ha un segnaposto per il video stesso.

Devi creare un nuovo file HTML nella tua directory di lavoro e nominarlo index.html, quindi aggiungere questo codice:

HTML5 Video Player

Ora, con le basi gettate, passiamo alla parte divertente del giocatore aggiungendo un video alla pagina.

Utilizzo dell'elemento video per aggiungere video a pagine Web

L'obiettivo nella progettazione di HTML5

Ecco come appare un video HTML5 in Chrome:

Il prossimo elenco mostra tutto il codice richiesto per visualizzare il video. Come puoi vedere, non è complicato.

Inserisci questo codice al posto di " "Commenta il codice qui sopra, assicurati di sostituire [IL TUO VIDEO] con il percorso del tuo .mp4 e aggiorna la pagina.