/
API Javascript

API Javascript

Owned by Sebastian Perez (Unlicensed)
Last updated: Dec 09, 2024 by Sebastian Perez

El player, cuenta con una completa API que permite la manipulacion del mismo mediante javascript desde front end

Contenido

¿Cómo se interpreta un tag javascript de E-Planning Video?


Cuando se extrae un tag desde la plataforma de E-Planning Video, este posee el siguiente formato:

<script async type='text/javascript' src=<ruta a la libreria> data-video=<identificador del video> data-client=<Identificador del cliente> data-player=<Identificador del player> data-div=<identificador del div contenedor>  data-skipoffset=<segundos> ></script>

Ejemplo

<script async type='text/javascript' src='//hls.e-planning.video/video/js/eplvideo.js' data-video='adfeaf5b75be7e0a' data-client='1992D' data-player='VP_IDENTIFICADOR' data-div='un_test' data-skipoffset=10></script>


donde:

  • src (en rojo) indica la ruta de la libreria de video.
  • data-video (en azul) indica el identificador unico del video a reproducir.
  • data-client (en verde) indica el id de cliente de E-Planning.
  • data-player (en naranja) indica el identificador unico del player a utilizar.
  • data-div (en rosa) indica el div donde el video sera incorporado.
  • data-skipoffset (en violeta) indica el tiempo en segundos luego del cual se permitira saltar los anuncios publicitarios.


↑ Regresar a la tabla de contenido ↑

 ¿Cómo puedo manipular los videos mediante la API Javascript?


Para manipular un video, es condición necesaria que el mismo se encuentre instanciado en un div con id (En el tag de ejemplo mencionado mas arriba, el player se instanciará dentro del div con id  'un_test'). Con el método javascript  window.eplvideo(<div_id>) se referenciará a un video instanciado. Siendo <div_id> el id del div contenedor del video.

Ejemplo

<script> var instancia = eplvideo('un_test');</script>


↑ Regresar a la tabla de contenido ↑

¿Qué métodos puedo aplicar sobre la referencia a un video instanciado?

Existe una amplia gama de métodos aplicables a un video instanciado.  A continuación,  describiremos cada uno de ellos:

getDiv()

 Retorna una referencia al div contenedor del player.

Ejemplo

<script> var div = eplvideo('un_test').getDiv(); </script>

isPaused()

 Indica si el video se encuentra pausado mediante una respuesta booleana.

Ejemplo

<script> console.log(eplvideo('un_test').isPaused()

    ? 'video pausado'

    : 'video en reproducción'

);</script>

Pause()

 Pausa el video

Ejemplo

<script> eplvideo('un_test').pause(); </script>

play()

 Reproduce el video

Ejemplo

<script> eplvideo('un_test').play(); </script>

getDuration()

 Retorna la duración del video en segundos.

Ejemplo

<script> console.log(eplvideo('un_test').getDuration()); </script>

getCurrentTime()

 Retorna el momento actual de reproducción del video en segundos.

Ejemplo

<script> console.log(eplvideo('un_test').getCurrentTime()); </script>

setCurrentTime(<time>)

 Coloca el video en el momento de reproducción <time> expresado en segundos.

Ejemplo

<script> eplvideo('un_test').setCurrentTime(7); </script>

getRemainingTime()

 Retorna el tiempo restante de reproducción del video en segundos.

Ejemplo

<script> console.log(eplvideo('un_test').getRemainingTime()); </script>

isEnded()

 Indica si el video finalizo su reproducción mediante una respuesta booleana.

Ejemplo

<script> console.log(eplvideo('un_test').isEnded()

    ? 'ya termino'

    : 'todavia falta'

); </script>

isFullscreen()

 Indica si el video se encuentra en modo 'pantalla completa' mediante una respuesta booleana.

Ejemplo

<script> console.log(eplvideo('un_test').isFullscreen()

    ? 'pantalla completa'

    : 'tamaño reducido'

);</script>

enterFullscreen()

 Coloca el video en modo 'pantalla completa'

Ejemplo

<script> eplvideo('un_test').enterFullscreen(); </script>

exitFullscreen()

 Quita el video del modo 'pantalla completa'

Ejemplo

<script> eplvideo('un_test').enterFullscreen(); </script>

isLoop()

 Indica  si el video posee activo el reinicio al finalizar mediante una respuesta booleana

Ejemplo

<script> console.log(eplvideo('un_test').isLoop()
    ? 'bucle activo'

    : 'bucle inactivo'
); </script>

