JW Player Gua de comienzo rpido.

Comencemos
Utilizar JW Player en tu sitio web es un simple proceso de 3 pasos: 1. Sube los archivos jwplayer.js y player.swf desde el ZIP que has descargado al servidor. Todos los otros archivos de la descarga (documentacin, cdigo, etc) son opcionales. 2. Incluye jwplayer.js en algn lugar del tag head de tu pgina web:
<script type=text/javascript src=/jwplayer/jwplayer.js><script>

3. Llama a las opciones del reproductor en algn lugar dentro del tag body de tu sitio web. Aqu tienes un ejemplo bsico:
<div id="container">Loading the player ...</div> <script type="text/javascript"> Jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf", file: "/uploads/video.mp4", height: 270, width: 480 }); </script>

Cuando la pgina se carga, JW Player se instancia automticamente en la parte superior del <div>. Por defecto el reproductor se presentara en Flash. Si Flash no es soportado (por ejemplo en un iPad), el reproductor se presentara en HTML5. La opcin flashplayer (para decirle al JavaScript donde reside el archivo SWF) es solo una de muchas opciones de configuracin disponibles para configurar JW Player. Aqu tienes otro ejemplo de configuracin, esta vez usamos el tag <video> en lugar de un div genrico:

<video src="/videos/video.mp4" height="270" id="container" poster="/thumbs/image.jpg" width="480"> </video>

<script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf" }); </script>

En este caso, JW Player es en realidad la representacin del tag <video> y carga estos atributos como opciones de configuracin. Esta es un atajo til para crear un reproductor bsico.

Insertado Rpido
Si has subido los archivos player.swf y jwplayer.js a una carpeta llamada jwplayer en la raz de tu sitio web, puedes insertar el reproductor usando dos simples lneas de cdigo HTML:
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script> <video class="jwplayer" src="/uploads/video.mp4" poster="/uploads/image.jpg"></video>

Eso es todo! Siempre y cuando lo tengas todo en el lugar correcto, todos los tag <video> de tu pgina cuya clase sea jwplayer sern reemplazados por JW Player.

Sintaxis de las configuraciones

Vamos a dar una mirada ms de cerca a la sintaxis de la funcin setup(). Esta tiene la siguiente estructura:
jwplayer(container).setup({options});

En este bloque, el container es un elemento del DOM (<video> o <div>, <p>, etc) en el que desea cargar el JW Player. Si el elemento es un tag <video>, los atributos de dicho tag sern cargados al reproductor. Options es la lista de opciones de configuracin para el reproductor. La gua de opciones de configuracin contiene una visin completa de estas opciones. He aqu un ejemplo con varias opciones:
<div id="container">Loading the player ...</div> <script type="text/javascript"> jwplayer("container").setup({ autostart: true, controlbar: "none", file: "/videos/video.mp4", duration: 57, flashplayer: "/jwplayer/player.swf", volume: 80, width: 720 }); </script>

Aunque generalmente es una lista plana, hay un par de opciones que pueden ser insertados. Cada uno de estos bloques permite configuraciones rpidas, pero de un gran alcance y utilidad. Playlist: permite la configuracin de una completa lista de reproduccin, incluyendo los metadatos. Levels: permite la configuracin de diferentes niveles de calidad de un video, para conseguir cambiar el bitrate. Plugins: permite la configuracin de JW Player plugins, incluyendo sus propias opciones de configuracin. Events: permite la configuracin de JavaScript para eventos del reproductor, por ejemplo si quieres que haga algo cuando inicie la reproduccin. Modes: permite la configuracin de reserva de modos personalizados, por ejemplo, HTML5, primera reserva a Flash.

La siguiente seccin las explicara en detalle:

Mascaras
JW Player tiene una gran variedad de mscaras que puedes utilizar para modificar el aspecto del reproductor. Puedes descargarlos desde nuestro AddOns Library. Para insertar una mscara para JW Player 5, simplemente coloca el archivo ZP en tu servidor web y aade la propiedad skin en tu cdigo:
<div id="container">Loading the player ...</div>
<script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf", file: "/uploads/video.mp4", height: 270, width: 480, skin: "/skins/modieus/modieus.zip" }); </script>

