JMiur [E]

Lo que se viene es el HTML5, nuevas opciones para los desarrolladores de páginas webs de cualquier tipo. Aún falta pero el futuro se presenta interesante. Una de sus novedades es la posibiliad de reproducir audio y video sin utilizar Flash, es decir, sin reproductores intermedios, incrustando directamente el archivo mediante una etiqueta.

Algunos de los sitios más conocidos ya emplean esa tecnología como alternativa: Dailymotion, YouTube, Vimeo, etc pero, el problema que se nos presenta es que ahora, será el navegador el que deberá encargarse de esa reproducción y allí es donde aún faltan actualizaciones ya que no se han puesto de acuerdo acerca del formato de esos videos. En Opera y Firefox se utiliza OGG, en Chrome y Safari se utiliza OGG y MP4; a esto, se ha sumado Google proponiendo un nuevo formato llamado WebM que, luego de largas discusiones, parece haber sido aceptado por todos y eso, tal vez, hará que se tranforme en el formato universal con la ventaja de ser de código libre y sin licencias. Aunque, por ahora sólo es un proyecto, todas las empresas han acordado que estará disponible en las próximas versiones de Firefox, Opera, Chorme e incluso Internet Explorer.

Sea como sea, la etiqueta elemental que utilizaremos será tan simple como esta:
<video src="URL_archivo"></video>
Lo que mostrará eso es un reproductor genérico pero, no es la única forma. Ya han comenzado a publicarse proyectos que amplian estas posibilidades, creando reproductores diferentes. De los que he visto, me ha llamado mucho la atención uno llamado Video JS que no es otra cosa que un script y una hoja de estilo completamente personalizable.

Para probarla, lo que debemos hacer es descargar el archivo ZIP que nos ofrecen y allí nos encontraremos con todo lo necesario: un ejemplo HTML, el script, la hoja de estilo por defecto y una carpeta con el resto de los skins alternativos.

Subimos el script a un servidor y lo agregamos a la plantilla antes de </head>:
<script src='URL_video.js' type='text/javascript' charset='utf-8'></script>
o lo agregamos directamente, copiando y pegando el contenido del archivo:
<script type='text/javascript' charset='utf-8'>
//<![CDATA[
... aquí pegamos el contenido ...
//]]>
</script>
Una vez hecho eso, lo activamos y, dependiendo de si usamos alguna otra librería, lo haremos de diferente modo para que se ejecute recién cuando nuestra página se haya cargado.
si usamos jQuery:
<script type='text/javascript' charset='utf-8'>
$(function(){ VideoJS.setup(); })
</script>

si usamos Prototype:
<script type='text/javascript' charset='utf-8'>
document.observe("dom:loaded", function() { VideoJS.setup(); });
</script>

si no usamos ninguna:
<script type='text/javascript' charset='utf-8'>
window.onload = function(){ VideoJS.setup(); }
</script>
Por último, añadimos la hoja de estilo ya sea desde un archivo:
<link rel='stylesheet' href='URL_video-js.css' type='text/css' media='screen' title='Video JS' charset='utf-8' />
o agregando directamente las propiedades entre etiquetas </style> y </style>

No voy a mostrar el CSS porque es un poco largo pero está muy bien documentado (en inglés), explicando qué es cada cosa así que, con paciencia y cuidado, puede llegar a modificarse por completo.

¿Cómo lo usaremos? Hay varias formas, la más simple para una archivo de formato OGG sería algo así:
<div class="video-js-box">
<video class="video-js" width="ANCHO" height="ALTO" poster="URL_imagen" controls preload>
<source src="URL_video" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>
Si usáramos otro formato deberíamos cambiar la etiqueta source y, eventualmente, podríamos poner varios de ellos para que el navegador decida cuál usar:
<div class="video-js-box">
<video class="video-js" width="ANCHO" height="ALTO" poster="URL_imagen" controls preload>
<source src="URL_video.ogg" type='video/ogg; codecs="theora, vorbis"'>
<source src="URL_video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="URL_video.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>
</div>
Por ahora, como la mayoría de estas cosas, no funcionará en Internet Explorer hasta que salga la versión 9 así que, para ese navegador y para cualquier otro que no soporte el formato elegido, podríamos agregar el archivo de Flash, una imagen o texto de advertencia, etc:
<div class="video-js-box">
<video class="video-js" width="ANCHO" height="ALTO" poster="URL_imagen" controls preload>
<source src="URL_video.ogg" type='video/ogg; codecs="theora, vorbis"'>
<source src="URL_video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="URL_video.webm" type='video/webm; codecs="vp8, vorbis"'>
<object class="vjs-flash-fallback" width="ANCHO" height="ALTO" type="application/x-shockwave-flash" data="URL_archivo"> ....... </object>
</video>
</div>
Este es un ejemplo concreto:

