Almacenar reproducciones usando el API de JW Player y Javascript

Se nos pedía que contásemos cada vez que un usuario reprodujese uno de los vídeos disponibles en la página. El problema es que se trataba del reproductor JW Player, un swf, no un elemento del DOM cuyos eventos pudiésemos manipular fácilmente mediante Javascript. En la página web se muestran los vídeos tanto cuando el cliente tiene Javascript activado y cuando no lo tiene. Aunque de momento todavía no queda claro cómo tratar el caso de que no tenga Javascript activado, en condiciones normales estaba claro que la manipulación del evento de carga debía hacerse accediendo al API de JW Player, y así es como lo solucionamos.

Hay que tener en cuenta que cada reproductor JW Player embebido en la página llama a la función playerReady cuando está disponible. A no ser que se cree esa función mediante javascript para aprovechar las funcionalidades del API, no tenemos manera de acceder a ellas. Por lo tanto, lo primero es capturar esa llamada.


function playerReady(obj) {

var player;

//Esta función es llamada por cada uno de los reproductores cuando se cargan.

player = document.getElementById(obj[‘id’]);
player.addControllerListener(“ITEM”,”registraReproduccion”);

};

El proceso es el siguiente: digamos que tenemos tres reproductores en una página. El primero se carga, llama a playerReady y disponemos del parámetro obj, cuyo id es el elemento en el DOM. Guardamos el elemento en la variable player y le añadimos un “listener” para que cuando se produzca el evento que especificamos se llame a la función que queramos para controlar qué se debe hacer en ese caso. Al principio supuse que el evento era PLAY; el evento PLAY genera una variable llamada status que es true cuando está reproduciendo el vídeo y false cuando está pausándolo. Sin embargo, el evento PLAY no se llama cuando se pulsa por primera vez el vídeo y está cargándolo a la vez que lo reproduce. Como sólo necesitábamos almacenar la primera reproducción, estaba claro que ese evento no servía. Al parecer, el evento correcto es  ITEM, llamado cuando se carga el objeto por primera vez, cuando visualmente está llenando la barra de reproducción y calcula el tiempo total del vídeo. Añadí un “listener” a ese evento y la función que ejecutaría sería “registraReproducción”. La función es la siguiente:

function registraReproduccion(obj) {

var player = document.getElementById(obj.id);
var playlist = player.getPlaylist();
var nombre_archivo = playlist[0][‘file’];

//nombre_archivo contiene ahora el nombre del archivo cuya reproducción hay que registrar.

$.ajax({

contentType: ‘application/x-www-form-urlencoded’,
type: “GET”,
url: “cuenta_reproduccion.asp”,
data: “archivo=” + nombre_archivo

});

};

El evento ITEM pasa el parámetro obj, que contiene datos del reproductor que ha disparado el evento. Por fortuna, “obj.id” contiene el id del reproductor específico que podremos aislar del DOM, lo que nos salva la vida cuando el id se genera dinámicamente. En este caso se nos pedía guardar qué archivo se había reproducido, lo que requiere llamar a la función “getPlaylist”. La función devuelve un array escalar, y cada elemento de ese array contiene otro array escalar con diferentes variables. La que nos interesa es “file”, que guarda el nombre del archivo sin la ruta.

Tras coger todos los datos que necesitábamos, basta llamar de manera asíncrona al servidor mediante AJAX. Siempre tenemos jQuery preparado, de ahí la llamada simple “$.ajax” , pero en caso contrario habría que preparar la llamada de la manera tediosa. Como datos le pasamos “archivo=NOMBRE_FICHERO”, que el script “cuenta_reproduccion.asp” podrá recuperar sin problemas al pasarse como parámetro en la URL. No añado el contenido del script ASP, ya que se limita a controlar si el nombre del fichero que se pasa no está vacío y en ese caso guarda el nombre del archivo, el id de la sesión y la hora actual en la base de datos.

5 comentarios to “Almacenar reproducciones usando el API de JW Player y Javascript”

  1. gravatareng Says:

    Esto puede ser implementado en wordpress?, existe la manera de hacerlo por usuario? se que el tema es viejo pero si alguien tiene idea de como echarlo a andar, agradeceria mucho la ayuda.

  2. Jwplayer | TagHall Says:

    […] "400", embeddedWidth: "425", themeCSS: "" }); . JW Player for Flash 5.1 « . Almacenar reproducciones usando el API de JW Player y Javascript … . JW Player for Flash […]

  3. Chema Says:

    De maravilla, me funcionó a la primera.
    Es ideal para contar reproducciones.
    Mil gracias.

  4. joeloverbeck Says:

    Por necesidades de trabajo, no he mirado más allá del reproductor JW Player, pero asumo que se podrá interactuar con APIs de reproductores flash parecidos de manera similar. Todavía estamos intentando implementar lo mismo sin javascript por asuntos de accesibilidad.

  5. incendialaciudad Says:

    Muy interesante


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: