HTML content

You are here:

Limitations and best practices for programming HTML type content for Admira Player HTML5 are described below.

Important

The HTML content playback engine may vary depending on the platform of the player. Thus, a player running on WebOS will use a certain version of Webkit depending on the firmware, Windows will run on another, some platforms do not accept Flash plugins, etc.

Admira is constantly working on the list of each one of the particularities for each platform, operating system or firmware. In general, most platforms in their latest versions (WebOS 4.0+, Tizen/SSSP5+, Windows, Linux NWJS 0.17.6 and Android) run Chrome v53.

For specific needs, you can contact support@admira.com for more information. We recommend, once the engine where the content is going to run has been identified, review the requirements from the website www.caniuse.com. Tools like https://babeljs.io/repl can be useful to make the JS compatible.

Limitations

File structure

The current file structure for playback over HTML5 player limits the use of subfolders. Any files needed for the HTML content must remain in the same folder as this, including css, js, png, jpg, mp4, ogg, etc.

That is, the structure would be:

  • main_12345.html
  • script_12345.js
  • image_12345.png
  • style_12345.css
  • ….

By not being able to use subfolders, the correct naming of files is essential, with each content being a unique file with its associates that are also unique. The example uses “12345” to uniquely identify the content.

Important

File names of attached scripts cannot contain the period sign (“.”). That is, names like "socket.io.js" are not accepted, but it must be uploaded renamed as "socket_io.js"

Good Practices

Important

Exception handling should be used with try/catch. Unhandled exceptions could disable the HTML5 player in some of its functions. If errors occur that could harm the normal execution of the player, Admira will not be responsible for the consequences.

Iframe

The execution of content or WebApps occurs within a sandboxed HTML <iframe> TAG. This iframe sandbox contains the following permissions enabled:

  • allow-forms Re-enables form submission
  • allow-pointer-lock Re-enables APIs
  • allow-same-origin Allows the iframe content to be treated as being from the same origin
  • allow-scripts Re-enables scripts

By cons are not allowed:

  • top-navigation; (esto es, solo se puede usar “_self” en target de links)
  • popups

Access to external resources

Each case is different. In the case of wanting to access resources from other “sites”, the execution policies from an <iframe> must be taken into account. This means that options like X-Frame-Options or CORS must be set correctly on the server we want to make the request to. In short, the WebApps that we want to run in admire <iframe> do not run as in a browser, but in an “unattended window”.

ASYNC requests

It is important to note that any request made either abroad (url on the internet) or locally (file on filesystem) must be done ASYNCHRONOUSLY, since the HTML content shares an execution THREAD with the player. Therefore, if a SYNC request were to occur, the player would stop until the request was finished. This can cause serious problems running player. Therefore, ALL requests must be made ASYNCHRONO, just as any execution of SYNCRONO blocking code must be avoided so that it does not cause an unusual stop to the player.

On this website we can simulate blocking of requests:

http://slowwly.robertomurray.co.uk/delay/3000/url/http://api.admira.com

Where 3000 is the delay in milliseconds.

Admira API HTML5 content

Admira API content HTML5 is the service available to be able to communicate from an HTML content to the Admira player via Javascript. The basic functions of said API are described below.

In order to use the functionalities of Admira API Content HTML5, it is necessary to have the script, provided by Admira.

Once added as an attachment and included in the main HTML, it can be invoked as follows:

<script>
var api_obj = null;

function on_load(){
    api_obj = new admira_api_content();
    api_obj.onReady = function(){
        console.log(«Ready !»);
    };
    api_obj.onStart = function(){
        console.log(«Start !»);
    };
}
</script>
<body onLoad=”on_load();”>
…

Events

The basic API Content events are explained here.

  • onReady: occurs when the player has successfully preloaded the HTML content, that is, the HTML has been loaded into the iFrame. At this point the iFrame is still DISPLAY:NONE
  • onStart: occurs when the player puts the content in “PLAY”. Any animation or rendering of elements should start here. At this point the iFrame is still in DISPLAY:INLINE

Features

API content also allows you to send messages to the HTML5 player to indicate different actions to perform:

  • API_DURATION: Change the duration of the content being played
  • API_FINISH: Ends the content being played
  • API_CONDITION: Write a condition to be read later by the player with the capabilities of Conditional Playlist and Conditional Triggers
  • API_WRITE_FILE: Allows writing text data to a file locally
  • API_READ_FILE: Allows you to read a local text file

