Funciones de Control y Eventos Javascript del Reproductor de Vídeo | Personalización Avanzada | Documentación WS.WebTV | WebTV Solutions

Imprimir

A continuación encontrará la lista de funciones Javascript soportadas por los reproductores de vídeo de WS.WebTV (Flash y HTML5).

Funciones de Control

Las funciones de control son aquellas que realizan acciones en el reproductor de vídeo.

wsvp_play()

Reproduce/reanuda la reproducción del Clip actual.

wsvp_pause(disable_ui_play_resume)

Detiene la reproducción del Clip actual.

Parámetros:
• disable_ui_play_resume (boolean): [OPCIONAL, disponible desde v56pf3] - Valor por defecto: false - Si es true, sólo es posible reanudar la reproducción a través de la función wsvp_play().

wsvp_seek(t)

Avanza el punto de reproducción del Clip actual hasta el tiempo especificado (cuando sea posible).

Parámetros:
• t (string): Tiempo hacia donde se desea avanzar, especificado con el formato "h:m:s", donde h es hora (integer), m es minutos (integer) y s es segundos (decimal).

Ejemplo:
wsvp_seek("0:0:120"); // Avanza al segundo 120
wsvp_seek("0:10:3.5"); // Avanza al minuto 10, segundo 3.5

wsvp_skipFwd()

Avanza (salta) al siguiente Clip de una lista de reproducción.

wsvp_skipBwd()

Retrocede (salta) al Clip anterior de una lista de reproducción (si el tiempo de reproducción es <= 2; de lo contrario, el Clip actual comenzará a reproducir desde el principio).

wsvp_resize(width,height)

Reescala el reproductor de vídeo.

Parámetros:
• width (integer): El ancho, en pixels.
• height (integer): El alto, en pixels.

Ejemplo:
wsvp_resize(640,480); // Reescalará el reproductor a 640px por 480px

wsvp_playClip(id_clip,play_in_current_playlist,id_as_number)

Reproduce un Clip de acuerdo al ID o número del Clip en una lista de reproducción (Canal).

Parámetros:
• id_clip (integer): El ID o número del Clip en la lista de reproducción actual (Canal). En este último caso, el parámetro id_as_num debe ser true.
• id_as_number (boolean): Ops: true/false. Si el id_clip el el ID del Clip ID entonces utilizar false, de lo contrario (si corresponde al número del Clip en la lista de reproducción) utilice true.
• play_in_current_playlist (string): Ops: "yes"|"no". Si se utiliza "yes" el reproductor intentará reproducir el Clip en la lista de reproducción actual. Para que esto funcione, el Clip debe existir en la lista de reproducción; si el Clip que piensa reproducir no existe en la lista de reproducción utilice "no".

Ejemplos:
wsvp_playClip(2,"yes",false); // Reproducirá el Clip con ID 2 en la lista de reproducción actual.
wsvp_playClip(2,"yes",true); // Reproducirá el Clip número 2 de la lista de reproducción actual.
wsvp_playClip(2,"no",false); // Reproducirá el Clip con ID 2 recargando el reproductor de vídeo (se perderá la lista de reproducción actual).

wsvp_switchQuality(id_calidad)

Disponible desde WS.WebTV 2.2.0.3
Selecciona una calidad de vídeo (es el equivalente a seleccionar una calidad desde el botón con el icono de "engranaje", en el reproductor de vídeo).

Parámetros:
• id_calidad (int): ID de la calidad. Si la calidad no está disponible (o es inválida), se mantendrá la actual. NOTA: Las calidades de la WebTV se definen en Configuración > Vídeo.

Ejemplo:
wsvp_switchQuality(1); // cambiar a la calidad 1 (y reproducirla)
wsvp_switchQuality(2); // cambiar a la calidad 2 (y reproducirla)

wsvp_getCurrentQuality()

Disponible desde WS.WebTV 2.2.0.3
Devuelve el ID (int) de la calidad de vídeo actualmente seleccionada.

wsvp_getVideoElementID()

Disponible desde WS.WebTV 56pf3
Devuelve el ID del elemento <video> del reproductor.

wsvp_getUIWrapperElementID()

Disponible desde WS.WebTV 56pf3
Devuelve el ID del elemento contenedor del UI.

wsvp_getUIElementID()

Disponible desde WS.WebTV 56pf3
Devuelve el ID del elemento de UI.

wsvp_getPlaylist()

Disponible desde WS.WebTV 56pf3
Devuelve la lista de reproducción (excluyendo ciertas propiedades como los medios asociados).

Eventos (disponible desde v56pf3)

