HTML5 video

Prima, se volevi aggiungere un video ad una pagina Web, era necessario utilizzare l'elemento <object>, che era da  contenitore universale per gli oggetti esterni. Questi elementi non erano tanto interrativi e non interagivano in modo sufficiente con altri elementi sulla pagina web.

La seconda possibilità che  potevi sfruttare era quella di utilizzare  plug-in del browser, come Silverlight o Flash. Anche se tecnologia Flash permeteva  di utilizzare un lettore di video pronto, o creare il proprio, ma il suo uso generava un grande mucchio di html-markup, ed è necessario  codificare i file video nel formato supportato.

HTML5 Video - un nuovo standard per inserire i file multimediali in rete con l'interfaccia  originale senza coinvolgere i plug-in esterni. Con utilizzo del  l'elemento <video> abbiamo la possibilità  di aggiungere in modo piu veloce contenuti video ad una pagina Web, nonché  stilizzare l'aspetto del lettore video usando i CSS.

Come aggiungere un video con HTML5 su una pagina web.

1. Elemento <video>

Supporto del browser
IE: 9.0, attributo muted — с 10.0
Firefox: 3.5 supporto di base, dal 15.0 — completta
Chrome: 3.0, attributo muted — с 30.0
Safari: 3.1, attributo muted — с 5.0
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.1
Chrome for Android: 44

Nel più semplice versione markup HTML per piazzare un file video in una pagina web è seguente:

<video src="/video.ogv" controls></video>

Attributo controls e responsabile della comparsa del panello di controlli del lettore video. È possibile aggiungere un'immagine di copertina  utilizzando l'attributo poster che il browser userà durante il download del video o finché  l'utente non faccia  clic sul pulsante play nonché  impostare l'altezza e la larghezza del video.

Come nel caso di un file audio è consigliato sotto il tag <source> tutti i formati per varie browser, cominciando dal piu  preferito. Inoltre è necessario specificare il tipo MIME per ogni video.

<video controls width="400" height="300">
  <source src="/video.mp4" type="video/mp4">/* MP4 per Safari, IE9, iPhone, iPad, Android,e Windows Phone 7 */
  <source src="/video.webm" type="video/webm">/*-- WebM/VP8 per Firefox4, Opera, e Chrome */
  <source src="/video.ogv" type="video/ogg">/* Ogg/Vorbis per versioni vecchie del browser Firefox e Opera */
  <object data="video.swf" type="application/x-shockwave-flash">/*aggiungere contenuti video per browser meno recenti che non supportano il tag video */
    <param name="movie" value="video.swf">
  </object>
</video>

Tabella 1. Attributi del tag <video>
Attributo Descrizione e valori ammissibili
autoplay Riproduzione automatica del file video subito dopo il caricamento della pagina.
controls Specifica al browser che deve visualizzare il panello di controllo base (play, pausa, volume).
height Specifica l'altezza della finestra per visualizzare video, valori possibili: px o %
loop Ripetizione del video.
muted Spegnere il suono durante la riproduzione di un file video.
poster URL del file immagine da visualizzare durante il caricamento del video o fino a quando l'utente preme il tasto PLAY. Se l'attributo non è specificato, verrà visualizzato il primo fotogramma del video.
preload Attributo responsabile per pre-caricamento di video. Non è necessario, alcuni browser lo ignorano. I valori possibili sono:
auto — il browser carica un file video completamente, in modo che sia disponibile quando l'utente vorrebbe vederlo.
metadata — browser carica una piccola parte del file video per capire le sue caratteristiche essenziali.
none — nessun carico automatico del video
src Contiene URL-indirizzo assoluto o relativo del file video.
width Specifica la larghezza della finestra per visualizzare il video, i valori possibili: px o %

2. Contenuto interattivo incorporato

Elemento <embed> specifica  un contenitore per applicazione esterna o contenuto interattivo (in altre parole, del plug-in). La maggior parte dei browser supportavano questo elemento gia da tempo. Tuttavia, questo tag non era incluso nelle specifiche HTML 4, ed è stato aggiunto alla specifica di HTML5. Con <embed>  è possibile aggiungere non solo video, ma anche immagini vettoriali in formato SWF in una pagina Web.

<embed src="/movie.mov" type="video/quicktime" width="640" height="480">
<embed src="/helloworld.swf">

Tabella 2. Attributi del tag <embed>
Attributo Descrizione e valori ammissibili
height Specifica l'altezza del contenuto incorporato px o %.
src Contiene un indirizzo URL assoluto o relativo di un file multimediale.
type Specifica il tipo MIME del file incorporato.
width Specifica la larghezza del contenuto incorporato px o %.

3. Codec video

Quando si visualizza un  video player deve decodificarlo. Alcuni player usano software per la decodifica di video, mentre altri usano per  la decodifica hardware.

Importante! Dal momento che ogni browser supporta un codec specifico, per garantire la riproduzione di contenuti video in tutti i browser, il file video deve essere collocato in diversi formati.

H.264 – codec di alta qualita del  MPEG  è diviso in due profili  per poter essere supportato da   dispositivi con funzionalità minime e da quelli ad alta risoluzione.

Ogg Theora – uno standard aperto gratuito per una qualità di video e prestazioni leggermente inferiori rispetto allo standard H.264.

VP8 – un codec aperto e gratuito, come qualità simile a H.264. Supportato in Firefox, Chrome e Opera.

4. Videocontainer

videocont

