Difference between revisions of "JavaScript integration"

From A-SMIL.org
Jump to: navigation, search
(Created)
 
 
(4 intermediate revisions by one user not shown)
Line 11: Line 11:
 
     <head>
 
     <head>
 
         <layout>
 
         <layout>
        <root-layout xml:id="display:0" width="1920" height="1080" />
+
            <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="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" fit="meet" z-index="1" mediaAlign="center" soundLevel="100%" backgroundColor="#000000" />
+
            <region xml:id="2" width="1920px" height="1080px" left="0px" top="0px" z-index="1" />
    </layout>
+
        </layout>
 
     </head>
 
     </head>
 
     <body>
 
     <body>
Line 36: Line 36:
 
=== HTML5 Notification Source ===
 
=== HTML5 Notification Source ===
  
The following code sends notifications to the player via jQuery as REST API calls.  
+
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.
  
 
<source lang="html5">
 
<source lang="html5">
Line 76: Line 76:
 
== Applicable devices ==
 
== Applicable devices ==
  
* IAdea XMP-7300 with firmware 1.2.65.273 or later
+
* IAdea XMP-6250/XMP-6400 with firmware 1.2.64.274 or later

Latest revision as of 18:38, 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()"
<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" z-index="0" backgroundColor="transparent" />
            <region xml:id="2" width="1920px" height="1080px" left="0px" top="0px" z-index="1" />
        </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. 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.

<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-6250/XMP-6400 with firmware 1.2.64.274 or later