HTML5 | Reproductor JW Player para HTML5

Por: Nicolas Seijas | Categoría: HTML

Con el crecimiento que ha tenido HTML5 y CSS3, cada vez, encontramos más de estas utilidades que nos ayudan a mejorar nuestra web, en este caso, les presentamos un reproductor de video en HTML5 llamado JW Player.

Este reproductor además de ser en HTML5, en exploradores que no soporten este tipo de formato, se transformará automaticamente en un reproductor FLASH (JW Player for FLASH). Otro punto a su favor, es que podremos modificar su skin y configurarlo totalmente, y esta basado en la tag <video> de HTML5.

Dentro de las opciones que podremos configurar se encuentra si queremos el video empiece automáticamente, autorepetición, que empiece con un volumen predeterminado y mucho más.

Los formatos soportados son los mismos que pueden ser reproducidos por FLASH:

  • H264 baseline video / AAC low-complexity audio en el contenedor MP4 o MOV
  • Theora video / Vorbis audio en el contenedor OGG
  • VP6 video / MP3 audio en el contenedor FLV
  • Spark (H263) video / MP3 audio en el contenedor FLV

Código HTML

Deberán colocar este código en el <head>

<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript" src="/scripts/jquery.jwplayer.js"></script>

Coloquen este código donde quieran que aparezca el video

<video height="270" id="player" poster="/files/bunny.mp4"
src="/files/bunny.mp4" width="480"></video>

<script type="text/javascript">
$('#player').jwplayer({
flashplayer:'/files/player.swf',
skin:'/files/stormtrooper.xml'
});
</script>

Un ejemplo de como debemos llamar el video con las tags <video>

<video width="480" height="270" id="myplayer">
<source src="/files/bunny.mp4" type="video/mp4" />
<source src="/files/bunny.ogv" type="video/ogg" />
</video>
JW Player

En el caso de que quieran hacerle alguna modificación personal les dejo este link donde se encuentran los códigos donde podrán configurarlo a gusto (el texto se encuentra en Ingles): Configurar JW Player

Importante: el reproductor se encuentra todavía en fase beta, esto quiere decir que no cuenta con todas las funcionalidades de su hermano JW Player for FLASH, pero igualmente, el reproductor es muy estable

¿Te gustó el artículo?

Recomiendalo a través de las redes sociales

    Comentarios

    Si deseas agregar un código a tu comentario por favor usa el siguiente formato: <pre name="code" class="php">Tu código</pre>. Puedes reemplazar la clase con "js", "css", "sql", o "html". Si el código tiene algún "<" o ">" en tu código reemplazalo con: &lt; y &gt; respectivamente.

    Este artículo tiene un comentario

    • Alex Bobadilla, comento el 18 de enero del 2012:

      Muy util, gracias por compartirlo.