Descargar Video: MP4 | WebM | OGG | FLV



<div class="video-js-box">
<video class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"'>
<embed class="vjs-flash-fallback" width="640" height="294" src="http://blip.tv/play/AYHp%2BzAC" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>
</video>
<p class="vjs-no-video">
<strong>Descargar Video: </strong>
<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a> |
<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a> |
<a href="http://video-js.zencoder.com/oceans-clip.ogg">Ogg</a>
</p>
</div>

Si bien todo esto es nada más que una puerta entrreabierta al futuro, ese futuro no es tan lejano; la velocidad de los cambios apabulla y se vienen tiempos de cambios brutales. Hay una evidente pelea de negocios entrecruzados pero los grandes están impulsando con fuerza estas nuevas tecnologías y eso, a la larga, nos beneficiará a todos, dándonos lo único que realmente necesitamos: alternativas de donde elegir. En el surtido está el gusto pero la diversidad tambien es escencial a la la libertad.

En la práctica, aún es complejo porque no es sencillo alojar ese tipo de archivos aunque ya hay sitios como Vimeo o Blip.TV que aceptan algunos de ellos y nos permiten enlazarlos de manera directa. Algo similiar nos ofrece TinyVid donde podemos encontrar videos en formato OGG o, si creamos una cuenta gratuita, podemos subirlos en cualquier formato y convertirlos, incluyendo videos de YouTube, Vimeo, Dailymotion y otros servicios; no será lo ideal ya que se limita la cantidad de veces que pueden ser vistos por dia (500) pero, es una alternativa viable para experimentar a gusto.

Este, es un ejemplo de un video de YouTube http://www.youtube.com/watch?v=NA90IlymdZ4, convertido a formato OGG: http://tinyvid.tv/show/3r438pnhwxdsf:

27 comentarios:

k_nelita  

Que buenos que están estos videos JM!! Geniales! El primero me encantó! Y hasta son mas rápidos de cargar que los comunes de YouTube que me tardan un montón, a mi con mi conexión por lo menos, estos cargaron enseguida y se reprodujeron sin pausas!

El primer ejemplo de código o etiqueta no es lo que se usa en WordPress?
Esta: video src="URL_archivo"/video o me equivoco? Le saqué los > que no lo acepta...

Responder
JMiur  

Es un tema interesante. Aún está medio verde pero es el futuro, sin duda.

Lo de WordPress es casualidad, seguramente, lo que viste es algún plugin que usa una etiqueta similar a menos que sea justo un tema hecho para HTML5 cosa que no creo ya que el formato de los videos es fundamental para esto.

Responder
Graciela  

Como el tema está medio verde, me puse a mirar los videos churulululu laralara crurulululu laralala larala larala la

y no salió en coments larala la

Responder
Miguel  

No me funciona el css , me da error en Blogger.

Responder
JMiur  

Disfrute Doña Graciela :D

Miguel, revisa lo que has hecho porque acá, como ves, esta funcionando.

Responder
Gem@  

Es una maravilla, me gusta por la simpleza, para mostrarlo en ventana modal imagino que se podría ampliar el tamaño del vídeo ¿es así?

Responder
Alejandro  

como obtengo la url del video en tinyvid? un abrazo grande y la otra sino es mucha molestia, si lo quiero incluir en una entrada como vos, cual seria el paso? ya que lo intente pero el editor de blogger no me deja, un saludo grande y genial tu blog

Responder
JMiur  

Gem@:
no he experimentado con modales pero imagino que puede hacerse. Lo del tamaño del video es a gusto de cada uno, no tiene restricciones.

Alejandro:
La URL es la que puedes ver en Download Video, debajo de cada uno. Sino, al formas con la página. Si la página es:
http://tinyvid.tv/show/3r438pnhwxdsf
el video es:
http://tinyvid.tv/file/3r438pnhwxdsf.ogg
cambias show por file y le agregas la extensión .ogg

Responder
Ana  

En http://elblogdana.blogspot.com podeis recoger el premio Dardo y blog de Oro. Espero que os anime a seguir trabajando.Siempre que os necesitamos estais ahí. Saludos. Ana.

Responder
JMiur  

