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>

Prova da solo

Problemi, problemi e soluzioni

Non è facile riprodurre video in HTML!

Hai bisogno di padroneggiare molte tecniche per assicurarti che i tuoi file video possano essere riprodotti in tutti i browser (Internet Explorer, Chrome, Firefox, Safari, Opera) e su tutti i dispositivi (PC, Mac, iPad, iPhone).

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

Usare l'etichetta <embed>

L'etichetta <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"/>

Prova da solo

Problema

  • HTML4 non riconosce l'etichetta <embed>. La tua pagina non può essere convalidata.
  • Se il browser non supporta Flash, il video non potrà essere riprodotto
  • iPad e iPhone non possono mostrare video Flash.
  • Se converti il video in un altro formato, potrebbe non essere riproducibile in tutti i browser.

Usare 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"/>

Prova da solo

Problema

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

Usare il tag <video>

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

L'elemento <video> ha lo scopo di嵌入视频元素 nel pagina HTML.

Il seguente segmento HTML mostrerà un video embeddabile 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>

Prova da solo

Problema

  • Devi convertire il video in molti formati diversi.
  • L'elemento <video> non funziona nei browser obsoleti.
  • L'elemento <video> non può essere validato in 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>

Prova da solo

Nell'esempio precedente 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 non riesce, ricorre all'elemento <embed>.

Problema

  • Devi convertire il video in molti formati diversi
  • L'elemento <video> non può essere validato in HTML 4 e XHTML.
  • L'elemento <embed> non può essere validato in HTML 4 e XHTML.

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

Soluzione Youku

Il modo più semplice per visualizzare 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 inserire il codice HTML nella tua pagina 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>

Prova da solo

Utilizzo di hyperlink

Se la pagina web contiene link a file multimediali, la maggior parte dei browser utilizzerà un'applicazione ausiliaria per riprodurre i 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 ausiliaria, come Windows Media Player, per riprodurre questo file AVI:

Esempio

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

Prova da solo

Un commento su video in linea

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

Se intendi utilizzare video in linea in un'applicazione web, devi essere consapevole che molti utenti trovano fastidiosi i video in linea.

Allo stesso tempo, nota che l'utente potrebbe aver disattivato l'opzione dei video in linea nel browser.

Il nostro consiglio migliore è includere questi video solo dove l'utente desidera vederli in linea. Un esempio positivo è quando l'utente deve vedere un video e fare clic su un link, aprendo la pagina e riproducendo il video.

Etichette multimediali HTML 4.01

Etichetta Descrizione
<applet> Non raccomandato.Definire l'applet incorporato.
<embed> Non raccomandato.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.