Streaming

Last updated Thu, 7 Apr, 2022 at 7:19 PM

4YouSee allows the display of streaming through its player, therefore this documentation considers that you must already have the url that loads the streaming. If not, we recommend some cloud-based streaming servers such as Youtube, Twich, Facebook Live, AfreecaTV, Aparatm, Boomstream, Breakers.TV.

Streaming is a type of project where you want to show a streaming player that must be able to be obtained through a URL.

Pre requirements:

Editor HTML notepad++ or Sublime Text

Create a file .html5

Create a file using either of the above two programs and save it with the name of index.html. After this, enter the following information in the:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>VIDEO YouTube</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
    </body>
</html>

Among the <head> ... </head> tags, it is necessary to create the css so that the page being created is flexible when it runs on screens with different dimensions. So the following code must enter it inside these 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>

It would look like the image below shows:

Between the <body> ... </body> tags and the <div id = "container"> ... </div> tags add the <object id = "videoURL" data = ""> </object> tag as the following example shows:

<div id="container">
    <object class="video" id="videoURL" data=""></object>
</div>

The file would look like this:

After the </body> tag you need to create the code. In this code we are going to deal with the TEMPO and videoURL variables, the TEMPO variable is used to define the video display time and must receive a numerical value, while the videoURL variable must receive the URL of the YouTube video in case the streaming is generated on 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í:

Access 4YouSee Manager in the main menu Content (1) -> Content (2), Add (3), and in the window do not fill in the Duration field (4), click on Select File (5) and choose the index file .html, select the Category (6) and finally click on the Add button (7).

Example below:

Now that streaming is part of your content library, you must associate it with the playlist of the player where you want to show the streaming.

English

Streaming is a type of project where you want to show a streaming player that must be able to be obtained through a URL.

Pre requirements:

Related Articles