HTML - Vídeo

» HTML » Tutorial HTML - Vídeo

Un archivo de vídeo puede ser insertado en una página web de dos maneras. La primera sería usando la etiqueta <embed>. Esta etiqueta no necesita una etiqueta de apertura/cierre. Funciona, la mayoría de veces, como funciona una etiqueta para fotos, por ejemplo.

html<embed src="example.mpeg" autostart="false" height="30" width="144" />

Ademas, puedes insertar un archivo de vídeo, para su descarga, usando el link.

html<a href="example.mpeg" title="Download movie">film name</a>

Extensiones soportadas por la etiqueta embed

Estas son las extensiones que soporta la etiqueta embed:

.swf - hecho por Macromedia Flash
.wmv - por Microsoft Windows Media Video
.mov - Quick Time Movie, pertenece a Apple
.mpeg - creado por Moving Pictures Expert Group.

Los mas utilizados son .mpeg y .swf, debido al formato compacto.

Atributos del tag embed

autostart - establece si el archivo se reproduce automáticamente después de que la página haya cargado. Puede tener el valor true o false.
hidden - establece si los botones están escondidos o no. Puede tener el valor true o false.
volume - puede tener cualquier valor entre 0 y 100
loop - establece si el archivo será reproducido den bucle. Puede tener el valor true o false.
playcount - este establece cuantas veces será reproducido el archivo. Por ejemplo playcount="2" significa que será reproducido dos veces y después se detendrá.

Insertar un vídeo de YouTube usando la etiqueta embed

Puedes hacer esto muy fácil, ya que YouTube tiene en cada página el código HTML necesario.

html<object width="425" height="344" data="https://www.youtube.com/embed/yUtUHfwHI9I"></object>

html<embed src="https://www.youtube.com/embed/yUtUHfwHI9I" allowfullscreen="true" width="425" height="344">

html<iframe  width="425" height="344" src="https://www.youtube.com/embed/yUtUHfwHI9I" frameborder="0" allowfullscreen></iframe>

Demo

Tengo que decir que los scripts para incrustar vídeos desde YouTube no son validos XHTML. Para generar códigos válidos para videos de YouTube puedes usar esta herramienta que códigos embed validos XHTML para vídeos de YouTube. Solo tienes que introducir la URL donde se encuentre el vídeo y obtendrás un código válido XHTML.

La etiqueta video de HTML5

Con la introducción del HTML5, el uso de la etiqueta video se ha extendido muy rápidamente con un buen soporte por parte de los navegadores modernos. La etiqueta de vídeo se utiliza para añadir un vídeo a la página HTML. De momento la etiqueta video de HTML5, tiene soporte para 3 tipos de archivos de vídeo:

mp4 - MIME-type video/mp4
webm - MIME-type video/webm
ogg - MIME-type video/ogg

html<video width="320" height="240" controls>
  <source src="/assets_tutorials/media/Shaun-the-Sheep-The-Movie-Official-Trailer.mp4" type="video/mp4">
  <source src="/assets_tutorials/media/Shaun-the-Sheep-The-Movie-Official-Trailer.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>