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 1)

Videoblogging, Vlogging, Vodcasting oder Videocasting sind die neuen Buzzwords, die eine Erweiterung des »klassischen« Bloggens, aber auch des Podcastings durch bewegte Bilder versprechen. Leider wird dabei wild drauflosexperimentiert, es werden proprietäre Erweiterungen auf Standards aufgepropft und es wird garnicht danach geschaut, ob vorhandene Standards nicht dafür genutzt werden könnten. Ein solcher Standard ist SMIL, die Synchronized Multimedia Integration Language, als SMIL1 schon 1998 vom W3C verabschiedet, SMIL2 wurde 2001 freigeben.

Angeregt durch dieses kleine Tutorial im »Rufposten« hatte ich mich im Laufe des letzten Jahres immer wieder mal mit SMIL beschäftigt. Und daher möchte ich nun zeigen, wie man SMIL nutzen kann, um Vodcastings mit SMIL zu erstellen. Dies bietet einige Vorteile gegenüber anderen Methoden. SMIL kann eigentlich alles an Multimedia-Elementen integrieren, was der Rechner hergibt, Bilder (JPEG, GIF, PNG), Töne (MP3), Texte und natürlich Videos (QuickTime, Real) und noch vieles mehr. Das heißt, um Vodcasts zu erstellen, ist nicht einmal unbedingt eine (Video-) Kamera notwendig, eine Slideshow mit Bildern ist ebenfalls schnell erstellt. Dieses Tutorial ist daher auf drei Teile angelegt. Im ersten Teil wird gezeigt, wie man eine einfache Slideshow in SMIL erstellt und mit Tönen unterlegt, im zweiten Teil wird diese Slideshow noch ein wenig erweitert, es werden interne und externe Verlinkungen eingeführt und es wird gezeigt, wie man seine SMIL-Präsentation im Netz zeigt und im dritten Teil erstellen wir gemeinsam eine kleine Vodcasting-Multimedia-Show.

Die von mir erstellten SMIL-Dokumente wurden (auf dem Mac) mit folgenden drei SMIL-fähigen Playern getestet:

Ambulant Player (GPL) ist die ultimative Referenz, wenn es um SMIL geht. Der Player unterstützt in der aktuellen Version (1.4) fast vollständig den SMIL 2.1-Standard und es gibt ihn für Windows (incl. CE/PocketPC/TabletPC), Mac OS X und Linux).
Bekanntlich mag ich den RealPlayer nicht besonders (sein ständiger Versuch bei jedem Download, einen auf die kostenpflichtige Version zu lotsen, nervt), aber seine SMIL-Unterstützung ist vorbildlich. Darüberhinaus stellt Real die Sourcen seiner SMIL-Unterstützung als Helix DNA der Open-Source-Community als Codebase zur Verfügung.
Last but not least unterstützt auch QuickTime ab Version 4.1 SMIL. Zwar nur SMIL1 (mit einigen proprietären Erweiterungen (wie könnte es bei Apple anders sein)), aber gerade im Hinblick auf eine iTunes-Unterstützung unseres Vodcasts ist das wichtig. (Ich werde darauf später noch einmal zurückkommen.)

[Was ist SMIL?]? SMIL ist erst einmal ein weiterer XML-Dialekt und damit sind SMIL-Dateien in jedem beliebigen Texteditor zu erstellen. Darüberhinaus erinnert SMIL auch stark an (X)HTML. In der Struktur sieht eine SMIL-Datei wie folgt aus:

<?xml version="1.0"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN"
"http://www.w3.org/2001/SMIL20/SMIL20.dtd">
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
...
<layout>
...
</layout>
</head>
<body>
...
</body>
</smil>

Nach der üblichen XML- und DOCTYPE-Deklaration gibt es wie in HTML einen <head>- und einen <body>-Teil. Neu ist bisher nur, daß es im Head einen <layout>-Tag gibt. In diesem werden die Regionen festgelegt, in denen die einzelnen Multimedia-Elemente erscheinen sollen. Zwingend erforderlich ist das root-layout, das die Fenstergröße festlegt und mindestens eine weitere Region für den Inhalt. (Obwohl ich das in der Dokumentation nirgendwo als »verboten« gefunden habe, ist es keine gute Idee, Inhalte in das root-layout zu legen. Einige Player reagieren darauf unerwartet seltsam.) Wir legen für unsere kleine Diashow daher fest:

<layout>
<root-layout id="r0" backgroundColor="black"
 width="450" height="300" />
