En este post se da una rápida explicación respecto del uso e integración de los contenidos de Magma (Fluvio) a través de la interface JavaScript.
Ejemplo
A continuación se ejemplifica con un simple código la mínima forma de integrar una transmisión en vivo.
<html>
<head>
...
<script src="https://statics.fluvio.tv/integration/js/pdk.js"></script>
...
</head>
<body>
...
<div id="myElement"></div>
...
<script>
player = LayerPlayer("myElement");
player.setup({
asset: "live-12344",
assetType: 'live',
width: "500px",
height: "400px",
autoplay: "true"
});
</script>
</body>
</html>
Para poder utilizar el player debe incluirse la siguiente linea en el encabezado del archivo HTML:
<script src="https://statics.fluvio.tv/integration/js/pdk.js"></script>
Este código se mantiene constantemente actualizado medida que se incorporan nuevas funciones ala plataforma.
El siguiente paso es configurar el player, para ello primero se crea una instancia del player:
player = LayerPlayer("myElement");
El esta asociado a un contenedor, que en este caso posee el ID ‘myElement’. Una vez instanciado debe inicializarse.
player.setup({
asset: "c7live01-20034",
assetType: 'live',
width: "500px",
height: "400px",
autoplay: "true"
});
Inmediatamente se puede comenzar a utilizar la interfaz, cada llamado a función se encolará hasta el momento en el que el player termine de inicializarse.
En cualquier momento el player puede ser accedido utilizando la función LayerPlayer, usando como parámetro el ID del elemento contenedor. Ejemplo:
LayerPlayer("myElement").seek(0.3);
Multiples player
Los players pueden accederse a través de la función LayersPlayer. Pude utilizarse como parametros:
El ID del elemento contenedor:
LayerPlayer("pip").pause();
LayerPlayer("main").pause();
el indice del player segun el orden de creación:
LayerPlayer(0).pause(); LayerPlayer(1).pause();
Uso
El acceso tanto a los esteos como a los estados se realiza por medio e métodos o funciones. Pueden diferenciarse los siguientes casos:
1 · Acceso a estados
var volume = player.getVolume();
2 · Seteos
player.setVolume(45);
3 · Eventos
player.onVolume(function(event){
...
});
FTP WatchFolder
Una forma conveniente de vincular, los contenidos VOD ingestados a través del FTP WatchFolder es utilizar el PATH dentro de la carpeta.
El parámetro que se envía al método setup, debe contener los siguientes campos:
{
...
asset: {
raId: 0034,
ftpTag: 'uploads/contenidos/video.mp4'
},
assetType: 'vod'
...
}
- assetType: debe fijarse en ‘vod’ para indicar al player que se trata de un contenido bajo demanda.
- asset debe ser un objeto con las siguientes propiedades.
- raId: el numero de cuenta que posee permisos sobre la pieza deseada.
- ftpTag: el path de la pieza dentro de la carpeta remota al momento de ser descargado, debe contener la subcarpeta de búsqueda.
Referencia rápida
En la siguiente tabla se listan los Métodos, propiedades y eventos:
| Tipos | Get | Set | Eventos |
| Setup | – | setup remove |
onReady onSetupError |
| Playlist | getPlaylist getPlaylistIndex getPlaylistItem |
load playlistItem |
onPlaylist onPlaylistItem onPlaylistComplete |
| Buffer | – | – | onBufferChange |
| Playback | getState | play pause stop |
onPlay onPause onBuffer onIdle onComplete onError |
| Seek | getPosition getDuration |
seek | onSeek onTime |
| Volume | getMute getVolume |
setMute setVolume |
onMute onVolume |
| Resize | – | – | onFullscreen onResize |
| Quality | – | – | onQualityLevels onQualityChange |
| Captions | – | – | – |
| Controls | – | – | – |
| Advertising | – | – | – |
| Metadata | – | – | – |