https://www.a-smil.org/index.php?title=JavaScript_integration&feed=atom&action=history
JavaScript integration - Revision history
2024-03-29T12:33:15Z
Revision history for this page on the wiki
MediaWiki 1.23.17
https://www.a-smil.org/index.php?title=JavaScript_integration&diff=545&oldid=prev
SMIL T.A. at 10:38, 30 June 2016
2016-06-30T10:38:00Z
<p></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">Revision as of 10:38, 30 June 2016</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 76:</td>
<td colspan="2" class="diff-lineno">Line 76:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>== Applicable devices ==</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>== Applicable devices ==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* IAdea XMP-<del class="diffchange diffchange-inline">6200 </del>with firmware 1.2.<del class="diffchange diffchange-inline">65</del>.<del class="diffchange diffchange-inline">273 </del>or later</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* IAdea XMP-<ins class="diffchange diffchange-inline">6250/XMP-6400 </ins>with firmware 1.2.<ins class="diffchange diffchange-inline">64</ins>.<ins class="diffchange diffchange-inline">274 </ins>or later</div></td></tr>
</table>
SMIL T.A.
https://www.a-smil.org/index.php?title=JavaScript_integration&diff=543&oldid=prev
SMIL T.A. at 10:24, 30 June 2016
2016-06-30T10:24:48Z
<p></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">Revision as of 10:24, 30 June 2016</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 11:</td>
<td colspan="2" class="diff-lineno">Line 11:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>     <head></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>     <head></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>         <layout></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>         <layout></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">        </del><root-layout xml:id="display:0" width="1920" height="1080" /></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">            </ins><root-layout xml:id="display:0" width="1920" height="1080" /></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">        </del><region xml:id="1" width="1px" height="1px" left="0px" top="0px" z-index="0" backgroundColor="transparent" /></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">            </ins><region xml:id="1" width="1px" height="1px" left="0px" top="0px" z-index="0" backgroundColor="transparent" /></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">        </del><region xml:id="2" width="1920px" height="1080px" left="0px" top="0px" z-index="1" /></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">            </ins><region xml:id="2" width="1920px" height="1080px" left="0px" top="0px" z-index="1" /></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">    </del></layout></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">        </ins></layout></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>     </head></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>     </head></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>     <body></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>     <body></div></td></tr>
</table>
SMIL T.A.
https://www.a-smil.org/index.php?title=JavaScript_integration&diff=542&oldid=prev
SMIL T.A. at 10:24, 30 June 2016
2016-06-30T10:24:23Z
<p></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">Revision as of 10:24, 30 June 2016</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 12:</td>
<td colspan="2" class="diff-lineno">Line 12:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>         <layout></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>         <layout></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>         <root-layout xml:id="display:0" width="1920" height="1080" /></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>         <root-layout xml:id="display:0" width="1920" height="1080" /></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>         <region xml:id="1" width="1px" height="1px" left="0px" top="0px<del class="diffchange diffchange-inline">" fit="fill</del>" z-index="0<del class="diffchange diffchange-inline">" mediaAlign="center</del>" backgroundColor="transparent" /></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>         <region xml:id="1" width="1px" height="1px" left="0px" top="0px" z-index="0" backgroundColor="transparent" /></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>         <region xml:id="2" width="1920px" height="1080px" left="0px" top="0px<del class="diffchange diffchange-inline">" fit="meet</del>" z-index="1<del class="diffchange diffchange-inline">" mediaAlign="center" soundLevel="100%" backgroundColor="#000000</del>" /></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>         <region xml:id="2" width="1920px" height="1080px" left="0px" top="0px" z-index="1" /></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>     </layout></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>     </layout></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>     </head></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>     </head></div></td></tr>
</table>
SMIL T.A.
https://www.a-smil.org/index.php?title=JavaScript_integration&diff=541&oldid=prev
SMIL T.A. at 10:23, 30 June 2016
2016-06-30T10:23:24Z
<p></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">Revision as of 10:23, 30 June 2016</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 76:</td>
<td colspan="2" class="diff-lineno">Line 76:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>== Applicable devices ==</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>== Applicable devices ==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* IAdea XMP-<del class="diffchange diffchange-inline">7300 </del>with firmware 1.2.65.273 or later</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* IAdea XMP-<ins class="diffchange diffchange-inline">6200 </ins>with firmware 1.2.65.273 or later</div></td></tr>
</table>
SMIL T.A.
https://www.a-smil.org/index.php?title=JavaScript_integration&diff=540&oldid=prev
SMIL T.A. at 09:45, 30 June 2016
2016-06-30T09:45:45Z
<p></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">Revision as of 09:45, 30 June 2016</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 36:</td>
<td colspan="2" class="diff-lineno">Line 36:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>=== HTML5 Notification Source ===</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>=== HTML5 Notification Source ===</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>The following code sends notifications to the player via jQuery as REST API calls.  </div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>The following code sends notifications to the player via jQuery as REST API calls<ins class="diffchange diffchange-inline">. 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</ins>.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div><source lang="html5"></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div><source lang="html5"></div></td></tr>
</table>
SMIL T.A.
https://www.a-smil.org/index.php?title=JavaScript_integration&diff=539&oldid=prev
SMIL T.A.: Created
2016-06-30T09:43:30Z
<p>Created</p>
<p><b>New page</b></p><div>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.<br />
<br />
== SMIL Playlists ==<br />
<br />
The SMIL playlist below includes<br />
* Link to a transparent HTML5 (in region 1, a 1-by-1 transparent zone) that we will later provide to send trigger events<br />
* An exclusive section with contents or playlists whose "begin" condition is a notification defined by "notify()"<br />
<br />
<source lang="smil"><br />
<smil><br />
<head><br />
<layout><br />
<root-layout xml:id="display:0" width="1920" height="1080" /><br />
<region xml:id="1" width="1px" height="1px" left="0px" top="0px" fit="fill" z-index="0" mediaAlign="center" backgroundColor="transparent" /><br />
<region xml:id="2" width="1920px" height="1080px" left="0px" top="0px" fit="meet" z-index="1" mediaAlign="center" soundLevel="100%" backgroundColor="#000000" /><br />
</layout><br />
</head><br />
<body><br />
<par><br />
<seq begin="0"><br />
<text region="1" begin="0" src="media/notify.html" dur="indefinite"/><br />
</seq><br />
<excl begin="0"><br />
<brush region="2" begin="0" color="red" dur="indefinite"/><br />
<brush region="2" begin="notify(red)" color="red" dur="indefinite"/><br />
<brush region="2" begin="notify(green)" color="green" dur="indefinite"/><br />
<brush region="2" begin="notify(blue)" color="blue" dur="indefinite"/><br />
</excl><br />
</par><br />
</body><br />
</smil><br />
</source><br />
<br />
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.<br />
<br />
=== HTML5 Notification Source ===<br />
<br />
The following code sends notifications to the player via jQuery as REST API calls. <br />
<br />
<source lang="html5"><br />
<html><br />
<head><br />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script><br />
<script type="text/javascript"><br />
var notifyUrl = "http://localhost:8080/v2/task/notify";<br />
var count = 0;<br />
function init() <br />
{<br />
checkInterval = 5 * 1000;<br />
relayNotify();<br />
setInterval(relayNotify, checkInterval);<br />
}<br />
<br />
function relayNotify()<br />
{<br />
color = "red";<br />
if (count % 3 == 1) color = "green";<br />
else if (count % 3 == 2) color = "blue";<br />
<br />
$.post(notifyUrl, {"smilEvent" : color} , "text")<br />
.done(function () {<br />
console.log("Sent notitication successfully");<br />
})<br />
.fail(function (jqXHR) {<br />
console.log("Notitication failed: " + jqXHR.status);<br />
});<br />
count++;<br />
}<br />
</script><br />
</head><br />
<body onload="init()"><br />
</body><br />
</html><br />
</source><br />
<br />
== Applicable devices ==<br />
<br />
* IAdea XMP-7300 with firmware 1.2.65.273 or later</div>
SMIL T.A.