Das Web ist multimedial

Des Schockwellenreiters Multimediaseiten

Startseite | Schockwellenreiter | Impressum

Navigation

Wo bin ich?
  Startseite

Tutorials
  SMIL (1)
  SMIL (2)
  FLV mit ffmpegX
  FLV im 16:9-Format
  HiQ FLV
  WordPress & FLV
  Internet-Archive

Archiv 2008
  Juni 2008
  Mai 2008
  April 2008
  März 2008
  Februar 2008
  Januar 2008

Archiv 2007
  Dezember 2007
  November 2007
  Oktober 2007
  September 2007
  August 2007
  Juli 2007
  Juni 2007
  Mai 2007
  April 2007
  März 2007
  Februar 2007
  Januar 2007

Archiv 2006
  Dezember 2006
  November 2006
  Oktober 2006
  September 2006
  August 2006
  Juli 2006
  Juni 2006
  Mai 2006
  April 2006
  März 2006
  Februar 2006
  Januar 2006

Archiv 2005
  Dezember 2005
  November 2005
  Oktober 2005
  September 2005
  August 2005
  Juli 2005
  Juni 2005
  Mai 2005
  April 2005
  März 2005
  Februar 2005

Preisvergleich und Testberichte zu Notebooks, Handys Digitalkameras
sowie MP3 Player.

Plastikkarten
Telefonbuch
Mozilla Firefox Download

Tutorial: Vodcasting mit SMIL (Teil 2)

Hatte ich im ersten Teil dieses kleinen SMIL-Tutorials nur eine kleine Diashow gezeigt, werden wir nun einen richtigen Film einbauen, der trotz allem auch als Vodcast ins Netz gestellt werden kann. Allerdings erkaufen wir uns dies mit dem Nachteil, daß die SMIL-Datei nicht mehr im Ambulant-Player läuft. Um den eingebetteten Film auf eine vodcastfähige Größe einzudampfen, habe ich ihn mit iSquint in das Format MPEG-4 mit H.264 Encoding heruntergerechnet (6,4 MB) und das Format beherrscht Ambulant leider nicht. Mit der über 46 MB fetten Originaldatei hatte der Player keine Probleme, aber das läuft dann nur noch lokal auf dem Desktop und nicht mehr im Netz. iTunes, QuickTime, der RealPlayer und Democracy, die DRM-freie Alternative zu iTunes, kommen mit dem komprimierten Film aber zurecht.

Es ist sowieso ein Kreuz mit den Multimedia-Dateien der diversen SMIL-Player, sie beherrschen alle unterschiedlichen Formate. So sind die »bevorzugten« Dateiformate bei:

Player	Video	Audio	Bilder
Ambulant	Div-X	MP3; Ogg Vorbis (streamed)	JPEG, PNG, GIF, SVG
RealPlayer	MPEG-2, MPEG-4; RealVideo (streamed)	MP3; RealAudio (streamed)	JPEG, PNG, GIF, SVG, Flash
QuickTime iTunes	Quicktime; MPEG-4 (streamed)	MP3, AIFF; RealAudio (streamed)	JPEG, PNG, GIF, Flash
Democracy	Quicktime, WMV, MPEG-4, AVI, XVID	keine Angaben; MP3 geht	keine Angaben; GIF, JPEG, PNG geht

Während man also bei den Audio-Formaten mit MP3 immer auf der sicheren Seite ist und auch bei den Bildern die »Browser«-Formate immer gehen, feiert bei den Video-Codices der Wildwuchs fröhliche Urständ. Und teilweise greifen die Player dann auch noch auf externe Encoder zu, so daß etwas, was auf dem einen Rechner läuft, auf dem anderen noch lange nicht laufen muß. Wenn man sich allerdings auf die letzten drei (RealPlayer, QuickTime/iTunes und Democracy) beschränkt, scheint meinen bisherigen Erfahrungen nach MPEG-4 mit H.264 im QuickTime-Container eine sichere Sache zu sein.

[Jetzt aber in medias res]: Das Ziel unseres kleinen Tutorials soll eine SMIL-Anwendung sein, die sowohl im RealPlayer und in QuickTime läuft, aber auch in iTunes und Democracy Podcast-fähig ist. Daher beschränken wir uns auf SMIL 1.0, da QuickTime die aktuelle Version SMIL 2.1 leider immer noch nicht beherrscht. Wir wollen Bilder, Filme und Links einbauen und zeigen, wie das in SMIL mit der Zeitsteuerung funktioniert.