setLoop(<bool>)

 Activa o desactiva el reinicio automático al finalizar según el valor booleano del argumento <bool> pasado.

Ejemplo

<script> eplvideo('un_test').setLoop(true); </script>

isMuted()

 Indica si el video se encuentra muteado mediante una respuesta booleana.

Ejemplo

<script> console.log(eplvideo('un_test').isMuted()
    ? 'en silencio'
    : 'con sonido'
); </script>

setMute(<bool>)

 Activa o desactiva el muteo del video según el valor booleano del argumento <bool> pasado.

Ejemplo

<script> eplvideo('un_test').setMute(false); </script>

setWidth(<width>)

 Configura el ancho del video en el valor <width> pasado como argumento en pixels.

Ejemplo

<script> eplvideo('un_test').setWidth(640); </script>

setHeight(<height>)

 Configura el alto del video en el valor <height> pasado como argumento en pixels.

Ejemplo

<script> eplvideo('un_test').setHeight(480); </script>

getWidth()

 Retorna el ancho del video en pixels.

Ejemplo

<script> console.log(eplvideo('un_test').getWidth()); </script>

getHeight()

 Rertorna el alto del video en pixels.

Ejemplo

<script >console.log(eplvideo('un_test').getHeight()); </script>

hide()

 Oculta el video.

Ejemplo

<script> eplvideo('un_test').hide(); </script>

show()

 Muestra el video.

Ejemplo

<script> eplvideo('un_test').show(); </script>

on(<event>, <handler>)

 Asocia la función pasada como argumento <handler> para ser llamada ante el evento pasado como argumento <event>.

Ejemplo

<script> eplvideo('un_test').on('ready', function(){
    console.log('el video esta listo');
}); </script>

off(<event>)

 Elimina la funcion asociada para ser llamada ente el evento pasado como argumento <event>

Ejemplo

<script> eplvideo('un_test').off('ready'); </script>

skipAds({delayinSeconds: <segs>})

Permite definir mediante el argumento <segs> el tiempo en segundos luego del cual se permitira saltar los anuncios publicitarios.

Ejemplo

<script> eplvideo('un_test').skipAds({delayinSeconds: 10}); </script>


↑ Regresar a la tabla de contenido ↑

¿Cómo puedo instanciar nuevos videos?

Para instanciar un nuevo video, primero se debe importar la librería de video, indicando obligatoriamente data-client

Ejemplo

<script async type='text/javascript' src='//hls.e-planning.video/video/js/eplvideo.js' data-client='1992D'></script>


Es condición necesaria antes de la instanciación ademas, que exista un div con id donde incorporar el nuevo video

Ejemplo

<div id='un_ejemplo'></div>

 

Luego, el video se puede instanciar mediante el constructor


eplVideo(<div_id>).setup(<config>)


donde  <div_id> debe corresponderse con el id del div donde se instanciará el video, y <config> con un objeto javascript que defina los atributos iniciales del video. Estos atributos son:


  • player : identificador del player
  • video: identificador del video
  • responsive: booleano que indica si el video es responsivo.
  • loop: booleano que indica si el reinicio del video tras su finalización esta activado.
  • showTitle: booleano que indica si el titulo del video estará visible
  • autoplay: booleano que indica si el video posee la reproducción automática activa.


Ejemplo

<script type='text/javascript' src='//hls.e-planning.video/video/js/eplvideo.js' data-client='1992D'></script>
<div id='un_ejemplo'></div>
<script>
	eplVideo('un_test').setup({
		player:		'VP_IDENTIFICADOR',
		video:		'adfeaf5b75be7e0a',
		responsive:	true,
		loop:		false,
		showTitle:	true,
		autoplay:	false,
	}); 
</script>


↑ Regresar a la tabla de contenido ↑

¿Qué eventos dispara una instancia del  video?

Una instancia de video posee múltiples eventos que pueden ser disparados en diferentes circunstancias. A continuación describiremos cada uno de ellos.

  • volumechange: Evento lanzado cuando el volumen es modificado.
  • seeked: Evento lanzado cuando se produce un salto en el tiempo actual de reproduccion.
  • ready: Evento lanzado cuando el player esta listo.
  • play: Evento lanzado cuando se inicia o reanuda la reproduccion de un video.
  • pause: Evento lanzado cuando se pausa la reproduccion de un video.
  • fullscreenchange: Evento lanzado cuando el estado 'pantalla completa' se activa o desactiva.
  • ended: Evento lanzado cuando el video finaliza.


↑ Regresar a la tabla de contenido ↑


Contenido

Related content