El Reproductor de Vídeo de la WebTV genera varios eventos Javascript que puede capturar.
NOTA: Desde v60, es posible "escuchar" estos eventos generados desde un Embed, mediante postMessages.

Eventos globales, generados en el elemento <body>

Debe capturar estos eventos en el elemento <body>.

_videoplayerloaded

Este evento se genera cuando el reproductor de vídeo está listo para generar otros eventos y ejecutar funciones.

Propiedades de los datos del Evento:
     - videoPlayerElementID (string): El ID del elemento del reproductor de vídeo (deberá utilizar este ID para capturar los demás eventos generados por el reproductor).

Ejemplo:
$("body").on("_videoplayerloaded",function(evt,evtData){
    console.log("[Reproductor de Vídeo Cargado!]",evtData);
    var videoPlayerElementID = evtData.videoPlayerElementID;
    // controladores para capturar eventos del elemento del reproductor a partir de aquí...
  });

Eventos generados en el elemento del reproductor de vídeo (videoPlayerElementID)

Añada los controladores para estos eventos solamente después de capturar el evento global _videoplayerloaded.

_loadedclipdata

Este evento es generado cuando se carga la información del Clip..

Propiedades de los datos del Evento:
     - date (string): Fecha del Clip, con formato.
     - description (string): Descripción del Clip.
     - dislikes (integer): Número de "no me gusta" para el Clip.
     - duration (string): Duración del Clip, con formato.
     - id (integer): ID del Clip.
     - is_ad (integer): Si el Clip es un Anuncio o no. Valores posibles: 1|0
     - likes (integer): Número de "me gusta" para el Clip.
     - on_sale (integer): Si el Clip está en venta o no. Valores posibles: 1|0
     - playlist_index (integer): El índice del Clip en la lista de reproducción actual.
     - product_url (string): Si el Clip está en venta, esta es la URL de los productos correspondientes.
     - socialize (integer): Si el Clip debe mostrar las opciones de compartir o no. Valores posibles: 1|0
     - title (string): Título del Clip.
     - trailer (integer): Si el Clip está en venta, esto especifica si se está reproduciendo un trailer (una muestra) o no.
     Valores posibles: 1|0
     - url (string): URL del Clip.
     - user (string): Alias del Usuario (Autor del Clip).
     - user_href (string): URL del Usuario (Autor del Clip).
     - user_id (integer): ID del Usuario (Autor del Clip).
     - views (string): Estadísticas / Número con formato, con el total de visionados para el Clip.

Ejemplo:
$("body").on("_videoplayerloaded",function(evt,evtData){
    console.log("[Reproductor de Vídeo Cargado!]",evtData);
    var videoPlayerElementID = evtData.videoPlayerElementID;
    // controladores para capturar eventos del elemento del reproductor a partir de aquí...
    $("#"+videoPlayerElementID).on("_loadedclipdata",function(evt,evtData){ console.log("[Reproductor de Vídeo: Datos del Clip Cargados]",evtData); });
  });

_playerstatechange

Este evento es generado cuando el reproductor de vídeo cambia su estado.

Propiedades de los datos del Evento:
     - status (string): Valores posibles: paused, playing, ended, buffering

Ejemplo:
$("body").on("_videoplayerloaded",function(evt,evtData){
    console.log("[Reproductor de Vídeo Cargado!]",evtData);
    var videoPlayerElementID = evtData.videoPlayerElementID;
    // controladores para capturar eventos del elemento del reproductor a partir de aquí...
    $("#"+videoPlayerElementID).on("_playerstatechange",function(evt,evtData){ console.log("[Reproductor de Vídeo: Cambio de Estado]",evtData.status); });
  });

_playererror

Este evento es generado cuando ocurre un error reproduciendo un vídeo.

Propiedades de los datos del Evento:
     - error (string): El mensaje de error...

Ejemplo:
$("body").on("_videoplayerloaded",function(evt,evtData){
    console.log("[Reproductor de Vídeo Cargado!]",evtData);
    var videoPlayerElementID = evtData.videoPlayerElementID;
    // controladores para capturar eventos del elemento del reproductor a partir de aquí...
    $("#"+videoPlayerElementID).on("_playererror",function(evt,evtData){ console.log("[Reproductor de Vídeo: Error]",evtData.error); });
  });

_fullscreenchange

Este evento es generado cuando se hace click en el botón pantalla completa, y devuelve el modo conmutado.

Propiedades de los datos del Evento:
     - mode (string): Valores posibles: fs_real (el modo pantalla completa real se ha activado), fs_sim (el modo pantalla completa real no está soportado. Se simula el modo pantalla completa reescalando el reproductor de vídeo para llenar el la ventana del Navegador Web), normal (modo normal).