Eine SMIL-Datei ist ja eine XML-Datei und ähnlich wie (X)HTML zweigeteilt. Ein Header (<head>) enthält die Layout-Informationen und ein <body> die Informationen über den zeitlichen Ablauf der Animation. Also legen wir erst einmal den Header fest:

Layout

Das Root-Fenster ist entsprechend unserem Video 640 x 480 Pixel groß und bekommt eine schwarze Hintergrundfarbe. Zwar darf man der Spezifikation nach auch direkt in das Rootfenster »zeichnen«, aber da QuickTime damit nicht klar kommt, legen wir eine Region »video« fest, die das Rootfenster zu 100% in der Höhe und Breite ausfüllt. Darüber legen wir je noch eine Region »logo« (links oben), »navbar« (rechts) und »untertitel« (unten) fest, die entsprechende Elemente aufnehmen sollen. Ihnen wird auch jeweils noch ein z-index zugewiesen. Je höher dieser ist, desto weiter »oben« werden diese Elemente gezeichnet und verdecken dadurch unter Umständen darunterliegende Elemente.

Im Quellcode sieht das Ganze so aus:

<head>
<layout>
   <root-layout id="root" width="640" height="480"
   background-color="black" />
   <region id="video" width="100%" height="100%" 
   z-index="1" />
   <region id="logo" left="40" top="10" width="50" 
   height="57" z-index="2" />
   <region id="navbar" left="400" top="10" width="200" 
   height="460" z-index="2" />
   <region id="untertitel" left="40" top="400" width="560" 
   height="64" z-index="3" />
</layout>
</head>

Ist doch eigentlich ziemlich einfach, oder? Das <root-layout> legt die »Fenstergröße« des Players fest und enthält alle anderen Komponenten, während jede <region> ein Container für die Medieninhalte ist. Die Angabe von Koordinaten und Höhe und Weite (alternativ gehen auch Prozentwerte) ist für alle Regionen verbindlich, eine Ausnahme bildet die Audio-Region, da diese keine sichtbaren Inhalte besitzt. Außerdem können — ähnlich (X)HTML — im Head noch Metadaten vereinbart werden, jedoch ist nicht alles, was in HTML erlaubt ist, auch in SMIL erlaubt! Die Metadaten beschränken sich auf Autor, Titel und Copyright-Vermerk.

[Was zeigen wir eigentlich wann?] Wir wollen eine kleine Agility-Präsentation zeigen, die folgenden Ablauf haben soll:

Startbild mit eingeblendetem Titel
Film mit Untertitel und Logo
Gegen Schluß des Films macht das Team einen Fehler, der soll (als Text) angezeigt werden
und schließlich die Ende-Meldung und die Credits

Außerdem wollen wir zeigen, wie man aus dem Film heraus verlinken kann. Der Quellcode der <body>-Section sieht daher wie folgt aus:

<body>
<seq>
<par>
 <img src="http://www.kantel.de/casts/smil/startbild.jpg" 
  region="video" dur="10" />
 <img src="http://www.kantel.de/casts/smil/nav1.gif" 
  region="navbar" begin="2" end="10" />
</par>
<par>
 <video src="http://www.kantel.de/casts/smil/berolina2.mov" 
  region="video" />
 <a href="http://www.schockwellenreiter.de/" show="new"
   external="true">
 <img src="http://www.kantel.de/casts/smil/untertitel1.jpg" 
  region="untertitel" begin="2" dur="6" /></a>
 <a href="http://www.agilityblog.de/" show="new"
  external="true">
 <img src="http:/\/www.kantel.de/casts/smil/zebuicon.jpg"
  region="logo" begin="2" dur="44" /></a>
 <img src="http:/\/www.kantel.de/casts/smil/fehler1.gif" 
  region="navbar" begin="40" dur="2" />
</par>
<img src="http://www.kantel.de/casts/smil/theend1.gif" 
region="video" dur="10" />
<a href="http://www.kantel-chaos-team.de/" show="new" 
<img src="http://www.kantel.de/casts/smil/theend2.gif" 
 region="video" dur="2" fill="freeze" /></a>
 external="true">
</seq>
</body>

Das ist schon alles. Der <body> einer SMIL-Datei enthält eigentlich nur zwei Anweisungen:

<seq> für Anweisungen, die sequentiell (hintereinander) abgearbeitet werden sollen, und
<par> für Medienelemente, die parallel (mehr oder weniger gleichzeitig) angezeigt werden sollen.

Im Prinzip baut sich die SMIL-Datei unseres Tutorials also wie folgt auf:

