Inserire un video in una pagina web

Prima dell’avvento di HTML5, inserire video in una pagina web richiedeva l’utilizzo di tecnologie di supporto quali Flash e javascript.
La nuova specifica HTML5 introduce il tag specifico <VIDEO>, abbandonando l’uso del famoso contenitore <object>.

I formati supportati dal nuovo tag sono:

  • MP4 video/mp4;
  • WebM video/webm;
  • Ogg video/ogg.

Con il tag video sono introdotti:

  • <source> per definire risorse video multiple, per ogni elemento video o audio;
  • <track> per definire tracce multiple nel player multimediale.

 

Source

Con questo tag sono introdotti gli attributi:

  • media che permette di specificare il tipo di risorsa multimediale. Ad esempio possiamo definire la vista stampa, oppure definire un altezza del player;
  • src che permette di definire l’indirizzo sorgente della risorsa;
  • type per specificare il tipo di MIME:
    • video/ogg – video/mp4 – video/webm
    • audio/ogg – audio/mpeg.

Track

Questo tag introduce gli attributi:

  • default che consente di specificare la traccia di default;
  • kind per specificare il tipo di traccia:
    • captions;
    • chapters;
    • descriptions;
    • metadata;
    • subtitles.
  • label text Specifies the title of the text track
  • src per specificare l’URL della traccia. Questo attrivuto è obbligatorio;
  • srclang per specificare la lingua della traccia, come ad esempio IT per l’italiano (obbligatorio se kind=”subtitles”).

 

Per studiare un esempio è possibile visualizzare e testare il codice riportato all’indirizzo seguente (Per poter visualizzare l’URL usa uno dei pulsanti social di seguito):

[like_to_read]http://www.michelepierri.it/examples/video/video.html[/like_to_read]

Michele Pierri

Sviluppatore android/web/desktop, blogger, nonchè sostenitore incallito dell'universo Cloud Computing, nel tempo libero amo fare sport e praticare arti marziali.