Note

These features are constantly being developed and improved. For any question, do not hesitate to report to support@admira.com.

Note

For app versions lower than z19.05.30, when you want to get the player id, you need to put the call inside onStrat. For versions later than z19.05.30, this included, it can be put inside onReady. Below is an example of how the player id should be requested in both cases.

Application version prior to z19.05.30

my_api.onReady = function(){
    console.log("Ready !”);
};

my_api.onStart = function(){

console.log(“onStart”);

my_api.send("api_command",{command:my_api.API_PLAYER_INFO,params:{'callback':"onGetInfo"}});

};

Application version equal to or later than z19.05.30

my_api.onReady = function(){
    console.log("Ready !”);

    my_api.send("api_command",{
        command:my_api.API_PLAYER_INFO,params:{
        'callback':"onGetInfo"
            }
        });
    };

    my_api.onStart = function(){

    console.log(“onStart”);
};

Examples of functions

# API_DURATION:

api_obj.send("api_command",{
    command:api_obj.API_DURATION,
    params: {
        duration:30
    }
});

→ It will change the duration, where 30 is the number of seconds from the time of the API call.

# API_FINISH:

api_obj.send("api_command",{
    command:api_obj.API_FINISH
});

→ It will end the content immediately.

# API_CONDITION:

var condition_object = {
    'id': ‘01’,
    'filename': ‘internet_connected.xml’,
    'value':1,
    ‘write’:true
};

api_obj.send("api_command",{
    command:api_obj.API_CONDITION,
    params:condition_object
});

→ It will write the value of the condition for “Internet Connected”.

# API_WRITE_FILE:

var file_object = {
    'path': ‘./log’,
    'filename': ‘hello.txt’,
    'text':’ Hello World !’
};

api_obj.send("api_command",{
    command:api_obj.API_WRITE_FILE,
    params:file_object
});

→ Will write “Hello World!” to ./content/hello.txt

# API_READ_FILE:

function onFileReadComplete(data){
    console.log("HTML onFileReadComplete data : "+data);
}

var file_object = {
    'path': ‘./log’,
    'filename': ‘hello.txt’,
    'callback': ‘onFileReadComplete’
};

api_obj.send("api_command",{
    command:api_obj.API_READ_FILE,
    params:file_object
});

→ It will read ./content/hello.txt and send the result to the callback : onFileReadComplete

# API_PLAYER_INFO:
**Ejemplo completo obtener player_id y usarlo (versiones app inferiores a z19.05.30)

<script>

my_api = new admira_api_content();

var started = false;
var playerId = 0;

if (typeof(Storage) !== "undefined") {
    playerId = localStorage.getItem("playerID");
    myFunction(playerId);
}

if(playerId == 0){
    //Cuando inicia el player (Carga el HTML)
    my_api.onReady = function () {
        setTimeout(function(){my_api.onStart()},time);
    };

    //Cuando emite el HTML
    my_api.onStart = function () {
        clearTimeout(time)
        if(!started){
            my_api.send("api_command", { 
                command: my_api.API_PLAYER_INFO, params: { 'callback': "onGetInfo" 
                } 
            });
        }
    started = true;
    };
    
    my_api.onEvent = function (e) {
        if (started) {
         if (e.action == my_api.API_PLAYER_INFO) {
                if (typeof (e.msg.callback) !== "undefined") {
                    eval(e.msg.callback)(e.msg.data);
                }
            }
        }
    };
}


function onGetInfo(data) {
    try {
        if (data) {
            if (data.PlayerController && data.PlayerController.player_id) {
                playerId = data.PlayerController.player_id;
                localStorage.setItem("playerID", playerId);
                myFunction(playerId);
            }
        }
    }
    catch (e) {
        document.getElementById("contenedor").innerHTML = e;
    }
};

</script>
# API_PLAYER_INFO:
**Ejemplo completo obtener player_id y usarlo (versiones app iguales o superiores a z19.05.30)

<script>

my_api = new admira_api_content();

var started = false;
var playerId = 0;
var time = 2000;

if (typeof(Storage) !== "undefined") {
    playerId = localStorage.getItem("playerID");
    myFunction(playerId);</p>
}

if(playerId == 0){
    //Cuando inicia el player (Carga el HTML)
    my_api.onReady = function () {
        my_api.send("api_command", { 
            command: my_api.API_PLAYER_INFO, params: { 
                'callback': "onGetInfo" 
            }
        });
    };

    //Cuando emite el HTML
    my_api.onStart = function () {
        started = true;
    };
    my_api.onEvent = function (e) {
        if (started) {
            if (e.action == my_api.API_PLAYER_INFO) {
                if (typeof (e.msg.callback) !== "undefined") {
                    eval(e.msg.callback)(e.msg.data);
                }
            }
        }
    };
}

function onGetInfo(data) {
    try {
        if (data) {
            if (data.PlayerController && data.PlayerController.player_id) {
                playerId = data.PlayerController.player_id;
                localStorage.setItem("playerID", playerId);
                myFunction(playerId);
            }
        }
    }
    catch (e) {
        document.getElementById("contenedor").innerHTML = e;
    }
};
</script>

File nomenclature

Necessary base files:

  • PROJECTID_H0001.html (base HTML)
  • PROJECTID_H0001.xml (xml that contains the data of attachments and settings of the fastcontent)
  • PROJECTID_H0001.css (styles file to be applied to fastcontent)
  • Adjunto_1.png (can have any filename)
  • Adjunto_2.mp4 (can have any filename)
(IT IS RECOMMENDED TO EMBEDD THE CODE OF ANY JS FILE DIRECTLY INTO THE HTML AS POSSIBLE TO AVOID COLLISIONS BETWEEN FILE)

XML structure

To see an example of XML for Fastcontent (HTML/SWF), see this repo.

Basic HTML structure for template

The fastcontent HTML is distributed in the following sections:

### HEAD

Global para todos los Fastcontent.

<style>
/* FASTCONTENT GLOBALS */

body { 
    margin: 0 0 0 0; 
    font-family: sans-serif;
}

#chrome_flags{ 
    background-color: #c33e3e; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    font-size: 1vw;
}

#chrome_flasgs_inner{ 
    padding: 20px; 
    background-color: #AAAAAA;
    margin-left: 20%; 
    width: 60%; 
    text-align: left; 
    font-size: 1vw;
}

