HTML 5: El tag video

@ 11 . junio . 2009

Ya se empieza a hablar de las bondades que disfrutaremos con el HTML 5 y una de las principales es el nuevo tag <video> que indica a los navegadores si un archivo contiene video para ser reproducido directamente.

HTML 5 (HyperText Markup Language, versión 5) es la quinta revisión mayor del lenguaje básico de la World Wide Web, HTML. HTML 5 especifica dos variantes del mismo lenguaje: un clásico HTML (text/html), la variante conocida como HTML 5 y una variante XHTML conocida como XHTML 5. Esta es la primera vez que en HTML y XHTML se han desarrollado en paralelo.

El desarrollo de este código es regulado por el Consorcio W3C.

HTML 5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Algunos de ellos son técnicamente similares a las etiquetas
<div> y <span>, pero tienen un significado semántico, como por ejemplo <nav> (bloque de navegación del sitio web) y <footer>.
Otros elementos proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos <audio> y <video>.

Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos puramente de presentación, como <font> y <center>, cuyos efectos son manejados por el CSS. También hay un renovado énfasis en la importancia del scripting DOM para el comportamiento de la web.

Definición y uso de <video>

El tag <video> define a un archivo de video, como un movie clip o stream de video.

El <video> es nuevo en HTML5, no existe en HTML 4.01

Mensajes para navegadores antiguos

Uno puede escribir una oración dentro de los tags de video que se mostrará en los navegadores que no soporten HTML5.

Ejemplo:

<video src="http://www.aeromental.com/cool/angelina_en_triquini.wmv">
Tu navegador no soporta los tags de video ni HTML 5. Eres un Looser !!!!
</video>

Atributos opcionales

  • autoplay (true | false). Si es true, el video se reproducirá automáticamente.
  • controls (true | false). Si es true, el usuario verá algunos controles como el botón de play.
  • end (valor numérico). Define en que momento el player dejará de reproducir el audio y video. Por defecto se reproduce hasta el final.
  • height (pixeles). Indica la altura del reproductor de video.
  • loopend (valor numérico). Define donde se deberá crear el final de un loop para retornar al incio en su reproducción. Por defecto es al final.
  • loopstart (valor numérico). Define donde debería empezar el loop. Por defecto es el inicio.
  • playcount (valor numérico). Define cuantas veces el archivo debería de reproducirse. Por defecto es 1.
  • poster (dirección URL). La URL de una imagen que se mostrará mientras el video no este listo.
  • src (dirección URL). La dirección del archivo de video a reproducir.
  • start (valor numérico). Define donde el reproductor debería empezar a reproducir el video. Por defecto es al principio.
  • width (pixeles). Marca el ancho del reproductor.

Atributos estándar:

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title

Eventos:
onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

__
Via w3schools

Autor del post: DanielSemper: @aeromental + Facebook

  • Grego

    El único problema de estos nuevos tags, será ver como lo “renderiza” cada navegador, porque me da a mi que nos va a tocar meter nuevos hacks de CSS para que se vea igual en todos, jejeje.

    Salu2!!

  • keyvin

    hola estoy un poco confundido con el codigo de video html 5

    tengo instalado firefox 3.5

    y coloque el codigo en mi servidor web dentro de un archivo llamado index.php pero no reproduce mi video lo estoy abriendo con firefox 3.5 por logica

    uso xampp y tengo subdominio gratis con dyndns y tengo bastante experienca con html php jquery mysql etc

    el caso es que en src=”” coloco otras direcciones como de daylimotion hasta la direccion del video oficial de firefox y si lo reproduce pero el mio no

    nota mi video es ta alojado en mi propio servidor y la url esta bien colocada

    cual podra ser el error

  • ModderX

    Mi pregunta es si con el tag video se puede hacer STREAMING en LIVE.

    Es decir, supongamos que quiero montar una televisión online que emita en vivo y en directo desde un servidor. ¿El tag video podría emitir los videos tal y como lo hacen las actuales televisiones que emiten por wmv en broadcast live?

    Gracias y un saludo.

  • lucho

    holas, mi pregunta es como subir un video que tengo en mi pc a un sitio web(lo estoy creando en paginawebgratis.com)
    e buscado por internet y encontre varios codigos html, pero no me sirvio ninguno. por favor necesito que me pasen el codigo, como usarlo y subirlo a el sitio que estoy creando en paginawebgratis.com.
    espero no pedir mucho…
    espero que me puedan responder!!
    gracias! =)

  • lucho:

    Lo mejor es que te crees una cuenta en Youtube, subes ahí, y luego ahi mismo te dan el código para que copies y pegues en tu HTML.

  • Edu

    Hola sabrias poner un ejemplo en el que funcione el atributo end en un video?
    Estoy probando yo con el tag video de html5 y no consigo poder limitar el tiempo de visionado del video.
    Serias mi salvación…
    Edu

  • Alejandro

    Como puedo hacer para redireccionar la pagina cuando termine de reproducirse el video.

  • Pingback: La etiqueta <Video> de HTML5, parámetros y eventos – BlitzHive()