Qualsiasi file video è un contenitore di file in cui sono memorizzati altri file. Le tracce audio e video sono combinati per riprodurre il video. I metadati contengono informazioni su questo video – immagine di copertina, sottotitoli, ecc . Come  formati popolari di video container possiamo citare

Ogg (.ogv, .oga, .ogx, .ogg) -formato contenitore open-source con codec video Theora e audio Vorbis. Funziona in  Firefox, Chrome e Opera.
MIME-tipo: video/ogg.

MPEG 4 (.mp4) formato contenitore per il codec video H.264 e AAC. Funziona in Safari e Chrome. Codifica video, tra cui ad alta definizione, per una gamma completa di dispositivi, come iPhone, iPod e iPad.
MIME-tipo: video/mp4.

WebM (.webm) -formato contenitore open source per il  codec video VP8  da parte di Google e audio Ogg Vorbis. Lavora in  Firefox, Chrome, Opera e Adobe Flash Player.
MIME-tipo: video/webm.

Audio Video Interleave (.avi) formato creato per la registrazione suono e delle immagini in movimento, corrisponde alle specifiche RIFF.
MIME-tipo: video/vnd.avi, video/avi, video/msvideo, video/x-msvideo.

Matroska (.mkv) container video  che  può contenere un video in formato H.264, il VP8 o Theora.
MIME-tipo: video/x-matroska, audio/x-matroska.
Attualmente i browser supportano i tre principali formati video:

Formato Codec video Codec audio
.mp4 H.264 AAC
.ogg/.ogv Theora Vorbis
.webm VP8 Vorbis

Video in formato .avi non viene supportato su un sito web tramite  HTML5 . Pertanto, è necessario ricodificarlo in questi tre formati del video e audio con codec supportati . Per questo è possibile  utilizzare convertitori video elencati qui sotto nella pagina.

Per assicurarsi che il browser sara  in grado di gestire i file video, poi creare un file .htaccess nella cartella in cui si trova la  pagina Web continente video e specificare in questo fail  il tipo MIME per il video:

AddType video/ogg  .ogv
AddType video/mp4  .mp4
AddType video/webm  .webm

Nonostante il fatto che HTML5-video sono supportati dai browser moderni, tuttavia per Internet Explorer (9+) e Safari è richiesto installazione del plugin Microsoft Media Player e Apple QuickTime, rispettivamente.

Tabella 3. Attributi del tag <source>
Attributo Descrizione, valore
media Determina il tipo di dispositivo multimediale (cioè per quale tipo di dispositivo è stato ottimizzato il file).
src Specifica un URL-indirizzo assoluto o relativo del file multimediale.
type Definisce il MIME-tipo dedl fail media.

6. Aggiungere i sottotitoli e didascalie

 Elemento <track>viene utilizzato come figlio di elemento <audio> e <video>. Aggiunge una traccia di testo per i sottotitoli, titoli o altro testo che dovrebbe essere visibile durante la riproduzione del fail multimediale.

Tabella 4. Attributi del tag <track>
Attributi Descrizione, valore
default Indica che il brano viene riprodotto da default. Solo un elemento<track> può contenere questo attributo.
kind Specifica il tipo di traccia di testo, da default vengono visualizzati i sottotitoli (subtitles). Valori possibili :
captions — traduzione dialoghi ed effetti sonori. Viene visualizzato come testo sopra il video (per gli utenti non udenti)..
chapters — aggiungendo titoli dei capitoli in un elenco per navigare attraverso il media fail.
descriptions — aggiunge descrizione audio di ciò che accade nel video (per gli utenti non vedenti).
metadata — metadati utilizzati dagli script, non vengono visualizzati per gli utenti
subtitles — duplicazione testuale della colonna sonora, visualizzato come un sottotitolo al video..
label Aggiunge un nome alle tracce. Se questo attributo non viene specificato, il browser utilizzerà il valore predefinito.
src Fornisce un URL-indirizzo assoluto o relativo del file audio o video.
srclang Lingua della traccia in riproduzione.

7. Esempio: posizionare un video sul sito

1. Decodificimo  video in tre file con il video e audio codec appropriati:
per .mp4 - H.264 / AAC,
per .webm - VP8 / Vorbis,
per .ogv - Theora / Vorbis.
2. Aggiungiamo  supporto di tipi MIME nel file .htaccess.
3. Inserire il codice per inserimento video sul sito web utilizzando markup HTML5 e usando varie attributi per specificare i parametri richiesti del video:

<video controls width="660" height="500" poster="http://ioeweb.it/esempio_video.png" preload="none">
  <source src="http://ioeweb.it/images/css/proba.mp4" type="video/mp4">
  <source src="http://ioeweb.it/images/css/esempio_video.webm" type="video/webm">
  <source src="http://ioeweb.it/images/css/esempio_video.ogv" type="video/ogg">
</video>

4. Se si vuole allineare il lettore video sulla pagina, è necessario avvolgere il tag  <video> in un contenitore <div> assegnarli una classe per la quale impostare la larghezza e l'altezza corrispondente al formato del video. Successivamente, utilizzando css-proprietà, è possibile impostare i margini, l'allineamento sulla  pagina, ecc

8. Video Convertitori

online converter1

 

In oltre abbiamo creato anche un corso dedicato ad audio e video dove spieghiamo non solo quali formati ci sono e come produrre il proprio video ma anche come convertirlo nel formato desiderato con un programma incluso nel corso.

audvidBoxE come P.S. per questo articolo ti propongo una videolezione di come inserire un video da Youtube in una pagina HTML

 

Letto 713 volte