Ejemplo:
$("body").on("_videoplayerloaded",function(evt,evtData){
    console.log("[Reproductor de Vídeo Cargado!]",evtData);
    var videoPlayerElementID = evtData.videoPlayerElementID;
    // controladores para capturar eventos del elemento del reproductor a partir de aquí...
    $("#"+videoPlayerElementID).on("_fullscreenchange",function(evt,evtData){ console.log("[Reproductor de Vídeo: Modo de pantalla conmutado]",evtData.mode); });
  });

_timechange

Este evento es generado cuando el tiempo de reproducción del vídeo cambia (durante la reproducción).

Propiedades de los datos del Evento:
     - time (number): Tiempo de reproducción actual, en segundos.

Ejemplo:
$("body").on("_videoplayerloaded",function(evt,evtData){
    console.log("[Reproductor de Vídeo Cargado!]",evtData);
    var videoPlayerElementID = evtData.videoPlayerElementID;
    // controladores para capturar eventos del elemento del reproductor a partir de aquí...
    $("#"+videoPlayerElementID).on("_timechange",function(evt,evtData){ console.log("[Reproductor de Vídeo: Tiempo de reproducción actual]",evtData.time); });
  });

_durationchange

Este evento es generado cuando la duración del vídeo cambia.

Propiedades de los datos del Evento:
     - time (number): Duración del vídeo, en segundos.

Ejemplo:
$("body").on("_videoplayerloaded",function(evt,evtData){
    console.log("[Reproductor de Vídeo Cargado!]",evtData);
    var videoPlayerElementID = evtData.videoPlayerElementID;
    // controladores para capturar eventos del elemento del reproductor a partir de aquí...
    $("#"+videoPlayerElementID).on("_durationchange",function(evt,evtData){ console.log("[Reproductor de Vídeo: Duración del vídeo]",evtData.time); });
  });

_statsrec

Este evento es generado cada vez que el reproductor envía estadísticas. Es útil para implementar systemas de registro de estadísticas de vídeo personalizados.

Propiedades de los datos del Evento:
     - type (string): Tipo de estadística.
Valores posibles: clip_views_play, ad_views_play, clip_views_play_complete, ad_views_play_complete, channel_views_embed, interactivity_views, interactivity_clicks, ad_clicks, user_stats. Vale la pena destacar que "user_stats" se envía cada pocos segundos y después de ciertas acciones (como avanzar o saltar).
     - id (integer): El ID del Clip o Interactividad... En el caso de "channel_views_embed", será el ID del Canal.
     - title (string): El título del Clip o el contenido de la Interactividad.
     - id_user (integer): El ID del usuario actual (0 si el visitante no tiene la sesión iniciada).
     - id_channel (integer): El ID del Canal actual (0 si no se está reproduciendo dentro de un Canal).
    Las siguientes propiedades adicionales se suministrarán con los siguientes tipos de estadística: clip_views_play_complete, ad_views_play_complete and user_stats.
     - duration (integer): La duración del Clip.
     - last_viewed_second (integer): El último segundo visionado.
     - current_viewing_time (integer): Incremental* - El tiempo actual de visionado desde el último envío.
     - heatmap (string): Incremental* - El mapa de calor de visionado desde el último envío. El mapa de calor es una cadena de texto que consiste en 0 y 1. La longitud de la cadena (string) es normalmente coincide con la longitud del vídeo, en segundos; por ejemplo, si la duración es 53s, la cadena de texto tendría 53 o menos caracteres. 1 quiere decir que el segundo correspondiente ha sido visionado y 0 que no ha sido.
Ejemplo de heatmap para un Clip de 10 segundos: "1111000000". Interpretación: Sólo los 4 primeros segundos han sido visionados.
     *Los valores incrementales son estadísticas de usuario que se "resetean" cada vez que se envían las estadísticas. Por lo tanto, ellos deben ser sumados a los valores anteriormente enviados.

Ejemplo:
$("body").on("_videoplayerloaded",function(evt,evtData){
    console.log("[Reproductor de Vídeo Cargado!]",evtData);
    var videoPlayerElementID = evtData.videoPlayerElementID;
    // controladores para capturar eventos del elemento del reproductor a partir de aquí...
    $("#"+videoPlayerElementID).on("_statsrec",function(evt,evtData){ console.log("[Reproductor de Vídeo: Registro de estadísticas]",evtData); });
  });

_uiresizerequired

Este evento es generado cuando se requiere reescalar la interfaz -UI- (útil para saber cuando es necesario reescalar/ajustar elementos personalizados que se hayan podido agregar/superponer dentro del reproductor de vídeo).

