Cargar un vídeo en HTML5

10/Ene/2012 HTML5 , 5 Comentarios
Ejemplos de Artículos sobre HTML5

Cargar un vídeo en HTML 4.01 era una misión quizás un poco compleja. Esto era por varias cosas, por un lado no existía código estándar para cargar vídeos, si no que se utilizaba un código para cargar cualquier tipo de objeto. Por otro lado existía diferentes formatos de vídeos a cargar que se soportaban dependiendo del navegador y plugin que tuvieses: RealTime, QuickTime, Windows Media Player,…

Resultado de esa situación fue resultado el tomar a Flash como el formato más estable de la red (sitios como Youtube ofrecian, y ofrecen, el contenido en formato Flash), lo que hizo posible su expansión.

Con la llegada de HTML 5 se ha empezado a trabajar en la estandarización a la hora de cargar un vídeo y de los formatos que se van a soportar. Bueno, en este segundo punto quizás haya más discusión y tiranteces en la estandarización y sigue sin existir un consenso.

Pero vamos manos a la obra… Si queremos cargar un vídeo en HTML 5 tenemos que utilizar la etiqueta VIDEO, la cual tiene el siguiente formato.

Como podemos comprobar el elemento VIDEO en HTML 5 es un elemento sencillo de utilizar.

Así, si queremos cargar un vídeo que se llame «tecla.ogv», simplemente tenemos que utilizar el siguiente código:

Una de la cosas básicas que debemos de saber a la hora de cargar un vídeo es el tipo de formatos que soportan en HTML 5. Veamos por encima los que existen y sus extensiones:

  • MPEG-4, es el formato basado en el contenedor QuickTime. Suelen ser extensiones .mp4 o .m4v
  • Flash, son los vídeos de Adobe Flash que suelen tener la extensión .flv
  • Ogg, es un estándar opensource independiente de la plataforma. Suelen tener la extensión .ogv
  • WebM, es otro contenedor de vídeo desarrollado por Google. Suele tener la extensión .webm

Más que formatos deberíamos de referirnos a ellos como contenedores multimedia, ya que dentro albergan pistas de vídeo, pistas de audio, metainformación,…

Siguiendo con nuestro ejemplo, podemos dotar de información al navegador, si este no es capaz interpretar la etiqueta VIDEO. Para ello introducimos dicha información dentro de la etiqueta VIDEO.

En esta pequeña introducción a cómo cargar un vídeo con HTML 5 tenemos que aprender a poner los controles de manejo de vídeo y estos serán un atributo de la etiqueta vídeo llamado controls.

Así, finalmente, nuestro código queda de la siguiente forma:

Vídeos sobre HTML 5


5 comentarios en “Cargar un vídeo en HTML5”

Víctor Cuervo

Roman Villaseñor

Tengo un problema cuando accedo a la pagina web, cuando entro a la pagina web (index) tengo un video y un audio de inicio y cuando trato de reproducirlo no funciona pero cuando voy a otro sitio de la pagina y regreso a la pagina principal si funciona, no se como corregir eso, si alguien me pudiera decir como hacerlo por favor.

Víctor Cuervo

Víctor Cuervo

Roman,

Ayudaría si nos puedes decir dónde está para poderle echar un ojo. Podría ser un tema de que se haya cargado o no el vídeo… pero poco más te podría decir con la descripción.

Saludos.

Víctor Cuervo

comerxi

hola visiten mi web http://www.comerxi.com

Víctor Cuervo

prof. Elio Verde

No entiendo un carámbano! Explica mejor eso.

Víctor Cuervo

edico

hola buenas tardes, tengo un problema, tengo una pagina web en html5 y css3, con un video, no uso un reproductor en especifico para que el video se vea, dejo el codigo que es sencillisimo:

mi problema radica en que el divx plus web player que tengo instalado en chrome distorciona la hubicacion, el tamaño y la posicion del video, ¿como puedo decirle al codigo que no cargue ningun pluging como este de divx? gracias.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.