Video HTML

Hay muchos métodos para reproducir videos 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>

Pruebelo usted mismo

Problemas, problemas y soluciones

¡No es fácil reproducir videos en HTML!

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 todo tipo de hardware (PC, Mac, iPad, iPhone).

En este capítulo, CodeW3C.com le resume los problemas y las soluciones.

Utilice la etiqueta <embed>.

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

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

Ejemplo

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

Pruebelo usted mismo

Problemas

  • 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 etiqueta <object> se utiliza para incrustar elementos multimedia en una página HTML.

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

Ejemplo

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

Pruebelo usted mismo

Problemas

  • Si el navegador no admite Flash, no se puede 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>.

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

Pruebelo usted mismo

Problemas

  • Debe convertir el video a muchos formatos diferentes.
  • El elemento <video> no es válido en navegadores antiguos.
  • El elemento <video> no puede validarse en 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>

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

Problemas

  • Debe convertir el video a muchos formatos diferentes
  • El elemento <video> no puede validarse en HTML 4 y XHTML.
  • El elemento <embed> no puede validarse en HTML 4 y XHTML.

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

Pruebelo usted mismo

Uso de enlaces

Si la página web contiene enlaces a archivos multimedia, 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>

Pruebelo 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 los 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.