Propiedades de los datos del Evento:
     - width (integer): Ancho del reproductor de vídeo.
     - height (integer): Alto del reproductor de vídeo.

Ejemplo:
$("body").on("_videoplayerloaded",function(evt,evtData){
    console.log("[Reproductor de Vídeo Cargado!]",evtData);
    var videoPlayerElementID = evtData.videoPlayerElementID;
    // controladores para capturar eventos del elemento del reproductor a partir de aquí...
    $("#"+videoPlayerElementID).on("_uiresizerequired",function(evt,evtData){ console.log("[Reproductor de Vídeo: Ajuste de UI Requerido]",evtData); });
  });

Escuchando/capturando eventos generados desde Embeds, mediante postMessages (desde v60)

Los eventos globales y del elemento del reproductor también son generados desde los reproductores incrustados. El siguiente código de ejemplo de Javascript permite escuchar/capturar eventos lanzados desde un reproductor de vídeo incrustado:
// Código Javascript para la página contenedora
window.addEventListener('message', function(message)
{
   if ( typeof(message.data)!=="undefined" && typeof(message.data.from)!=="undefined" && message.data.from.indexOf("vpembed")>=0 )
   {
     console.log("Evento de reproducor incrustado",message.data);
     /*
       message.data será un objeto con las siguintes propiedades:
       {
       from: "vpembed_<CT>_<CID>", // <CT> = tipo de contenido ("clip" | "channel") y <CID> = ID de contenido (ID de Clip o Canal)<br>
       event: "_videoplayereventname", // el nombre del evento del reproductor de vídeo (revisar la documentación sobre funciones y eventos del reproductor para conocer todos los posibles eventos)<br>
       eventData: {} // el objeto de datos enviado por el evento
       }
     */
   }
});

Funciones de Eventos (Callbacks) - Obsoleto (previo a v56pf3)

Estas funciones son llamadas desde el reproductor de vídeo, cuando ocurren ciertos eventos. Tenga presente que, para que el reproductor realice las llamadas, las funciones deben estar definidas en Javascript..

wsvp_onPlayerStateChange(data)

Esta función es llamada cuando el reproductor de vídeo cambia su estado.

Parámetros:
• data (object): El objecto devuelto por el reproductor de vídeo, con la información.
     Propiedades del objeto:
     - status (string): Valores posibles: paused, playing, ended, buffering

Ejemplo:
function wsvp_onPlayerStateChange(data)
{
   // Mostrar el estado en la consola del Navegador Web
   console.log("Cambio de estado en el reproductor: "+data.status);
}

wsvp_onTimeChange(data)

Esta función es llamada cuando el tiempo de reproducción del vídeo cambia (durante la reproducción).

Parámetros:
• data (object): El objecto devuelto por el reproductor de vídeo, con la información.
     Propiedades del objeto:
     - time (number): Tiempo de reproducción actual, en segundos.