Gracias, Ana, es un honor :-)

Responder
Laura Peralta  

Que bueno que esta!!!, la verdad genial. Concuerdo con los comentarios. Es simple, y carga rapido (a la vista).

Responder
Vero Rodriguez  

Interesante! dos preguntas ¿esos formatos IGG y Webm se pueden ver luego en un televisor con reproductor de dvd? se puede agregar la funcion de descargar en el reproductor?.gracias.

JMiur  

Ni idea.

Responder
Revista Pixel MX  

no me sale, esque no se donde poner la segunda parte de si usamos jQuery y no se donde va la hoja de estilo :S me podrias decir donde va eso?

JMiur  

Tanto el script como el CSS se colcoan en el head de la página.

Responder
Andres Peru  

Llevo días detrás de enterarme del porque los videos de antenas 3 no se me reproducen con WXP + IE8 + "Flash Player".
La página pide continuamente para que sea instalado "Flash Player", estando instalado.

Pero he podido comprobar que si se reproducen con W7 + IE8 + "Flash Player".

Parece que tiene que ver con algo como "video.js".
Posiblemente si el SO+navegador no funciona por este "video.js", se hace una sustitución con el "Flash".

¿Pero que tiene el W7 sobre el WXP , a este respecto?

¿Que se le puede hacer al WXP+IE8+Flash, para ver los videos de antena 3?

¿Alguien puede dar detalles precisos de que es lo que pasa con antena 3?



JMiur  

No veo problema alguno con Flash, XP y videos como este:
http://www.antena3.com/directo/

Andres Peru  

Y con un enlace de mas arriba en esta pagina:
http://tinyvid.tv/show/3r438pnhwxdsf

Veo lo siguiente:
http://www.antonidav.jazztel.es/0/11.JPG

JMiur  

El video de http://tinyvid.tv/show/3r438pnhwxdsf no podrás verlo en IE8 porque está incrustado en formato HTML5 y esa versión del navegador no soporta ese formato.

Por eso te muestra ese mensaje.

Responder
Andres Peru  

JMiur,
Utilizas WXP sp3 pro, IE8, y Flash?

Yo con ese enlace no veo nada de algun video:
http://www.antonidav.jazztel.es/0/10.JPG

Responder
Andres Peru  

http://www.antena3.com/noticias/espana/valenciano-presidente-gobierno-puede-estar-atenazado-golfo_2013030500031.html

Algunos de los muchos errores que se producen:

http://www.antonidav.jazztel.es/0/12.JPG
http://www.antonidav.jazztel.es/0/13.JPG
http://www.antonidav.jazztel.es/0/14.JPG

JMiur  

Sí, uso XP y no veo ese problema.

Yo nunca aconsejo usar tal o cual navegador pero, si tienes XP, no deberías usar IE8 como navegador por defecto ya que es un soft totalmente desactualizado y tendrás problemas varios. Usa cualquier otro hasta que puedas instalar las versiones 9 o 10 de Internet Explorer.

Responder
Andres Peru  

No sé si hay videos en otras paginas que yo no pueda ver, pero en principio solo es en "antena 3".

¿Algo especial tendrá esa pagina?

Si utilizo W7, con IE8, no hay problema.

Si le dejo que me notifique errores, salen un monton a cada momento.
http://www.antonidav.jazztel.es/0/ErrorADOBE.txt

Segun MS, IE8 es el mas actual para WXP.
Supongo que no puedo poner IE9
http://www.antonidav.jazztel.es/0/IE8.JPG

JMiur  

Si sólo pasa en ese sitio, deberás consultar con ellos. Muchos sitios, simplemente, han dejado de dar soporte a IE8 y es lógico que así sea.

No, no puedes actualizar la versión en XP, las nuevas versiones de IE sólo pueden instalarse en Windows Vista 7 y 8. Por eso digo lo de no usarlo como navegador por defecto en XP.

Responder
PixelPuntoMx  

Jmiur excelente explicación, pero me ha surgido una inquietud, si quiero ponerle un logo/marca de agua? hay que procede? intente poner el parametro logo="logo.jpg" seguido de poster="poster.jpg" y no me funciona, que me sugieres?

JMiur  

No existe tal cosa, la etiqueta video no tiene es parametro.

Responder
siamak mehdizadeh  

Yo estoy haciendo un videoreproductor(con mi video) con controles personalizados mios con JavaScript y el skin con mi hoja de estilo,
¿cómo podría incorporar modernizr y videojs con mi página?

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR