JavaScript integration - Revision history

SMIL T.A. at 10:38, 30 June 2016

2016-06-30T10:38:00Z

SMIL T.A. at 10:24, 30 June 2016

2016-06-30T10:24:48Z

SMIL T.A. at 10:24, 30 June 2016

2016-06-30T10:24:23Z

SMIL T.A. at 10:23, 30 June 2016

2016-06-30T10:23:24Z

SMIL T.A. at 09:45, 30 June 2016

2016-06-30T09:45:45Z

SMIL T.A.: Created

2016-06-30T09:43:30Z

Created

New page

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()"

<source lang="smil">
<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>
</source>

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.

<source lang="html5">
<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>
</source>

== Applicable devices ==

* IAdea XMP-7300 with firmware 1.2.65.273 or later

← Older revision		Revision as of 10:38, 30 June 2016
Line 76:		Line 76:
	== Applicable devices ==		== Applicable devices ==

−	* IAdea XMP-~~6200~~ with firmware 1.2.65.~~273~~ or later	+	* IAdea XMP-6250/XMP-6400 with firmware 1.2.64.274 or later

← Older revision		Revision as of 10:23, 30 June 2016
Line 76:		Line 76:
	== Applicable devices ==		== Applicable devices ==

−	* IAdea XMP-~~7300~~ with firmware 1.2.65.273 or later	+	* IAdea XMP-6200 with firmware 1.2.65.273 or later

@@ Line 11: / Line 11: @@
      <head>
          <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" z-index="0" 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" z-index="1" />
+            <region xml:id="2" width="1920px" height="1080px" left="0px" top="0px" z-index="1" />
-    </layout>
+        </layout>
      </head>
      <body>

@@ Line 36: / Line 36: @@
 === 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">