<seq>
  <par>
    10 Sekunden Eingangs-Bild
    8 Sekunden Titel (2 Sekunden verzögert)
  </par>
  <par>
    Video mit Untertitel und Logo
    nach ca. 40 Sekunden erscheint eine Fehlermeldung
  </par>
  Ende-Bild
  Credits
</seq>

Dabei gibt es dann die Objekt-Container img, video, audio usw., die aber alle auf ref »gemapped« werden, die unterschiedlichen Namen dienen nur der besseren Lesbarkeit. Wichtige Attribute der Objekt-Container sind src, der eine URI zur Quelle verlangt und region, der die id einer in der Head-Section festgelegten Region bekommt. Alle Objekte müssen einer Region zugeordnet werden.

Bei den URIs sollte man vorsichtig bei relativen Links sein, QuickTime akzeptiert sie nur, wenn die Mediadateien im gleichen Verzeichnis wie die SMIL-Datei liegen. Im Zweifelsfalle ist man daher mit absoluten URIs besser bedient.

Wichtig sind auch die Synchronisations-Attribute:

begin="": Bezieht sich immer auf das letzte <seq>
dur="": Dauer
end="": Bezieht sich immer auf das letzte <seq>

Dabei gibt es zwei Anfängerfallen, in die auch ich getappst bin: Erstens darf es für jede Sequenz nur ein »begin« geben und zweitens wird ein Objekt nicht angezeigt, wenn der »end«-Wert kleiner als der »begin«-Wert ist. (Wenn man SMIL-Dateien per Script erzeugt, passiert das schneller, als es einem lieb ist. )

Schließlich legt das fill-Attribut das Verhalten am Ende einer Sequenz fest: Bei fill="remove" wird das letzte Media-Obejekt entfernt und der Hintergrund des Root-Fensters wird sichtbar. Dies ist in der Regel der Default-Wert. Bei fill="freeze" hingegen wird das letzte Media-Objekt »eingefroren« und bleibt sichtbar.

[Schließlich und endlich interessiert uns der Hyperlink]: Der sieht aus, wie von HTML bekannt (<a href="...">), besitzt aber zwei zusätzlich Attribute, external und show. Bei external="false" (Default) wird der Link im aktuellen Player geöffnet, external="true" öffnet den Link im Standard-(Web-)Browser des Benutzers. Und show="new" öffnet ein neues Player-Fenster, show="false" läßt das Linkziel im gleichen Player-Fenster ablaufen. Das aus HTML bekannte <area>-Element wird ebenfalls unterstützt.

Screenshot: Die SMIL-Datei (noch mit dem unkomprimierten Original-Video) läuft im Ambulant-Player, die dahinterliegende Webseite wurde aus dem Video heraus geöffnet. (Klick für eine Vergrößerung)

Links und Anker sind nur gültig, solange das zugehörende Objekt existiert. Alternativ dazu können Links und Anker auch mit den Synchronisations-Attributen begin, end und dur versehen werden.

Und um jetzt aus unserer Präsentation einen Vodcast zumachen, haben wir den QuickTime-Trick aus dem letzten Tutorial angewandt: Wir haben die Endung .mov angehängt und an den Anfang der Datei die 8 Buchstaben SMILtext geschrieben. QuickTime war glücklich darüber, Democracy und dem RealPlayer war es egal, lediglich der Ambulant-Player weigerte sich, diese Datei zu parsen.

Die SMIL-Datei als Vodcast in iTunes und Democracy, sowie im REALplayer (Klick für eine Vergrößerung).

Dann habe ich die Datei einfach in meinen experimentellen Vodcast gepackt und erstaunlicherweise — ich war selber skeptisch — funktionierte das alles wunderbar. Zumindestens mit iTunes und Democracy. Und es sollte eigentlich mit (fast) jedem anderen Vodcast-Client (der .mov kann) auch funktionieren. Der Nachteil: Da die Media-Dateien immer aktuell nachgeladen werden, ist eine »Mitnahme« auf ein mobiles Gerät (iPod) nicht sonderlich sinnvoll. Doch dieser Nachteil sollte dank der neuen UTMS-fähigen Geräten (und MMS-2 resp. 3GPP als SMIL (Mobile)-»Player«) bald zu einem Vorteil (ständige Aktualisierung möglich) wandeln.

Und natürlich läßt sich diese zum QuickTime-Movie konvertierte SMIL-Datei auch mit der üblichen object-embed-Kombination in eine Webseite einbauen. Das habe ich hier gemacht. Ihr dürft dort klicken — auch da funktionieren die Links. Auf den Folien dieser Vorlesung steht sowieso noch einiges mehr zu SMIL.

Technorati-Tags: SMIL Video

Posted by Jörg Kantel | Permalink | | | Multimedia