Video HTML

Ci sono molti modi per riprodurre video in HTML.

Esempio

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Provalo personalmente

Problemi, problemi e soluzioni

Riprodurre video in HTML non è facile!

Devi essere familiare con molte tecniche per assicurarti che il tuo file video possa essere riprodotto in tutti i browser (Internet Explorer, Chrome, Firefox, Safari, Opera) e su tutte le hardware (PC, Mac, iPad, iPhone).

In questa sezione, CodeW3C.com ti ha riassunto i problemi e le soluzioni.

Utilizzare il tag <embed>

Il tag <embed> ha lo scopo di integrare elementi multimediali nelle pagine HTML.

Il seguente codice HTML mostra un video Flash integrato nella pagina web:

Esempio

<embed src="movie.swf" height="200" width="200"/>

Provalo personalmente

Problema

  • HTML4 non riconosce il tag <embed>. La tua pagina non può essere validata.
  • Se il browser non supporta Flash, il video non potrà essere riprodotto
  • iPad e iPhone non possono visualizzare video Flash.
  • Se convertite il video in un altro formato, non potrà essere riprodotto in tutti i browser.

Utilizzare il tag <object>

Il tag <object> ha lo scopo di integrare elementi multimediali nelle pagine HTML.

Il seguente pezzo di HTML mostra un video Flash integrato nella pagina web:

Esempio

<object data="movie.swf" height="200" width="200"/>

Provalo personalmente

Problema

  • Se il browser non supporta Flash, il video non potrà essere riprodotto.
  • iPad e iPhone non possono visualizzare video Flash.
  • Se convertite il video in un altro formato, non potrà essere riprodotto in tutti i browser.

Utilizzare il tag <video>

Il tag <video> è una nuova etichetta HTML 5.

Il tag <video> ha lo scopo di incorporare elementi video nelle pagine HTML.

Il seguente frammento HTML mostrerà un video incorporato nella pagina web in formato ogg, mp4 o webm:

Esempio

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Il tuo browser non supporta il tag video.
</video>

Provalo personalmente

Problema

  • Devi convertire il video in molti formati diversi.
  • L'elemento <video> non funziona nei browser obsoleti.
  • <video> non può passare la validazione HTML 4 e XHTML.

La migliore soluzione HTML

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Provalo personalmente

Nell'esempio sopra sono stati utilizzati 4 formati di video diversi. L'elemento <video> di HTML 5 tenta di riprodurre il video in uno dei formati mp4, ogg o webm. Se tutto fallisce, si torna all'elemento <embed>.

Problema

  • Devi convertire il video in molti formati diversi
  • <video> non può passare la validazione HTML 4 e XHTML.
  • <embed> non può passare la validazione HTML 4 e XHTML.

Nota:Risolvi i problemi di validazione utilizzando <!DOCTYPE html> (HTML5).

Soluzione Youku

Il modo più semplice per mostrare un video in HTML è utilizzare piattaforme di video come Youku.

Se desideri riprodurre un video nella tua pagina web, puoi caricare il video su piattaforme di video come Youku e poi inserire il codice HTML nella tua pagina web per riprodurre il video:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

Provalo personalmente

Utilizzo degli hyperlink

Se la pagina web contiene link a file multimediali, la maggior parte dei browser utilizzerà un'applicazione di assistenza per riprodurre il file.

Il seguente frammento di codice mostra un link a un file AVI. Se l'utente fa clic sul link, il browser avvierà un'applicazione di assistenza, come Windows Media Player, per riprodurre questo file AVI:

Esempio

<a href="movie.swf">Riproduci un file video</a>

Provalo personalmente

Un commento su video in linea

Quando un video è incluso nella pagina web, si chiama video in linea.

Se si prevede di utilizzare video in linea in un'applicazione web, è necessario essere consapevoli del fatto che molte persone trovano fastidiosi i video in linea.

Allo stesso tempo, si prega di notare che l'utente potrebbe aver disattivato l'opzione dei video in linea nel browser.

Il nostro consiglio migliore è includere i video in linea solo quando l'utente desidera vederli. Un esempio positivo è quando l'utente deve vedere un video e fare clic su un link, viene aperta una pagina e il video viene riprodotto.

Etichette multimediali HTML 4.01

Etichetta Descrizione
<applet> Non consigliato.Definire l'applet incorporato.
<embed> Non consigliato.Definire l'oggetto incorporato (permesso in HTML5).
<object> Definire l'oggetto incorporato.
<param> Definire i parametri dell'oggetto.

Etichette multimediali HTML 5

Etichetta Descrizione
<video> L'etichetta definisce suoni, come musica o altri flussi audio.
<embed> L'etichetta definisce il contenuto incorporato, come plugin.