<region id="r1" width="100%" height="100%" fit="meet" />
<region id="sound" />
</layout>

(Der Code dieser und der folgenden Code-Beispiele wurde an einigen Stellen willkürlich umgebrochen, damit er ins Layout paßt.)

Jede Region muß die Koordinaten enthalten, die sie in dem root-layout einnimmt. Normalerweise wird dafür das Tupel (left, top, width, height) verwendet. In unserem ersten Beispiel machen wir es uns jedoch einfach und erklären, in dem wir jeweils width und height auf 100 % setzen, das gesamte root-layout zu unserer einzigen Abspielfläche. Einzige Ausnahme von dieser Regel ist die audio-Region. Da Ton nun einmal keinen Platz im visuellen Layout beansprucht, muß er auch nicht deklariert werden.

Ich habe zusätzlich im Head noch einen meta-Tag eingefügt, aber damit ist die Head-Section unseres kleinen Beispiels aber auch schon fertig:

<meta name="title" content="Smile-Tutorial 1" />

Jedoch Vorsicht mit den meta-Tags. Nicht alles, was in HTML erlaubt ist, scheint auch in SMIL erlaubt zu sein. Und mindestens der Ambulant-Player reagiert verschnupft, wenn er auf einen ihm unbekannten meta-Tag stößt.

[Und was kommt nun in den »Body« des SMIL-Dokuments?] In den body gehören eigentlich nur zwei Tags: Den <par>-Tag, innerhalb dessen alle Elemente gleichzeitig abgespielt oder angezeigt werden (parallel) und den <seq>-Tag, der für das hintereinander Abspielen der Multimedia-Elemente verantwortlich ist (sequentiell). Diese Tags können beliebig verschachtelt werden und damit ist dann eine ganze Menge möglich.

Natürlich gibt es jetzt noch weitere Tags, die die einzelnen Multimedia-Elemente, die der SMIL-Player abspielen soll, beschreiben. Das heißt, eigentlich gibt es (in SMIL2) nur einen einzigen Tag, den <ref>-Tag, alle anderen werden darauf »gemapped«. Aber es unterstützt die Lesbarkeit des Quelltextes ungemein, wenn man statt <ref> »<img>, <video>, <audio>, <animation>, <text> oder <textstream>« angibt. Außerdem sorgt dies für eine Abwärtskompatibilität zu SMIL1, so daß der Einsatz dieser Tags dringend empfohlen wird.

[Was wollen wir nun zeigen?] Wer mich kennt, den wird es nicht überraschen, daß ich als erstes Beispiel eine kleine mit Musik unterlegte Diashow (, ca. 1 MB) eines Agility-Turniers ausgesucht habe. Das wird dann in den diversen Player ungefähr so aussehen:

(Ein Klick auf die Bildchen öffnet Screenshots in Originalgröße in einem neuen Fenster.)

Als erstes zeigen wir eine stumme Sequenz mit einem Startbild (<seq>), dann folgen die Bilder von dem Turnier (inklusive eines Endbildes) parallel zum Ton (<par>). Die Bilder wollen wir natürlich nicht alle auf einmal sehen, sondern hintereinander, daher sind sie auch wieder in einen <seq>-Tag eingeschlossen. In der Struktur sieht das daher wie folgt aus:

<body>
<seq>
   Startbild
<par>
   <seq>
      Bild 1
      ...
      Bild n
      Ende-Bild
   </seq>
      Tondatei
</par>
</seq>
</body>

Das ist eigentlich schon alles. Die einzelnen Media-Elemente werden durch ihre URI aufgerufen, z.B.

<img src="http://www.schockwellenreiter.de/smil/intro.jpg"
   region="r1" dur="05" />

Sieht wieder fast wie HTML aus, nur die Attribute sind neu. <dur> (Duration) bezeichnet die Zeit, wie lange das Element angezeigt werden soll. Der Default-Wert sind Sekunden, es ist jedoch möglich, mit einem angehängten »h« oder »m« auch Minuten oder gar Stunden als Wert anzugeben. Zur besseren Lesbarkeit kann man auch ein »s« unmittelbar an den Zeitwert anhängen. Doch Vorsicht: In einigen (meist veralteten) Tutorials wird auch »sec« als zulässiges Anhängsel angegeben. Dies ist nicht (mehr) erlaubt und einige Player reagieren auch hier wieder verschnupft.

