Insertar vídeo

Regresar al índice

1. El elemento vídeo

Es igual de sencillo que añadir audio: para insertar un vídeo deberá utilizar el elemento video con el atributo src.

Esta sería la sintaxis básica:

<video src="video.mp4"></video>

2. Los atributos para el vídeo

Encontramos los mismos atributos que vimos para el audio, con las mismas funcionalidades: controls, preload, loop y autoplay.

<video src="video.mp4" controls preload></video>

Puede usar los atributos height y width para especificar el alto y el ancho del vídeo. De este modo evitaremos que sea el navegador quien determine esos parámetros y disminuiremos el tiempo de carga de la página web, al igual que ocurre con la inserción de imágenes.

<video src="video.mp4" controls preload width="720" height="576></video>

Dispone además del atributo poster, que le permite mostrar la imagen que usted elija, en lugar de la primera imagen del vídeo, mientras se espera a que este comience. Resulta práctico para mostrar los "títulos de créditos"... ¡de manera estática, claro está!

<video src="video.mp4" controls preload width="720"

height="576" poster="image.jpg"></video>

3. La apariencia del reproductor de vídeo

Como es habitual, la apariencia del lector de vídeo dependerá del navegador:

Este es el reproductor de vídeo de Opera 12:

Este es el reproductor de vídeo de Chrome 29:

Este es el reproductor de vídeo de Safari 6:

Este es el reproductor de vídeo de Firefox 23:

Este es el reproductor de vídeo de Internet Explorer 10:

4. Los formatos de vídeo

Para insertar vídeos en una página web, necesitará tres ”capas”, tres ”envoltorios”. La primera es el formato, que es solo un ”contenedor”, una caja que albergará el vídeo y el audio. Los formatos se reconocen por sus extensiones: .avi, .mov, .mp4, .mkv, etc. La segunda es el códec de audio, que permite comprimir el sonido: MP3, OGG, AAC, etc. La última es el códec de video, que permite comprimir las imágenes: H 264 -el más potente pero que aún plantea problemas de derechos y de difusión-, Ogg Theora, muy usado en el ámbito Linux, WebM-, propuesto por Google.

Nuevamente nos encontramos ante una "guerra de formatos". El balance es el mismo que para el audio y las consecuencias son idénticas. Presentamos una tabla en la que se recogen formatos y navegadores en sus últimas versiones (septiembre 2013):

	H.264 (.mp4)	ogg Theora (.ogv)	WebM (.webm)
Internet Explorer	Sí	No	No
Chrome	Sí	Sí	Sí
Firefox	No	Sí	No
Safari	Sí	No	No
Opera	No	Sí	Sí

Al igual que para el audio, es usted quien deberá crear tantos archivos de vídeo como sean necesarios y obtener así la mayor compatibilidad posible con los navegadores más populares. Utilice el nuevo elemento source con su atributo indisociable src.

Esta sería la sintaxis básica:

<video>

<source src="video.mp4">

<source src="video.ogg">

<source src="video.webm">

</video>

También puede especificar los formatos y los codecs usados en el vídeo para facilitarle al navegador todos los datos técnicos:

<source src="video.ogg" type="video/ogg ;

codecs=’theora,vorbis’">

5. Convertir vídeos

Para que su vídeo sea compatible con el mayor número posible de navegadores, necesitará un gran número de archivos de vídeo con diversos formatos. Usted puede usar un programa minimalista pero eficaz, gratuito y multiplataforma, se trata de Miro Video Converter (http://www.mirovideoconverter.com/). Este programa le permitirá convertir sus vídeos a los formatos .mp4, .webm, .ogv, e incluso a los formatos para iPhone y Android.



Espero haber ayudado en algo. Hasta la próxima oportunidad!

Regresar al índice

Twittear