Difference between revisions of "JavaScript integration"

From A-SMIL.org
Jump to: navigation, search
Line 76: Line 76:
== Applicable devices ==
== Applicable devices ==
* IAdea XMP-7300 with firmware or later
* IAdea XMP-6200 with firmware or later

Revision as of 10:23, 30 June 2016

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" 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" />
            <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="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;
            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-6200 with firmware or later