7. Anwendungsbeispiele
7.2. Broadcast
Das Broadcast-Beispiel demonstriert eine Möglichkeit, wie Video- und Textnachrichten kombiniert werden können. Gedacht ist an die Präsentation eines Nachrichtensenders. Dieses Beispiel führt in eine erste komplexe SMIL-Anwendung ein.
7.2.1. Überblick
Im folgenden Beispiel wird die Präsentationsfläche des Realplayers in vier Präsentationsbereiche aufgeteilt:
Der Logo-Bereich dient der Einblendung des Logos des Beispiel-Senders. Der News-Bereicht enthält die Titel der als Videos abrufbaren Nachrichten. Im Videobereich werden die Nachrichten als Videos präsentiert. Im Tickerbereich werden Börsenkurse eingeblendet.
7.2.2. Layoutdefinitionen
Die Layoutdefinitionen betreffen das root-Layout und die vier Präsentationsbereiche:
<layout>
<root-layout width="376" height="268" background-color="black"/>
<!-- Logo Region -->
<region id="logo" left="16" top="2" width="130" height="60" fit="fill" z-index="2" />
<!-- News Region -->
<region id="headlines" left="16" top="62" width="130" height="30" fit="fill" background-color="#444444" z-index="2" />
<region id="news" left="16" top="82" width="130" height="124" fit="fill" background-color="#160f60" z-index="3" />
<!-- Video region -->
<region id="video_background" left="159" top="3" width="214" height="262" background-color="#c9c9c9" z-index="1"/>
<region id="video_border" left="173" top="26" width="184" height="153" fit="fill" background-color="#0f6050" z-index="2" />
<region id="video" left="177" top="30" width="176" height="144" fit="fill" background-color="black" z-index="3" />
<!-- Ticker Region -->
<region id="last_updated" left="16" top="217" width="343" height="20" fit="fill" background-color="#160f60" z-index="2" />
<region id="ticker_background" left="16" top="237" width="343" height="25" background-color="#444444" z-index="2"/>
<region id="ticker" left="16" top="237" width="343" height="25" fit="fill" z-index="2" />
</layout>
Im root-Layout wird eine Präsentationsfläche von 376 x 268 Pixeln festgelegt. Die Hintergrundfarbe ist schwarz.
Im Präsentationsbereich "Logo" wird eine Präsentationsfläche von 130 x 60 Pixeln festgelegt. Das Logo wird 16 Pixel vom linken Rand und zwei Pixel vom oberen Rand der Präsentationsfläche eingeblendet. Durch das fit-Attribut mit dem Wert "fill" wird die Größe des Logos automatisch an die Größe des Präsentationsbereiches angepasst. Durch den z-Wert "2" wird das Logo in den Vordergrund gerückt.
Der Präsentationsbereich "News" ist in zwei Teilbereiche untergliedert:
Teilbereich 1 enthält die Überschrift "Headlines"
Teilbereich 2 enthält die Titel der Videonachrichten
Der Präsentationsbereich "Video" ist in drei Teilbereiche untergliedert:
Teilbereich 1 definiert eine graue Hintergrundfläche für die Videopräsentation
Teilbereich 2 definiert einen grünen Hintergrund auf der vorhandenen grauen Hintergrundfläche
Teilbereich 3 definiert eine Videopräsentationsfläche mit blauem Hintergrund; da die Videopräsentationsfläche kleiner als der grüne Hintergrund ist, entsteht der Eindruck eines grünen Rahmens. Die Überlagerung der drei Teilbereiche wird durch den z-index gesteuert.
Der Tickerpräsentationsbereich ist in drei Teilbereiche unterteilt:
Teilbereich 1 definiert einen Textbereich mit Angaben zur letzten Aktualisierung
Teilbereich 2 definiert den Tickerhintergrund
Teilbereich 3 dient der Integration der Tickerinformationen
7.2.3. Die Multimediaobjekte
Um die Präsentation der Multimediaobjekte besser steuern zu können, werden die einzelnen Objekte in spezifische Realdateien eingebunden. Im einzelnen handelt es sich um
- eine Realpixdatei für das Logo
- vier Realtextdateien für die Textinformationen
- eine Realvideodatei für das Video
7.2.3.1. Bild
Für die Einbindung des Logos wurde die Realpix-Datei "logo.rp" geschaffen. Dies hat den Vorteil, dass die von Real entwickelten Elemente benutzt werden können. In dem untenstehenden Beispiel wird durch das <fadein>-Element das Einblenden des Logos gesteuert; das Logo wird nicht schlagartig eingeblendet; vielmehr wird es langsam aufgeblendet.
<imfl>
<head
bitrate="14000"
preroll="0:03"
duration="0:03"
timeformat="dd:hh:mm:ss.xyz"
width="130"
height="60"/>
<!-- assign an image handle to an image name. -->
<image handle="1" name="logo.jpg"/>
<!-- fill the region black. -->
<fill start="0:00" color="black"/>
<!-- fadein the logo. -->
<fadein start="0:00.5" duration="0:02.5" target="1" />
</imfl>
7.2.3.2. Texte
Die Texte sind in Real-Text-Dateien abgelegt. Im einzelnen sind dies:
- news_links.rt
- ticker.rt
- title_headlines.rt
- title_last_update.rt
Die Datei news_links.rt enthält die Überschriften der Videonachrichten und Links zur Zeitschiende der Videopräsentation:
<window
type="generic"
duration="0:03"
bgcolor="#444444"
underline_hyperlinks="true"
link="white"
width="130"
height="124">
<font size="-1" face="arial" color="white">
<br/>
<!-- when the user clicks this link, the player will seek to the 10 second point in the timeline. -->
- <a href="command:seek(0:10.0)" target="_player"> First headline</a>
<br/><br/>
<!-- when the user clicks this link, the player will seek to the 20 second point in the timeline. -->
- <a href="command:seek(0:20.0)" target="_player"> Second headline</a>
<br/><br/>
<!-- when the user clicks this link, the player will seek to the 30 second point in the timeline. -->
- <a href="command:seek(0:30.0)" target="_player"> Third headline</a>
<br/><br/>
<!-- when the user clicks this link, the player will seek to the 40 second point in the timeline. -->
- <a href="command:seek(0:40.0)" target="_player"> Fourth headline</a>
<br/><br/>
</font>
</window>
Die Datei ticker.rt enthält die Tickerinformationen. Diese bestehen aus Börsenkursen sowie Links zu den Homepages der genannten Firmen:
<window
type="tickertape"
duration="1:00"
bgcolor="#444444"
underline_hyperlinks="false"
link="red"
crawlrate="40"
loop="true"
width="343"
height="25">
<font face="arial">
<tu color="white"><a href="http://www.real.com/"> RealNetworks, Inc.</a></tu><tl color="#cfb59c">33 + 2 1/2</tl>
<tu><a href="http://www.compaq.com/">Compaq Computer</a></tu><tl>31 9/16 + 1 3/4</tl>
<tu><a href="http://www.intel.com/">Intel Corp</a></tu><tl>79 3/4 + 1 7/16</tl>
<tu><a href="http://www.dell.com/">Dell Computer</a></tu><tl>99 7/8 + 3 1/2</tl>
<tu><a href="http://www.3com.com/">3COM Corp</a></tu><tl>29 5/8 + 1/16</tl>
<tu><a href="http://www.yahoo.com/">Yahoo! Inc.</a></tu><tl>184 - 2 3/16</tl>
<tu><a href="http://www.dupont.com/">DuPont</a></tu><tl>70 1/8 - 7</tl>
<tu><a href="http://www.oracle.com/">Oracle Corp</a></tu><tl>24 7/16 + 7/8</tl>
</WINDOW>
Der nach links laufende Text wird durch das window-Attribut "type=tickertape= erzeugt. Die Geschwindigkeit des laufenden Texts wird duch die crawlrate festgelegt. Die <tu>-<tl>-Elemente positionieren die Textinformationen hochgestellt und tiefgestellt.
Die Überschrift "Headlines" wurde in der Real-Text-Datei title_headlines.rt abgelegt:
<window
type="generic"
duration="0:03"
bgcolor="#0f6050"
underline_hyperlinks="true"
link="black"
width="130"
height="30">
<!-- Position the text at x=3 pixels and y=0 pixels. -->
<pos x="3" y="0"/>
<font color="yellow" face="arial" size="2"><b>headlines</b></font>
</window>
Der Text, wann die Information zuletzt aktualisiert wurde, wurde in der Real-Text-Datei title_last_updated.rt abgelegt:
<window
type="generic"
duration="0:03"
bgcolor="#0f6050"
underline_hyperlinks="true"
link="black"
width="343"
height="20">
<font color="yellow" face="arial" size="2">
<b>
<time begin="0"/>
<clear/>
<!-- Position the text at x=3 pixels and y=3 pixels. -->
<pos x="3" y="3" >updated: 07:12 est
<!-- Position the text at x=263 pixels and y=3 pixels. -->
<pos x="263" y="3" >Oct 12, 1998</b>
</font>
</window>
7.2.3.3. Video
Das mit dem RealEncoder codierte Video wurde in der Videodatei video.rm abgelegt
7.2.4. Integration der Multimediaobjekte
Die Integration der einzelnen Multimediaobjekte erfolgt über den <body>-Teil des SMIL-Dokuments:
<body>
<par>
<!-- Play the two <par> blocks in sequence. (one after the other) -->
<seq>
<par>
<!-- Play these streams concurrently (in parallel). -->
<img src="pix/logo.rp" region="logo" fill="freeze"/>
<text src="text/title_last_updated.rt" region="last_updated" fill="freeze" />
<text src="text/title_headlines.rt" region="headlines" fill="freeze" />
<text src="text/news_links.rt" region="news" fill="freeze" />
</par>
<par>
<!-- Play these streams concurrently (in parallel). -->
<video src="video/video.rm" region="video" fill="freeze" />
<text src="text/ticker.rt" region="ticker" fill="freeze" />
</par>
</seq>
</par>
</body>
</smil>
Die spezifizierten Multimediaobjekte bestehen, wie bereits ausgeführt, aus:
- einem Bild; das Logo ist als Bild in einer Realpix-Datei mit dem Suffix .rp abgelegt;
- Texten, die in verschiedenen Real-Text-Dateien mit dem Suffix .rt abgelegt sind;
- einem Video, das in einer Real-Video-Datei mit dem Suffix .rm abgelegt ist.
Insgesamt sind sechs Objekte spezifiziert worden:
- Logo
- Headline
- Updates
- Newslinks
- Video
- Ticker
Die ersten vier Objekte sind durch ein <par>-Element zu einer Gruppe zusammengefasst worden, die simultan präsentiert werden soll. Die letzten beiden Objekte bilden die zweite simultan präsentierte Gruppe. Beide Gruppen sind über ein <seq>-Element als Folge definiert. Dies bedeutet, dass Gruppe 1 vor Gruppe 2 eingeblendet werden soll. Das übergreifende <par>-Element legt fest, dass die Übertragung der zweiten Gruppe (preroll) bereits während der Präsentation der ersten Gruppe begonnen werden soll. Auf diese Weise wird noch freie Bandbreite zur Übertragung der preroll-Daten der zweiten Gruppe genutzt.
Der Attributwert "freeze" des fill-Attributs sorgt dafür, dass die einzelnen Multimediaobjekte am Ende der Präsentation sichtbar bleiben.
|