JavaScript integration

From A-SMIL.org
Revision as of 17:43, 30 June 2016 by SMIL T.A. (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
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()"
<smil>
    <head>
        <layout>
        <root-layout xml:id="display:0" width="1920" height="1080" />
        <region xml:id="1" width="1px" height="1px" left="0px" top="0px" fit="fill" z-index="0" mediaAlign="center" backgroundColor="transparent" />
        <region xml:id="2" width="1920px" height="1080px" left="0px" top="0px" fit="meet" z-index="1" mediaAlign="center" soundLevel="100%" backgroundColor="#000000" />
    </layout>
    </head>
    <body>
        <par>
            <seq begin="0">
                <text region="1" begin="0" src="media/notify.html" dur="indefinite"/>
            </seq>
            <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"/>
            </excl>
        </par>
    </body>
</smil>

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.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        var notifyUrl = "http://localhost:8080/v2/task/notify";
        var count  = 0;
        function init() 
        {
            checkInterval = 5 * 1000;
            relayNotify();
            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);
             });
             count++;
        }
    </script>
</head>
<body onload="init()">
</body>
</html>

Applicable devices

  • IAdea XMP-7300 with firmware 1.2.65.273 or later