Nota: Si has configurado la insercin del reproductor para que comience reproduciendo primero en HTML5 usando el bloque modes, necesitaras realizar algunos pasos adicionales de descompresin del ZIP de la marcara y subir su contenido a tu servidor web en la misma ubicacin que hubieras puesto el archivo ZIP. La estructura de t carpeta de la mscara debera verse como esto:
/skins/modieus/modieus.zip /skins/modieus/modieus.xml /skins/modieus/controlbar/ /skins/modieus/playlist/ etc.

Playlists
En versiones anteriores solo Flash de JW Player, la carga de una lista de reproduccin (playlist) estaba disponible solo usando una lista de reproduccin en formato XML como RSS o ATOM. Con el JW Embedder, esto es posible usando el bloque playlist. Aqu tenemos un ejemplo en el cual cargamos un rbol de items como playlist al reproductor. Cada tem contiene una duracin, la ubicacin del archivo y la ubicacin de la imagen de poster o thumbnail.
<div id="container">Loading the player...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf", playlist: [ { duration: 32, file: "/uploads/video.mp4", image: "/uploads/video.jpg" }, { duration: 124, file: "/uploads/bbb.mp4", image: "/uploads/bbb.jpg" }, { duration: 542, file: "/uploads/ed.mp4", image: "/uploads/ed.jpg" } ], "playlist.position": "right", "playlist.size": 360, height: 270, width: 720 }); </script>

Nota: las opciones playlist.position y playlist.size controlan la visualizacin de la lista de reproducciones en el reproductor Flash. Hasta la fecha, el reproductor de HTML5 no soporta la visualizacin de las listas de reproduccin aun. Un playlist puede contener uno o ms videos. Para cada entrada se soportan las siguientes propiedades: File: (requerido, a menos que tengas levels) La ubicacin del archivo. Si esta propiedad no est definida el reproductor ser omitido.

 Image: la ubicacin de la imagen de poster, mostrada antes que el video comiencen despus de que termine, y como parte de la grfica de la lista de reproduccin. Duration: la duracin del video, en segundos. El reproductor usa esta propiedad para mostrar la duracin en la barra de progreso y en la grfica de la lista de reproduccin. Start: punto de comienzo dentro del video. Cuando el usuario utilice esta opcin el video no comenzara en el principio, si no que comenzara en el punto especificado en esta opcin. Title: ttulo del video, se muestra en la grfica de la lista de reproduccin. Description: descripcin del video, se muestra en la grfica de la lista de reproduccin. Streamer: usar aplicaciones de streaming para el video. Esto solo est disponible para streaming RTMP o HTTP. Provider: especifica medio de reproduccin API(por ejemplo http, rtmp o youtube)a usar para la reproduccin de esta entrada en la lista de reproduccin. Levels: un objeto de bloque anidado, con mltiples niveles de calidades de video, para ms informacin ver seccin de levels.

Leveles
El objeto de bloque levels permite que cargues mltiples niveles de calidad dentro del reproductor. Los mltiples niveles son usados por el reproductor Flash para cambiar el bitrate RTMP o HTTP. El cambio de bitrate es un mecanismo donde el reproductor muestra automticamente la mejor calidad posible para cada visualizacin. Aqu tenemos un ejemplo de configuracin, usando el cambio de bitrate RTMP(tambin llamado streaming dinmico). Note la opcin adicional streamer, lo que le dice al reproductor la ubicacin del servidor RTMP.

<div id="container">Loading the player...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf", height: 270, width: 480, image: "/thumbs/video.jpg", levels: [ { bitrate: 300, file: "videos/video_300k.mp4", width: 320 }, { bitrate: 600, file: "videos/video_600k.mp4", width: 480 }, { bitrate: 900, file: "videos/video_900k.mp4", width: 720 } ], provider: "rtmp", streamer: "rtmp://rtmp.example.com/application/" }); </script>

Aqu otro ejemplo de configuracin, esta vez usamos un cambio de bitrate HTTP. El cambio HTTP es activado por la opcin provideroption para HTTP:
<div id="container">Loading the player...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf", height: 270, width: 480, image: "/thumbs/video.jpg", levels: [ { bitrate: 300, file: "http://example.com/videos/video_300k.mp4", width: 320 }, { bitrate: 600, file: "http://example.com/videos/video_600k.mp4", width: 480 }, { bitrate: 900, file: "http://example.com/videos/video_900k.mp4", width: 720 } ], provider: "http", "http.startparam":"starttime" }); </script>