Ejemplo:
function wsvp_onTimeChange(data)
{
   // Mostrar el tiempo de reproducción del vídeo en la consola del Navegador Web
   console.log("Tiempo de reproducción actual: "+data.time+" segundos);
}

wsvp_onDurationChange(data)

Esta función es llamada cuando la duración del vídeo cambia.

Parámetros:
• data (object): El objecto devuelto por el reproductor de vídeo, con la información.
     Propiedades del objeto:
     - time (number): Duración del vídeo, en segundos.

Ejemplo:
function wsvp_onDurationChange(data)
{
   // Mostrar la duración del vídeo en la consola del Navegador Web
   console.log("Duración del vídeo: "+data.time+" segundos");
}

wsvp_onFullScreenChange(data)

[Desde WS.WebTV 1.8 postfixes v1] Esta función es llamada cuando se hace click en el botón pantalla completa, y devuelve el modo conmutado.

Parameters:
• data (object): El objecto devuelto por el reproductor de vídeo, con la información.
     Propiedades del objeto:
     - mode (string): Valores posibles: fs_real (el modo pantalla completa real se ha activado), fs_sim (el modo pantalla completa real no está soportado. Se simula el modo pantalla completa reescalando el reproductor de vídeo para llenar el la ventana del Navegador Web), normal (modo normal)

Ejemplo:
function wsvp_onFullScreenChange(data)
{
   // Mostrar el modo de pantalla conmutado
   console.log("Modo de pantalla conmutado : "+data.mode);
}

wsvp_onLoadedClipData(data)

Esta función es llamada cuando se carga la información del Clip.

Parámetros:
• data (object): El objecto devuelto por el reproductor de vídeo, con la información.
     Propiedades del objeto:
     - date (string): Fecha del Clip, con formato.
     - description (string): Descripción del Clip.
     - dislikes (integer): Número de "no me gusta" para el Clip.
     - duration (string): Duración del Clip, con formato.
     - id (integer): ID del Clip.
     - is_ad (integer): Si el Clip es un Anuncio o no. Valores posibles: 1|0
     - likes (integer): Número de "me gusta" para el Clip.
     - on_sale (integer): Si el Clip está en venta o no. Valores posibles: 1|0
     - product_url (string): Si el Clip está en venta, esta es la URL de los productos correspondientes.
     - socialize (integer): Si el Clip debe mostrar las opciones de compartir o no. Valores posibles: 1|0
     - title (string): Título del Clip.
     - trailer (integer): Si el Clip está en venta, esto especifica si se está reproduciendo un trailer (una muestra) o no.
     Valores posibles: 1|0
     - url (string): URL del Clip.
     - user (string): Alias del Usuario (Autor del Clip).
     - user_href (string): URL del Usuario (Autor del Clip).
     - user_id (integer): ID del Usuario (Autor del Clip).
     - views (string): Estadísticas / Número con formato, con el total de visionados para el Clip.

Ejemplo:
function wsvp_onLoadedClipData(data)
{
   // Mostrar el título del Clip en la consola del Navegador Web
   console.log("Título del Clip: "+data.title);

   // Mostrar el objeto de datos completo, del Clip, en la consola del Navegador Web
   console.log("Datos del Clip:");
   console.log(data);
}

wsvp_onPlayerError(data)

Disponible desde WS.WebTV 2.2.0.2
Esta función es llamada cuando ocurre un error reproduciendo un vídeo.

Parámetros:
• data (object): El objecto devuelto por el reproductor de vídeo, con la información.
     Propiedades del objeto:
     - error (string): El mensaje de error...

Ejemplo:
function wsvp_onPlayerError(data)
{
   // Mostrar el error en la consola del Navegador Web
   console.log("Error reproduciendo el vídeo: "+data.error);
}

wsvp_statsRec(data)

Disponible desde WS.WebTV 53pf7
Esta función es llamada cada vez que el reproductor envía estadísticas. Es útil para implementar systemas de registro de estadísticas de vídeo personalizados.

Parámetros:
• data (object): El objecto devuelto por el reproductor de vídeo, con la información.
     Propiedades del objeto:
     - type (string): Tipo de estadística.
Valores posibles: clip_views_play, ad_views_play, clip_views_play_complete, ad_views_play_complete, channel_views_embed, interactivity_views, interactivity_clicks, ad_clicks, user_stats. Vale la pena destacar que "user_stats" se envía cada pocos segundos y después de ciertas acciones (como avanzar o saltar).
     - id (integer): El ID del Clip o Interactividad... En el caso de "channel_views_embed", será el ID del Canal.
     - title (string): El título del Clip o el contenido de la Interactividad.
     - id_user (integer): El ID del usuario actual (0 si el visitante no tiene la sesión iniciada).
     - id_channel (integer): El ID del Canal actual (0 si no se está reproduciendo dentro de un Canal).
    Las siguientes propiedades adicionales se suministrarán con los siguientes tipos de estadística: clip_views_play_complete, ad_views_play_complete and user_stats.
     - duration (integer): La duración del Clip.
     - last_viewed_second (integer): El último segundo visionado.
     - current_viewing_time (integer): Incremental* - El tiempo actual de visionado desde el último envío.
     - heatmap (string): Incremental* - El mapa de calor de visionado desde el último envío. El mapa de calor es una cadena de texto que consiste en 0 y 1. La longitud de la cadena (string) es normalmente coincide con la longitud del vídeo, en segundos; por ejemplo, si la duración es 53s, la cadena de texto tendría 53 o menos caracteres. 1 quiere decir que el segundo correspondiente ha sido visionado y 0 que no ha sido.
Ejemplo de heatmap para un Clip de 10 segundos: "1111000000". Interpretación: Sólo los 4 primeros segundos han sido visionados.
     *Los valores incrementales son estadísticas de usuario que se "resetean" cada vez que se envían las estadísticas. Por lo tanto, ellos deben ser sumados a los valores anteriormente enviados.

Ejemplo:
function wsvp_statsRec(data)
{
   // Mostrar el tipo de estadística en la consola del Navegador Web
   console.log("Stat type: "+data.type);

   // Mostrar el objeto de datos completo, en la consola del Navegador Web
   console.log("Stats data:");
   console.log(data);
}