Contenido

El elemento video del HTML5

30 Jun

+ 15

Se está hablando mucho de HTML5, y no es para menos. Va a suponer un antes y un despues en la forma de mostrar nuestras páginas web a Internet. El tag <video /> es sin duda el atractivo más visual de este nuevo estandar y es que su llegada puede revolucionar el mundo multimeda en Internet.

Antes (ahora)

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>

La forma de visualizar un video en una página web, actualmente es similar a la que muestro en este código. Pasa por el elemento <object /> que nos permite especificar otro <embed /> que nos permite incrustar una película flash en nuestro página.

Semánticamente, estamos hablando de un objeto (<object />) embebido en la página (<embed />), pero no nos dice que se trata de un video ya que este código, sirve para incrustar juegos flash, galerías,….

Con HTML5

<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer>
<p> Try this page in Safari  4! Or you can <a  href="http://www.youtube.com/demo/google_main.mp4">download the  video</a> instead.</p>
</video>

Con HTML5, además de quedar más claro que este contenido es un contenido de formato video nos permite informar una alternativa a los usuarios que no estén visualizando la aplicación con un navegador con esta capacidad.  Posibilitando descargar el video para que el usuario lo descargue y lo visualize con su reproductor predeterminado.

Conclusiones

Aún nos queda mucho tiempo para poder disfrutar de un potencial real, por el momento tendremos que seguir lidiando con las diferentes versiones de HTML para ofrecer las nuevas características a los navegadores más modernos sin dejar a los navegadores antiguos olvidados.

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" autobuffer controls poster="whale.png">
<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640"height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param value="http://www.youtube.com/demo/google_main.mp4">
<param value="true">
<param value="false">
<embed src="http://www.youtube.com/demo/google_main.mp4" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>
</video>

Si no quieres usar el tag <video />, para que las páginas validen por la W3C, siempre puedes usar la forma válida de incrustar videos flash en tus páginas.

<object width="460" height="265" data="http://vimeo.com/moogaloop.swf?clip_id=5072163" type="application/x-shockwave-flash">
<param value="http://vimeo.com/moogaloop.swf?clip_id=5072163"></param>
<param name="allowFullScreen" value="true"></param>
<param value="always"></param>
</object>

Via

  • Y esto no va a ser la puntilla para Flash ???

    Con lo flashero que había sido yo !!!

  • 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

    este es el codigo:

    saludos

  • Yo estoy haciendo una prueba sencilla en el FF 3.5 y no me funciona. El video existe en esa ruta, incluso he probado la etiqueta audio con un ogg y funciona perfectamente 🙁

    html5 test

    Try this page in Safari 4! Or you can download the video instead.

  • Hola.

    He pegado el código que indicas en tu página en la mía y no consigo visualizar ninguno de los vídeos, he probado en Safari 4.0 y firefoz 3.0 y nada de nada, ¿es necesario hacer algo más?

    Try this page in Safari 4! Or you can download the video instead.

  • He probado a poner un mp4 y me va perfecto tanto en un ipod touch como en el safari del ordenador.
    El Firefox logicamente no lo carga porque no soporta el mp4

    he subido el video del big buck bunny

    lo podeis ver aqui
    http://jcesar.sixserve.com/conejo2.html
    http://jcesar.sixserve.com/conejo3.html (este es un m4v con mas resolucion)

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.