Usando levels en HTML5 Tambin se puede usar el bloque levels en HTML5 para especificar alternativas de formatos de video para dar soporte en varios navegadores. Si el visualizador del navegador no soporta el primer tem en levels, el reproductor intenta reproducir con el segundo tem, y as sucesivamente. Aqu un ejemplo usando levels especificando mltiples codificaciones para el mismo archivo.
<div id="container">Loading the player...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf", height: 270, width: 480, image: "/thumbs/video.jpg", levels: [ { file: "/videos/video.mp4" }, // H.264 version { file: "/videos/video.webm" }, // WebM version { file: "/videos/video.ogv" } // Ogg Theroa version ] }); </script>

Plugins
Los plugins se pueden usar para apilar funcionalidades sobre el JW Player. Una amplia gama de plugins est disponible en nuestra librera, por ejemplo para compartir, analizar o la publicidad. Aqu un ejemplo de configuracin usando HD plugins y Google Analytics Pro plugin:

<div id="container">Loading the player...</div> <script type="text/javascript"> Jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf", file: "/videos/video.mp4", height: 270, plugins: { hd: { file: "/videos/video_high.mp4", fullscreen: true }, gapro: { accountid: "UKsi93X940-24" } }, image: "/thumbs/video.jpg", width: 480 }); </script>

Aqu otro ejemplo, usando sharing plugin. En este ejemplo, los parmetros del plugin tambin son incluidos en el bloque playlist:
<div id="container">Loading the player...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf", playlist: [ { file: "/videos/bunny.mp4", "sharing.link": "http://bigbuckbunny.org" }, { file: "/videos/ed.mp4", "sharing.link": "http://orange.blender.org" } ], plugins: { sharing: { link: true } }, height: 270, width: 720 }); </script>

Events
El bloque events permite responder a eventos del reproductor en JavaScript. Esto es una forma breve, de gran alcance para aadir a la pgina-reproductor interactividad. Aqu un ejemplo rpido:

<div id="container">Loading the player ...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf", file: "/videos/video.mp4", height: 270, width: 480, events: { onComplete: function() { alert("the video is finished!"); } } }); </script>

Aqu tenemos otro ejemplo, con dos formas de manejar el evento. Note que el manejador de onReady() inicia automticamente el reproductor usando la sentencia this y el manejador de onVolume() es procesado como una propiedad event:
<div id="container">Loading the player ...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf", file: "/videos/video.mp4", height: 270, width: 480, events: { onReady: function() { this.play(); }, onVolume: function(event) { alert("the new volume is"+event.volume); } } }); </script>

Mire la API reference para una visin completa de todos los eventos y sus propiedades.

Modes
El bloque de opciones modes puede ser utilizado para personalizar el orden con que JW Player usa las tecnologas de los navegadores para visualizar el reproductor. Por defecto, JW Player usa el este orden: 1. Flash. 2. HTML5 <video> tag. 3. Una link de descarga del archivo original. Usando el bloque modes, es posible especificar que el reproductor intente con HTML5 en primer lugar:
<div id="container">Loading the player ...</div> <script type="text/javascript"> jwplayer("container").setup({ file: "/videos/video.mp4", height: 270, width: 480, modes: [ { type: "html5" }, { type: "flash", src: "/jwplayer/player.swf" }, { type: "download" } ] }); </script>

Configuracin para la especificacin de modo (versin 5.5+) Es posible especificar una configuracin diferente para cada modo. Esta sobrescribe a la configuracin por defecto si el reproductor fue insertado en un modo especfico. Aqu un ejemplo de un stream RTMP con fallback de descarga progresiva para HTML5:
<div id="container">Loading the player ...</div> <script type="text/javascript"> jwplayer("container").setup({ height: 270, width: 480, image: "http://server.com/images/thumbnail.jpg", modes: [ { type: "flash", src: "/jwplayer/player.swf", config: { file: "video.mp4", streamer: "rtmp://rtmp.server.com/videos", provider: "rtmp" } }, { type: "html5", config: { file: "http://server.com/videos/video.mp4" } }, { type: "download" } ] }); </script>

Removedor del reproductor.

Ademas de la creacin del reproductor, JW Player contiene una funcin para desactivar el reproductor. Es muy sencilla: Jwplayer(container).remove();

La funcin remove() hace que el reproductor detenga el flujo de reproduccin, el DOM es restablecido a su estado original y todos los eventos esperados son removidos.