JavaScript integration

Jump to: navigation, search

It is often required to change content based on a dynamic condition involving web-based data sources. Although SMIL does not natively provide JavaScript for dynamic programming, one can use embedded HTML5 widget to introduce dynamic triggering capability into SMIL.

SMIL Playlists

The SMIL playlist below includes

  • Link to a transparent HTML5 (in region 1, a 1-by-1 transparent zone) that we will later provide to send trigger events
  • An exclusive section with contents or playlists whose "begin" condition is a notification defined by "notify()"
            <root-layout xml:id="display:0" width="1920" height="1080" />
            <region xml:id="1" width="1px" height="1px" left="0px" top="0px" z-index="0" backgroundColor="transparent" />
            <region xml:id="2" width="1920px" height="1080px" left="0px" top="0px" z-index="1" />
            <seq begin="0">
                <text region="1" begin="0" src="media/notify.html" dur="indefinite"/>
            <excl begin="0">
                <brush region="2" begin="0" color="red" dur="indefinite"/>
                <brush region="2" begin="notify(red)" color="red" dur="indefinite"/>
                <brush region="2" begin="notify(green)" color="green" dur="indefinite"/>
                <brush region="2" begin="notify(blue)" color="blue" dur="indefinite"/>

The notify.html document would send notification "red" to trigger the exclusive playlist to display the red-colored brush, "green" for the green brush, and "blue" for the blue brush.

HTML5 Notification Source

The following code sends notifications to the player via jQuery as REST API calls. Every 5 seconds, "relayNotify()" is called to invoke REST API "http://localhost:8080/v2/task/notify" which parameter is a "smilEvent" which is a string that gets sent into SMIL. The string triggers an event define by "notify()" as illustrated in the SMIL sample above.

    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        var notifyUrl = "http://localhost:8080/v2/task/notify";
        var count  = 0;
        function init() 
            checkInterval = 5 * 1000;
            setInterval(relayNotify, checkInterval);
        function relayNotify()
            color = "red";
            if (count % 3 == 1) color = "green";
            else if (count % 3 == 2) color = "blue";
             $.post(notifyUrl, {"smilEvent" :  color} , "text")
             .done(function () {
                 console.log("Sent notitication successfully");
             .fail(function (jqXHR) {
                 console.log("Notitication failed: " + jqXHR.status);
<body onload="init()">

Applicable devices

  • IAdea XMP-6250/XMP-6400 with firmware or later