#chrome_info{ 
    background-color: #228a33db;
    width: 100%; 
    height: 100%; 
    text-align: center; 
    font-size: 1vw;
}

.image{
    width:100%;
    height: 100%;
}

.video{
    width:100%;
    height: 100%;
    object-fit: fill
}

.shape{
    width:100%;
    height: 100%;
}

</style>
### FASTCONTENT UNIVERSAL SCRIPT

Este script se debe copiar del repo proporcionado anteriormente.

<!-- SCRIPT UNIVERSAL GENERICO DE FASTCONTENT HTML5 - INCLUYE API CONTENT & JQUERY -->

<script>
    …… (añadir aquí el código del repo)

</script>>
### PERSONALIZACION DE FASTCONTENT

<!-- SCRIPT ESPECIFICO PARA ESTE CONTENIDO -->

<script>
    …… (añadir aquí el código específico para el fastcontent)

</script>
### PERSONALIZACION EVENTOS EN RELACION A PLAYER

<!-- SCRIPTS ADICIONAL PARA EJECUTAR EN EL MOMENTO DE RENDERIZADO (PLAY) DEL CONTENIDO -->

<!-- el evento onRender se disparará cuando el player haga play del contenido -->

<script>

function onRender(slide_index){
    console.log("Fastcontent is rendering slide : "+slide_index);
    ...(añadir aquí el código necesario para ser ejecutado cuando el player dispara el contenido)
}

</script>
### BODY

Crear las variables necesarias y correctamente seteadas que serán reflejadas en el XML.

<div id="background" class=""> </div>
<div id="producto" class="text"> </div>
<div id="imagen"> </div>
<div id="precio" class="text" style="opacity: 0;"> </div>
<div id="descripcion" class="text"> </div>
<div id="promo"> </div>

URL contents

In cases where it is required to load a web page on the player as content and its preload affects the issuance of its elements, a content has been created so that this load is compatible with the Admira player. The content is made up of a series of files, including access with the player api, for loading the content according to its broadcast. In one of them we must add the URL that we want to broadcast and upload the content as HTML + attachments.

Example:

You can request the content from the QA department  qa@admira.com.

Once we have the content we just have to open the variables.json file

Variables

And then modify the URL for the content you want to upload.

Once this is done, we must upload the content to the platform as HTML + attachments.

Print Friendly, PDF & Email
Tabla de contenidos