Versions Compared

Version Old Version 2 New Version Current
Changes made by

Sebastian Perez

jdigrazia (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Anchor
indice
indice

Excerpt

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

...

Contenido

Table of Contents
excludeContenido

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


Cuando se extrae un tag desde la plataforma de E-Planning videoVideo, 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>


Tip
titleEjemplo

<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 condicion 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 instanciara instanciará dentro del div con id id  'un_test'). Con el metodo javascriptmétodo javascript  window.eplvideo(<div_id>) se referenciara referenciará a un video instanciado. Siendo <div_id> el id del div contenedor del video. Por ejemplo:  

Tip
titleEjemplo

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


Luego, ↑ 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  Retorna una referencia al div contenedor del player.Ejemplo: 

Tip
titleEjemplo

<script> var div =

...

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

...

isPaused()

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

Tip
title

...

Ejemplo

...

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

    ? 'video pausado'

    : 'video en

...

reproducción'

);</script>

 

...

Pause()

Pausa  Pausa el video

Tip
title

...

Ejemplo

...

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

...

play()

Reproduce  Reproduce el video

Tip
titleEjemplo

...

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

...

getDuration()

Retorna  Retorna la duracion duración del video en segundos.

Tip
titleEjemplo

...

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

...

getCurrentTime()

Retorna  Retorna el momento actual de reproduccion reproducción del video en segundos. Ejemplo: <script>console

Tip
titleEjemplo

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

 

setCurrentTime(<time>)

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

Tip
titleEjemplo

...

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

...

getRemainingTime()

Retorna  Retorna el tiempo restante de reproduccion reproducción del video en segundos. Ejemplo:<script>console

Tip
titleEjemplo

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

...

isEnded()

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

Tip
titleEjemplo

...

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

    ? 'ya termino'

    : 'todavia falta'

); </script>

 

isFullscreen()

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

Tip
titleEjemplo

...

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

    ? 'pantalla completa'

    : 'tamaño reducido'

);</script>

...

enterFullscreen()

Coloca  Coloca el video en modo 'pantalla completa' Ejemplo: 

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

 

exitFullscreen()

Quita  Quita el video del modo 'pantalla completa'

Tip
title

...

Ejemplo

...

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

...

isLoop()

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

Tip
titleEjemplo

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

    : 'bucle inactivo'
); </script>

...

setLoop(<bool>)

Activa  Activa o desactiva el reinicio automatico automático al finalizar segun según el valor booleano del argumento <bool> pasado. Ejemplo: <script> v

Tip
titleEjemplo

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

...

isMuted()

Indica  Indica si el video se encuentra muteado mediante una respuesta booleana. Ejemplo: <script> 

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

...

setMute(<bool>)

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

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

...

setWidth(<width>)

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

Tip
titleEjemplo

...

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

...

setHeight(<height>)

Configura  Configura el alto del video en el valor <height> pasado como argumento en pixels. Ejemplo: <script>eplvideo

Tip
titleEjemplo

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

 

getWidth()

Retorna  Retorna el ancho del video en pixels.

Tip
titleEjemplo

...

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

...

getHeight()

Rertorna  Rertorna el alto del video en pixels. Ejemplo: <script> console

Tip
titleEjemplo

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

hide()

Oculta  Oculta el video.

Tip
titleEjemplo

...

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

...

show()

Muestra  Muestra el video.

Tip
titleEjemplo

...

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

...

on(<event>, <handler>)

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

Tip
titleEjemplo

...

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

...

off(<event>)

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

Tip
titleEjemplo

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

...

 

 

 

Instanciacion de nuevos videos

 

script>

skipAds({delayinSeconds: <segs>})

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

Tip
titleEjemplo

<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 libreria librería de video, indicando obligatoriamente data-client:

Tip
titleEjemplo

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

...

script>


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

Tip
titleEjemplo

<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 instanciara instanciará el video, y <config> con un objeto javascript que defina los atributos iniciales del video. Los atributos de <config> a definir 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.

...


Tip
titleEjemplo

...


Code Block
languagexml
<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,

...


	});

...

Eventos

volumechange 

 
</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

Table of Contents
excludeContenido