Video HTML

Hay muchos métodos para reproducir video en HTML.

Ejemplo

<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>

Pruebe usted mismo

Problemas, problemas y métodos de solución

Reproducir video en HTML no es fácil!

Necesita dominar muchas técnicas para asegurar que sus archivos de video se puedan reproducir en todos los navegadores (Internet Explorer, Chrome, Firefox, Safari, Opera) y en todos los dispositivos (PC, Mac, iPad, iPhone).

En este capítulo, CodeW3C.com le resume problemas y métodos de solución.

Utilice la etiqueta <embed>

La función de la etiqueta <embed> es incrustar elementos multimedia en una página HTML.

El siguiente código HTML muestra un video Flash incrustado en una página web:

Ejemplo

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

Pruebe usted mismo

Problema

  • HTML4 no puede reconocer la etiqueta <embed>. Su página no puede ser verificada.
  • Si el navegador no admite Flash, el video no se puede reproducir
  • iPad y iPhone no pueden mostrar videos Flash.
  • Si convierte el video a otro formato, aún no se puede reproducir en todos los navegadores.

Utilice la etiqueta <object>

La función de la etiqueta <object> es incrustar elementos multimedia en una página HTML.

El siguiente fragmento de HTML muestra un video Flash incrustado en una página web:

Ejemplo

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

Pruebe usted mismo

Problema

  • Si el navegador no admite Flash, no se podrá reproducir el video.
  • iPad y iPhone no pueden mostrar videos Flash.
  • Si convierte el video a otro formato, aún no se puede reproducir en todos los navegadores.

Utilice la etiqueta <video>

El <video> es una nueva etiqueta en HTML 5.

La etiqueta <video> se utiliza para incrustar elementos de video en una página HTML.

El siguiente fragmento HTML mostrará un video en formato ogg, mp4 o webm incrustado en la página web:

Ejemplo

<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" />
Su navegador no admite la etiqueta de video.
</video>

Pruebe usted mismo

Problema

  • Debe convertir el video a muchos formatos diferentes.
  • El elemento <video> no es válido en navegadores antiguos.
  • El elemento <video> no puede pasar la validación de HTML 4 y XHTML.

La mejor solución 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>

Pruebe usted mismo

En el ejemplo anterior se utilizaron 4 formatos de video diferentes. El elemento <video> de HTML 5 intentará reproducir el video en uno de los formatos mp4, ogg o webm. Si todos fallan, se recurrirá al elemento <embed>.

Problema

  • Debe convertir el video a muchos formatos diferentes
  • El elemento <video> no puede pasar la validación de HTML 4 y XHTML.
  • El elemento <embed> no puede pasar la validación de HTML 4 y XHTML.

Nota:Resuelva problemas de validación utilizando <!DOCTYPE html> (HTML5).

Solución Youku

El método más simple para mostrar un video en HTML es usar sitios web de videos como Youku.

Si desea reproducir un video en una página web, puede subir el video a sitios web de videos como Youku y luego insertar el código HTML en su página web para reproducir el video:

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

Pruebe usted mismo

Uso de enlaces

Si la página web contiene enlaces a archivos de medios, la mayoría de los navegadores usarán una aplicación auxiliar para reproducir los archivos.

El siguiente fragmento de código muestra un enlace a un archivo AVI. Si el usuario hace clic en el enlace, el navegador iniciará una aplicación auxiliar, como Windows Media Player, para reproducir este archivo AVI:

Ejemplo

<a href="movie.swf">Reproducir un archivo de video</a>

Pruebe usted mismo

Un comentario sobre los videos incrustados

Cuando un video se incluye en una página web, se llama video incrustado.

Si planea usar videos incrustados en aplicaciones web, debe ser consciente de que a muchas personas les resulta irritante los videos incrustados.

Además, tenga en cuenta que es posible que el usuario ya haya desactivado la opción de video incrustado en el navegador.

Nuestra mejor recomendación es incluirlos solo en lugares donde el usuario desea ver videos incrustados. Un ejemplo positivo es cuando el usuario necesita ver un video y hacer clic en un enlace, se abre una página y se reproduce el video.

Etiquetas multimedia de HTML 4.01

Etiqueta Descripción
<applet> No recomendado.Define el applet incrustado.
<embed> No recomendado.Define el objeto incrustado (permitido en HTML5).
<object> Define el objeto incrustado.
<param> Define los parámetros del objeto.

Etiquetas multimedia de HTML 5

Etiqueta Descripción
<video> La etiqueta define sonidos, como música u otros flujos de audio.
<embed> Las etiquetas definen el contenido incrustado, como complementos.