Excerpt |
---|
El player, cuenta con una completa API que permite la manipulacion del mismo mediante javascript desde front end. |
Table of Contents |
---|
¿Como 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>></script>
Tip | ||
---|---|---|
| ||
|
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.
...
¿Como 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 javascriptjavascript window.eplvideo(<div_id>)
se referenciara referenciará a un video instanciado. Siendo <div_id>
el id del div contenedor del video. Por ejemplo:
Tip | ||
---|---|---|
| ||
|
...
¿Que metodos puedo aplicar sobre la referencia a un video instanciado
...
?
getDiv()
Retorna Retorna una referencia al div contenedor del player.
Tip | ||
---|---|---|
|
...
{{ }} |
Ejemplo: <script> var div = eplvideo('un_test').getDiv();</script>
isPaused()
Indica Indica si el video se encuentra pausado mediante una respuesta booleana.
Tip | ||
---|---|---|
| ||
{{ }} |
Ejemplo: <script> console.log(eplvideo('un_test').isPaused()?'video pausado':'video en reproduccion');</script>
...
Pause()
Pausa Pausa el video
Tip | ||
---|---|---|
| ||
{{ }} |
Ejemplo: <script> eplvideo('un_test').pause();</script>
play()
Reproduce Reproduce el video
Tip | ||
---|---|---|
|
...
{{ }} |
Ejemplo: <script> eplvideo('un_test').play();</script>
getDuration()
Retorna Retorna la duracion del video en segundos.
Tip | ||
---|---|---|
| ||
{{ }} |
Ejemplo: <script> console.log(eplvideo('un_test').getDuration());</script>
getCurrentTime()
Retorna Retorna el momento actual de reproduccion del video en segundos.
Tip | ||
---|---|---|
| ||
{{ }} |
Ejemplo: <script>console.log(eplvideo('un_test').getCurrentTime());</script>
setCurrentTime(<time>)
Coloca Coloca el video en el momento de reproduccion <time> expresado en segundos.
Tip | ||
---|---|---|
| ||
{{ }} |
Ejemplo: <script> eplvideo('un_test').setCurrentTime(7);</script>
getRemainingTime()
Retorna Retorna el tiempo restante de reproduccion del video en segundos.
Tip | ||
---|---|---|
|
...
|
Ejemplo:
isEnded()
Indica Indica si el video finalizo su reproduccion mediante una respuesta booleana.
Tip | ||
---|---|---|
|
...
<script>console.log(eplvideo('un_test').isEnded()?'ya termino':'todavia falta');</script> |
Ejemplo:
isFullscreen()
Indica Indica si el video se encuentra en modo 'pantalla completa' mediante una respuesta booleana.
Tip | ||
---|---|---|
|
...
|
Ejemplo:
enterFullscreen()
Coloca Coloca el video en modo 'pantalla completa'
Tip | ||
---|---|---|
|
...
<script> eplvideo('un_test').enterFullscreen();</script> |
Ejemplo:
exitFullscreen()
Quita Quita el video del modo 'pantalla completa'
Tip | |
---|---|
|
...
|
...
|
Ejemplo:
isLoop()
Indica si Indica si el video posee activo el reinicio al finalizar mediante una respuesta booleana
Tip | |
---|---|
|
...
|
...
|
Ejemplo:
setLoop(<bool>)
Activa Activa o desactiva el reinicio automatico al finalizar segun el valor booleano del argumento <bool> pasado.
Tip | ||
---|---|---|
|
...
{{ }} |
Ejemplo: <script> veplvideo('un_test').setLoop(true);</script>
isMuted()
Indica Indica si el video se encuentra muteado mediante una respuesta booleana. Ejemplo: <script> console
Tip | ||
---|---|---|
| ||
<script>console.log(eplvideo('un_test').isMuted()?'en silencio':'con sonido');</script> |
Ejemplo:
setMute(<bool>)
Activa Activa o desactiva el muteo del video segun el valor booleano del argumento <bool> pasado.
Tip | ||
---|---|---|
|
...
<script>eplvideo('un_test').setMute(false);</script> |
Ejemplo:
setWidth(<width>)
Configura Configura el ancho del video en el valor <width> pasado como argumento en pixels. Ejemplo: <script>eplvideo
Tip | ||
---|---|---|
| ||
<script>eplvideo('un_test').setWidth(640);</script> |
Ejemplo:
setHeight(<height>)
Configura Configura el alto del video en el valor <height> pasado como argumento en pixels.
Tip | ||
---|---|---|
|
...
|
Ejemplo:
getWidth()
Retorna Retorna el ancho del video en pixels.
...
Tip |
---|
...
| ||
|
Ejemplo:
getHeight()
Rertorna Rertorna el alto del video en pixels.
...
Tip |
---|
...
| ||
|
Ejemplo:
hide()
Oculta Oculta el video.
...
Tip |
---|
...
| ||
|
Ejemplo:
show()
Muestra Muestra el video.
...
Tip |
---|
...
| ||
|
Ejemplo:
on(<event>, <handler>)
Asocia Asocia la funcion pasada como argumento <handler> para ser llamada ante el evento pasado como argumento <event>.
...
Tip |
---|
...
| ||
|
Ejemplo:
off(<event>)
Elimina Elimina la funcion asociada para ser llamada ente el evento pasado como argumento <event>
...
Tip |
---|
...
| ||
|
...
...
|
Ejemplo:
Instanciacion de nuevos videos
Para instanciar un nuevo video, primero se debe importar la libreria de video, indicando obligatoriamente data-client:
<script async type='text/javascript' src='//hls.e-planning.video/video/js/eplvideo.js' data-client='1992D'></script>
...
showTitle: true,
autoplay: false,
});
...
Eventos
volumechange
Evento lanzado cuando el volumen es modificado.
...
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.
...