4YouSee permite la exhibición de streaming a través de su player, por ende esta documentación considera que usted ya debe poseer la url que carga el streaming. De no ser así le recomendamos algunos algunos servidores de streaming basados en la nube como Youtube, Twich, Facebook Live, AfreecaTV, Aparatm, Boomstream, Breakers.TV.
En caso usted no quiera emitir un streaming a través de internet sino en una red local, entonces consulte esta documentación, Streaming Local
Pre Requisitos:
- Editor html notepad++ o Sublime Text
Crear un archivo .html5
Cree un archivo usando cualquiera de los dos programas antes mencionados y guardelo con el nombre de index.html. Posterior a esto ingrese la siguiente información en el:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Streaming</title><meta name="viewport" content="width=device-width, initial-scale=1"></head><body>
</body></html>
Entre las tags <head> ... </head> es necesario crear el css para que la página que se está creando sea flexible al momento de ejecutarse en las pantallas con dimensiones diferentes. Así que el siguente código debe ingresarlo dentro de estos tags.
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
body {
-webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
}
.body-class{
background-color: transparent;
}
@meday screen and (min-width: 320px) {
body {
font-size: 38%;
}
}
@meday screen and (max-width: 720px) {
body {
font-size: 70%;
}
}
.container {
position: absolute;
font-family:'Arial';
text-align: left;
color: rgb(0, 0, 0);
width: 100%;
height: 100%;
left: 0%;
top: 0%;
}
.video {
position: absolute;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
left: 0%;
top: 0%;
}
</style>
Se vería así como lo muestra la imagen debajo:
Entre las tags <body> ... </body> y las tags <div id="container"> ... </div> agregue el tag <object id="videoURL" data=""> </object> como lo muestra el siguiente ejemplo:
<div id="container"><object class="video" id="videoURL" data=""></object></div>
En el programa luciría así:
Después del tag </body> se necesita crear el código. En este código vamos a tratar las variables TEMPO y videoURL, la variable TEMPO es utilizada para definir el tiempo de exhibición del video y debe recibir un valor numerico, mientras que la variable videoURL debe recibir la URL del video YouTube en caso que el streaming sea generado en Youtube.
<script type="text/javascript">var element = document.querySelector("#videoURL");var TEMPO = 10;var videoURL = 'https://www.youtube.com/embed/2I4PyX3CC_4';window.loadNews = function() {};if(videoURL){element.setAttribute('data', videoURL+ "?rel=0&autoplay=1&autohide_controls=1");}if(TEMPO){var MILISECONDS = 1000;var NEWS_TIME_IN_SECONDS = TEMPO;var NEWS_TIME = NEWS_TIME_IN_SECONDS * MILISECONDS;setTimeout(function(){ Android.finish();}, NEWS_TIME);}</script>
Al copiar y pegar el código anterior en el index.html, se verá así:
Acceda a 4YouSee Manager en el menú principal Contenido (1) -> Contenido (2), Agregar (3), y en la ventana no diligencie el campo de Duración (4), clique en Seleccionar Arcuivo (5) y escoja el archivo index.html, seleccione la Categoría (6) y finalmente clique en el botón Agregar (7).
Ejemplo a continuación:
Ahora que el streaming hace parte de su bliblioteca de contenidos debe asociarlo a la playlist que tiene el player donde desea mostrar el streaming.