Dann muß natürlich die Region angegeben werden, in der die Multimedia-Elemente erscheinen sollen. In unserem Falle ist das einfach, wir haben nur zwei. Die Bilder erscheinen in der Region »r1« und für den Ton sieht das so aus:

<audio src="http://www.schockwellenreiter.de/smil/audio.mp3"
   region="sound" dur="55" />

Übrigens kann SMIL auch mit relativen URIs umgehen, doch das ist in den wenigsten Fällen sinnvoll. Wenn nämlich zum Beispiel die SMIL-Datei eines Vodcastes in iTunes geladen wird, dann liegt sie lokal auf Deinem Rechner und die realitven URIs stimmen alle nicht mehr...

Das ist eigentlich schon alles. Ich habe die Dateien dieses Tutorials auf meinen Server gepackt, die SMIL-Datei kann hier heruntergeladen werden. Je nach Einstellung Eures Browsers kann sie aber auch direkt im Player Eurer Wahl oder zur Inspektion als Text-Datei geöffnet werden. Denn obwohl die Datei Euch tatsächlich eine kleine Diashow präsentiert, SMIL-Dateien sind immer noch Text-Dateien. Anyway, habt Spaß damit...

Und wer das alles nachbauen will, die Bilder gibt es auf meinem flickr-Account (Photos: H. Wollermann) und den Akkordeon-Rag von 1916 habe ich im Internet-Archive gefunden und mit dem kleinen Shareware-Programm MP3 Trimmer (US-$ 10,95) auf die benötigte Länge gekürzt.

[Doch Halt! Was ist mit Vodcasting?] Ja, wenn wir jetzt auch noch »vodcasten« wollen, gibt es einen kleinen Trick: Wie oben schon erwähnt, unterstützt QuickTime SMIL1 nebst einigen proprietären Erweiterungen. Eine davon ist die, daß wir eine SMIL-Datei zu einer ».mov«-Datei erklären können, die von QuickTime auch als solche behandelt wird. Dazu müssen wir nur acht Buchstaben an den Anfang unserer SMIL-Datei einfügen

SMILtext

und dann die Dateiendung auf ».mov« ändern. Und schon wird unsere SMIL-Datei von allen QuickTime-Komponenten als »echter« QuickTime-Film behandelt, obwohl es weiterhin eine Textdatei ist. Probiert es einfach aus: tut1.mov (, 1,8 KB — diese Dateigröße täuscht natürlich, weil vor dem Start der Präsentation auch alle benötigten Multimedia-Dateien geladen werden. Das sind 17 etwa 20 bis 30 KB große Einzelbilder und eine 635 KB große MP3-Datei, insgesamt wird also etwa 1 MB geladen). (Und wenn Ihr mir das mit der Textdatei nicht glaubt, ladet sie einfach herunter und öffnet sie mit einem Text-Editor Eurer Wahl. ) Doch was bedeutet das?

Das bedeutet, daß auch iTunes diese in ein ».mov« umgewandelte SMIL-Datei als QuickTime-Movie akzeptiert. Also packt Eure derart behandelte SMIL-Show in Euren RSS 2.0-Feed und ab geht der Vodcast...

[Wo erfahre ich mehr?] Neben dem schon oben erwähnten Rufposten-Tutorial stammt mein Wissen über SMIL vorrangig aus folgenden Quellen:

Dirk C.A. Bultermann, Lloyd Rutledge: SMIL 2.0 — Interactive Multimedia for Web and Mobile Devices, Berlin - Heidelberg - New York (Springer) 2004. Die ultimative Referenz zu SMIL 2.0 gechrieben von den Machern des Ambulant-Players. Ein Muß für jeden, der sich intensiver mit SMIL auseinandersetzen will.
Fabio Arciniegas: A Realist's SMIL Manifesto (Teil 1 und Teil 2). Bei Erscheinen dieses Aufsatzes (2002) war es wohl eher das Manifest eines Visionärs, aber heute kann all das was hier skizziert wird, tatsächlich verwirklicht werden.
Apples Inside QuickTime: QuickTime and SMIL. Hier ist der gesamte SMIL-Sprachumfang dokumentiert, mit dem QuickTime umgehen kann. Doch Vorsicht: Einige (eigentlich alle) der Spracherweiterungen versteht aber auch nur QuickTime.

Auch wenn ich das SMIL-Buch unbedingt empfehle, mit den beiden im Netz erhältlichen Texten und diesem Tutorial könnt Ihr schon eine Menge mit SMIL anstellen. Probiert es aus, es macht Spaß...

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