Schloss auf einem Hügel
Rufposten
 
Text. Bild. Ton.
Diese Seite berichtet von München aus über Multimedia, digitales Storytelling und Kunst im Netz. Und stellt eigene Entwicklungen in diesem Bereich vor.

Rufposten wird betrieben von Matthias Eberl.
Über mich
Kontakt
Kurse



»Put up some data.
Suggest someone else does.
Manage a subject area.
Write some software.
Send us suggestions.
Tell your friends.«
Tim Berners-Lee, der Erfinder des World Wide Web, auf einer der ersten Seiten im WWW.





RSS Feed





Tutorial zu der W3C-Multimedia-Sprache

Multimedia-Reportagen einfach erstellen mit SMIL

Multimedia-Reportagen, wie ich sie hier wöchentlich vorstelle, sind meistens mit Flash gemacht. Dabei muss das gar nicht sein. Vor einigen Tagen habe ich hier eine kleine vertonte Slideshow vorgestellt, die den Aufbau des Oktoberfests in München beschreibt. Mit ein bisschen Know-How kann das jeder ohne viel lernen zu müssen und ohne irgendetwas kaufen zu müssen. Ein Text-Editor reicht aus.
Flash hat den Vorteil, dass die meisten Browser bereits "ab Werk" das Flash-Plugin mit an Bord haben. Aber für Produktion von Flash-Files braucht man das Programm von Macromedia (nicht gerade billig) und eine ordentlich Einarbeitungsphase. Außerdem ist die Produktion aufwendig, weil man Navigationselemente wie Lautstärkenregelung, Ladeanzeige und "Zurückspulen" selber erstellen muss. Ich gehe davon aus, dass dies der Hauptgrund ist, warum Multimedia-Reportagen bei vielen Nachrichtenseiten in Deutschland nicht produziert werden.

Dabei geht es viel einfacher und vor allem kostenlos. Das World Wide Web Consortium hat schon vor Jahren die Multimedia-Sprache SMIL vorgestellt, die im Syntax eine XML-Sprache wie HTML ist und außerdem extrem einfach ist. Das Problem für die geringe Verbreitung ist möglicherweise, dass Webbrowser von sich aus kein SMIL abspielen können. Aber das müssen sie auch gar nicht, denn Quicktime und der Real Player können mit diesen Dokumenten umgehen. Alle Audio-, Video-, Bild oder Text-Dateien, die diese Plugins abspielen können, kann man mit SMIL in die richtige Reihenfolge bringen. Anders als bei Flash-Dateien enthält die SMIL-Datei aber nicht die Bilder und Töne. SMIL legt nur fest, zu welchem Bild welcher Ton kommt, etc. Die Bilder und Töne müssen zusätzlich auf dem Webserver abgelegt werden.

Für mich ist SMIL auch neu, dieses Tutorial sind mehr oder weniger meine dokumentierten Versuche, mit SMIL Multimedia-Reportagen zu erstellen, denn dafür ist diese Sprache prädestiniert. Informiert habe ich mich dabei vor allem bei dem älteren, aber sehr einfachen SMIL Tutorial. Weitere Resourcen und Bücher finden sich auf der offiziellen W3C-Seite.

Grundlegender Aufbau

Wie bei HTML hat eine SMIL-Datei ebenfalls einen Head-Bereich und einen Body. So fängt eine typische SMIL-Datei an:

<smil qt:autoplay="false" >
 <head>
   <meta name="base" content="http://rufposten.de/daten/smil-tutorial/" />
   <layout>
   <root-layout width="500" height="390"
        background-color="white" />
   <region id="loben" left="0" top="0"
        width="500" height="380" />
  </layout>
 </head>

Zu Beginn wird wie bei HTML mit <smil> angezeigt, dass es sich um eine SMIL-Datei handelt. Der Parameter dazu ist speziell für Quicktime und sagt dem Programm, dass es nicht automatisch mit der Slideshow starten soll, sobald die Dateien geladen sind.
Die Meta-Angabe base entspricht der bei HTML: Dem Player wird gesagt, wo er die verwendeten Bild- und Tondateien finden kann. Zum Testen auf dem Rechner daheim kann man diese Angabe weglassen, dann sucht der Player die Dateien im selben Verzeichnis wie die SMIL-Datei selbst. Aber sobald man die SMIL-Datei ins Netz hochlädt, funktioniert das nicht mehr. Dann braucht man diese Angabe also unbedingt. Anschließend wird im Kopf zunächst das Grundlayout mit root-layout bestimmt. Hier wird aber lediglich Höhe und Breite, sowie Hintergrundfarbe angegeben. Diese Angaben richten sich nach der Größe der Bilder, die man anzeigen will. Keine großer Zauberei also.
Danach wird mit region eine Region angelegt. Man kann innerhalb des Root-Layouts verschiedene Felder festlegen, in denen später visuelle Inhalte erscheinen sollen. So könnte man z.B. verschiedene Bilder nebeneinander anzeigen. Weil wir das aber bei Multimedia-Reportagen nicht brauchen, reicht eine Region, in der dann alle Bilder angezeigt werden. Sie ist fast so groß wie die gesamte Anzeigefläche, ich habe sie nur etwas kleiner gemacht, damit die Steuerleiste von Quicktime nicht direkt am Bild klebt. Innerhalb diese Fläche wird das Bild mit null Pixeln Abstand nach links und nach oben gezeigt. Deswegen habe ich sie "loben" genannt, für "links oben".

Nun werden im Body-Bereich die Inhalte in die vorgebene Region platziert. SMIL bietet dabei ein ganz einfach Konzept an, um die Reihenfolge der eingefügten Bild- und Tondateien zu bestimmen. Es kennt das par-Element, innerhalb dessen alle Elemente gleichzeitig angezeigt, bzw. abgespielt werden. Und es kennt das seq-Element, das die Dateien in Reihenfolge abspielt. Für unser Beispiel wollen wir zunächst mal ein Bild anzeigen und gleichzeitig ein passendes Geräusch als MP3-Dateu dazu abspielen.

 <body>
  <par>
   <img src="wiesn_aufbau_-007.jpg"
        alt="Gabelstapler"
        region="loben"
        dur="13s"
        />
   <audio
         src="gabelstapler.mp3"
         alt="Gabelstapler 80kbps"
         dur="13s"
         />
  </par>
 </body>
</smil>

Das Bild und die MP3-Datei sind beide innerhalb des par-Elements, also werden sie gleichzeitig abgespielt. Neben dem src-Attribut, das den Dateinamen bestimmt, wird auch noch die Anzeigedauer mit dur bestimmt. Zusätzlich zu dur könnte man den Start der Anzeige, bzw. des Abspielens auch noch mit begin um eine Sekundenangabe verzögern. Für das Bild wird außerdem die Region bestimmt, in der es angezeigt wird. In diesem Fall ist das die Region "loben", die wir vorher bestimmt haben.

Das war es bereits. Wir sehen und hören nun einen Gabelstapler mit Ton.

Verschachteln von par und seq

Die Audio-Slideshow zum Oktoberfest-Aufbau, die ich anfangs erwähnt hatte, verwendet im Prinzip nichts anderes als die paar Befehle, die ich oben erklärt habe. Da ich in dem Beispiel einen Text zu allen Bildern spreche und zusätzlich einzelne Bilder oder mehrere Bilder mit einem speziellen Hintergrungeräusch unterlegt sind, ergibt sich eine bunte Verschachtelung von par und seq:

<smil qt:autoplay="false">
 <head>
  <meta name="base" content="http://rufposten.de/daten/smil-tutorial/" />
  <layout>
   <root-layout width="500" height="390"
        background-color="white" />
   <region id="loben" left="0" top="0"
        width="500" height="380" />
  </layout>
 </head>
 <body>
  <par>
   <seq>
   <par>
   <img src="eingang.jpg"
        alt="Eingang"
        region="loben"
        begin="0s"
        dur="9s"
         />
   <audio
         src="haemmern.mp3"
         alt="Hämmern"
         dur="9s"
         begin="0s"
         />
   </par>
   <img src="wohnwagen.jpg"
        alt="Wohnwagen"
        region="loben"
        begin="0s"
        dur="6s"
         />
   <img src="achterbahn.jpg"
        alt="Wohnwagen"
        region="loben"
        begin="0s"
        dur="8s"
         />
   <par>
   <img src="saegen.jpg"
        alt="Sägebild"
        region="loben"
        begin="0s"
        dur="10s"
         />
   <audio
         src="saegen.mp3"
         alt="Saegen"
         dur="10s"
         begin="0s"
         />
   </par>
   <img src="braeurosl.jpg"
        alt="Aufkleber Container"
        region="loben"
        begin="0s"
        dur="7s"
         />
   <img src="container.jpg"
        alt="Container ganz"
        region="loben"
        begin="0s"
        dur="10s"
         />
   <par>
   <seq>
   <img src="innen_ganz.jpg"
        alt="Innenansicht"
        region="loben"
        begin="0s"
        dur="12s"
         />
   <img src="innen_baenke.jpg"
        alt="Innenansicht"
        region="loben"
        begin="0s"
        dur="8s"
         />
   <img src="schild.jpg"
        alt="Handwerker mit Schild"
        region="loben"
        begin="0s"
        dur="8s"
         />
   <img src="preis.jpg"
        alt="Preis"
        region="loben"
        begin="0s"
        dur="16s"
         />
   </seq>
   <audio
         src="innenatmo.mp3"
         alt="Innenatmo"
         dur="44s"
         begin="0s"
         />
   </par>
   </seq>
   <audio
         src="sprecher.mp3"
         alt="Gabelstapler 80kbps"
         dur="90s"
         begin="0s"
         />
  </par>
 </body>
</smil>

Das schaut verwirrender aus, als es ist. Wenn man seine eigene Slideshow baut, dann geht man einfach Schritt für Schritt vor. Zunächst kommen mal alle Bilder in eine sequentielle Abfolge, werden also von <seq> und </seq> umfasst. Diese wird dann mit dem Sprecher-MP3 in eine paralelle Abfolge gebracht:

<par>
     <seq>
     Bild 1
     Bild 2
     Bild 3
     ...
     <seq>

     Sprecher.mp3
</par>

Damit ist das grundlegendste erledigt. Anschließend könnte man noch einzelne Bilder, wie im Beispiel das Bild mit dem Arbeiter der Holz sägt, zusätzlich in ein par-Element packen, um ein Hintergrundgeräusch dazu zu spielen. Bei den Bildern aus dem Inneren des Zeltes sind mehrere Bilder mit Ton hinterlegt. Diese mussten dann nochmal in eine Sequenz gelegt werde und dann mit dem MP3 in das par-Element.

Die Audio-Slideshow "timen"

Oktoberfest Storyboard Schließlich muss man nur noch für alle Bildelemente die passenden Zeiten eintragen, so dass der gesprochene Text mit den Bildern harmoniert. In der Praxis bin ich dafür so vorgegangen: Ich habe mir vor dem Erstellen der Reportage ein kleines Storyboard mit meinem Textverarbeitungs-Programm erstellt und einfach alle Bilder übereinander in eine Tabelle gelegt. In der Spalte daneben habe ich zu jedem Bild ein paar Zeilen getextet. Nur so vermeidet man, dass sich eine sogenannte Bild-Text-Schere auftut, dass sich also unfreiwillige Komik oder einfach nur Missverständnisse im Zusammenwirken von Bild und Text ergeben. Diesen Text habe ich dann gesprochen und aufgenommen. Schließlich habe ich abgestoppt, wie lange nun jedes Bild gezeigt werden muss um mit dem Sprecher übereinzustimmen. Diese Werte habe ich dann eingetragen. Wer es ganz genau machen will, der kann übrigens statt einem Zeitwert von z.B. "1s" auch "1000ms" angeben und so auf die Tausendstel-Sekunde genau timen.

Das Einbetten

Es gibt nun zwei Möglichkeiten, diese Diashow online anzubieten. Entweder man gibt dem User über einen Link die SMIL-Datei zum Download und er kann sie sich dann mit dem externen Quicktime-Player oder Real-Player starten. Oder man bettet die Datei mit object in eine HTML-Datei ein.
Ärgerlicherweise bringen beide Formen wieder eine Menge Probleme mit sich, die man umschiffen muss. Anders als der Realplayer registriert sich der Quicktime-Player nämlich bei der Standardinstallation nicht für das SMIL-Dateiformat. Weder der Player noch das Plugin. Das ist vor allem ärgerlich, wenn man bedenkt, dass dieses Programme sich sonst immer um die Zuständigkeit von Dateiformaten streitet und beim Start mitteilt, dass ein anderes Programm die Zuordnungen übernommen habe.
Mit Doppelklick wäre die Datei also nicht zu starten, wenn sie geladen wurde, und auch der Downloaddialog des Browsers würde kein geeignetes Programm zum Abspielen anbieten. Deshalb können wir diese Lösung schonmal ausschließen, weil man nicht erwarten kann, dass alle ihren Quicktime-Player umkonfigurieren. Von dem Realplayer wollen wir gar nicht erst reden, er ist das nervigste, werbeüberladenste Stück Software der Computergeschichte.

Ich empfehle also, die Slideshow in HTML einzubetten und mit einem Plugin abspielen zu lassen. Der Realplayer ist als Plugin auch wesentlich angenehmer, lässt sich gut konfigurieren und wird z.B. auch von Spiegel Online verwendet, um Video abzuspielen.
Aber auch hier haben wir ein Problem. Normalerweise sollte der sogenannte Mime-Type bei einer Einbettung angeben, welcher Art von Datei vorliegt, und der Browser ruft dann das passende Plugin zum Abspielen auf. Für SMIL wäre das die Angabe "application/smil". In einer besseren Welt würde man das bei der Einbettung mit angeben, und dann würde es auf allen Computern laufen, die Realplayer oder Quicktime installiert haben. In der Realität sehen sich aber beide Player in ihrer Standard-Einstellung nicht zuständig für diesen Mime-Typ. Sie spielen dass SMIL-Dokument nur ab, wenn man den Player sozusagen "beim Namen ruft", also mit "video/quicktime" oder mit "audio/x-pn-realaudio-plugin". Man muss sich also entscheiden, welchen Player man beim Leser vermutet. Hier nun die Einbettung:

Einbetten für Quicktime

So sieht die Einbettung für Quicktime aus:

<object
  id="beispiel_2"
  width="500"
  height="406"
  classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
  codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0">
    <param name="SRC" value="beispiel_2.smil">
    <param name="autoplay" value="false">
    <param name="controller" value ="true">
    <param name="type" value="video/quicktime">
    <param name="pluginspage"
      value="http://www.apple.com/quicktime/download/index.html">
  <embed
    name="beispiel_2"
    width="500"
    height="406"
    src="beispiel_2.smil"
    type="video/quicktime"
    autoplay="false"
    controller="true"
    enablejavascript="true"
    pluginspage="http://www.apple.com/quicktime/download/index.html">
    </embed>
</object>

Das enstpricht der Einbettung von MP3-Dateien mit Quicktime, zu der ich bereits ein Tutorial geschrieben habe. Bei Apple finden sich auch noch weitere Parameter, die die Einbettung von Multimedia-Dateien steuern. Die Höhe von unserem Objekt ist nun übrigens 406. Die Bilder der Slideshow waren ja 380 Pixel hoch, dann haben wir die Slideshow in der SMIL-Datei mit 390 angegeben, damit ein Freiraum zur Steuerleiste entsteht. Und nun kommen nochmals 16 Pixel dazu, das ist die Höhe der Quicktime-Steuerleiste.
Beispiel aufrufen

Einbetten für RealPlayer

So sieht die Einbettung für den RealPlayer aus:

<object
  id="beispiel_2"
  width="500"
  height="390"
  classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
    <param name="SRC" value="beispiel_2.smil">
    <param name="autostart" value="false">
    <param name="console" value="Clip1">
    <param name="controls" value="ImageWindow">
    <param name="type" value="audio/x-pn-realaudio-plugin">
  <embed
    name="beispiel_2"
    width="500"
    height="390"
    src="beispiel_2.smil"
    controls="ImageWindow"
    console="Clip1"
    type="audio/x-pn-realaudio-plugin"
    autostart="false"
    controls="ImageWindow">
    </embed>
</object>

<object
       id="beispiel_2"
       width="500"
       height="45"
       classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
       <param name="controls" value="ControlPanel,StatusBar">
       <param name="console" value="Clip1">
  <embed
    width="500"
    height="45"
    type="audio/x-pn-realaudio-plugin"
    console="Clip1"
    controls="ControlPanel,StatusBar" width="240" height="35">
</object>

Hier ist nun einiges anders. Neben dem bereits erwähnten Mime-Typ sind auch die Parameter für den automatischen Start und die Steuerleiste anders. Auch hier bietet der Hersteller wieder eine umfangreiche Dokumentation aller möglichen Parameter an.
Eine Besonderheit bei der Real-Einbettung ist allerdings, dass die Steuerleiste unabhängig vom Abspielfenster eingebunden werden muss. Deshalb benötigen wir zwei object-Elemente. Die Höhe der Steuerleiste kann man frei wählen, ich fand eine Höhe von 45 Pixeln angenehm. Real bietet auch für die Formatierung der Steuerleiste eine spezielle Dokumentation an.
Beispiel aufrufen

Einbetten für beide Player

Wenn man nun doch beide Player ansprechen will, um die Slideshow für möglichst viele Leute erreichbar zu machen, kann man natürlich einfach zwei HTML-Seiten erstellen und den User dann wählen lassen. Aber dann hat man schon wieder eine Datei mehr. Praktischer geht es mit einer dynamischen Javascript-Lösung, wie ich es bei meinem Beispiel gemacht habe. Der passende Einbettungs-Code wird erst dann ins Browserfenster geschrieben, wenn der Leser auf einen Link geklickt hat.

<script language="JavaScript">
<!--
function quicktime() {
         document.write('<object  id="beispiel_2"  width="500"  height="406"  classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"  codebase="http:\/\/www.apple.com\/qtactivex\/qtplugin.cab#version=6,0,2,0">    <param name="SRC" value="beispiel_2.smil">    <param name="autoplay" value="true">    <param name="controller" value ="true">    <param name="type" value="video\/quicktime">    <param name="pluginspage"      value="http:\/\/www.apple.com\/quicktime\/download\/index.html">  <embed    name="beispiel_2"    width="500"    height="406"    src="beispiel_2.smil"    type="video\/quicktime"    autoplay="true"    controller="true"    enablejavascript="true"    pluginspage="http:\/\/www.apple.com\/quicktime\/download\/index.html">    <\/embed><\/object> ');
         document.write('.');
}

function realplayer() {
         document.write('<object  id="beispiel_2"  width="500"  height="390"  classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">    <param name="SRC" value="beispiel_2.smil">    <param name="autostart" value="true">    <param name="console" value="Clip1">    <param name="controls" value="ImageWindow">    <param name="type" value="audio\/x-pn-realaudio-plugin">  <embed    name="beispiel_2"    width="500"    height="406"    src="beispiel_2.smil"    controls="ImageWindow"    console="Clip1"    type="audio\/x-pn-realaudio-plugin"    autostart="true"    controls="ImageWindow">    <\/embed><\/object><br \/><object       id="beispiel_2"       width="500"       height="45"       classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">       <param name="controls" value="ControlPanel,StatusBar">       <param name="console" value="Clip1">  <embed    width="500"    height="45"    type="audio\/x-pn-realaudio-plugin"    console="Clip1"    controls="ControlPanel,StatusBar" width="240" height="35"><\/object>');
         document.write('.');
}

         //-->
</script>


<a href="javascript:quicktime();">Audio-Slideshow mit Quicktime abspielen</a><br />
<a href="javascript:realplayer();">Audio-Slideshow mit RealPlayer abspielen</a><br>

Das ganze object-Element muss dabei allerdings in einer Reihe stehen. Diese Variante ist vor allem ausbaufähig: Wer will, automatisiert die Entscheidung für ein Plugin mit einer Javascript-Plugin-Abfrage. Auch die Einbettung könnte man sich erleichtern, indem man Variablen wie Höhe, Breite und SRC-Datei in Variablen schreibt und in alle embed und object-Elemente automatisch einfügen lässt.

Ich hoffe, dass ich mit diesem Tutorial ein paar experimentierfreudige Geschichtenerzähler zu neuen Versuchen auf dem Gebiet des Multimedia Storytellings anregen kann. Wer will, schickt mir die URL von seiner vertonten Bildergeschichte, dann werde ich sie hier in meinem Weblog vorstellen.

Veröffentlicht am 19. Sep. 2004. in [/Tech] Kommentare: 12

Joachim wrote at :

Habe schon auf den Beitrag gewartet, nachdem mich die SMIL-Diaschau überzeugt hat und ich einiges dazu recherchiert habe. Schön, dass das mal jemand auch für einfache Gemüter wie mich in schlichten Worten (in deutsch) beschreibt.

fab wrote at :

auch ich werde mich mal an smil ranmachen. das tutorial klingt so, das ich es auch verstehe. zudem nehme ich gelegentlich zu meinen fotos auch töne mit der cam auf und bisher veröffentlichte ich diese nicht. aber vielleicht ist smil ein anlass, dieses zu ändern. ich lass dich jedenfalls von meinen versuchen wissen. danke, fab

fab wrote at :

mein erster Versuch steht online. ich benutze smil vorallem um zu bildern auch ton abspielen zu können. das beispiel gibt es hier: http://foto-fish.de/details.php?image_id=2582

Andreas wrote at :

Ich schaue seit vielen Wochen immer mal wieder auf diese Seite. Das Projekt der Treppe von Aragon hat in mir das »auch-machen-will«-Tier geweckt. Äußerst Informativ und anschaulich finde ich auch das Quicktime- und dieses SMIL-Tutorium. Ich habe vor, etwas damit herumzuexperimentieren, wenn ich endlich meine Magisterarbeit abgegeben habe. Allein - es fehlt an Inhalten. Na, mir wird schon was einfallen. :)

Andreas wrote at :

Wenn man kein anständiges Thema findet, kann man immer noch was über Katzen machen. Ich habe meine erste SMIL-Slideshow nach dem Tutorium gemacht; allerdings speichert Quicktime ab der "streitlustigen Socke" ad infinitum zwischen. Realplayer mag das File anscheinend gar nicht, obwohl ich es zwischendrin einige Male (erfolgreich) mit ihm ausprobiert hatte.

majo wrote at :

Andreas, probiers mal mit dem Parameter qt:immediate-instantiation="true". Der bewirkt, das die Elemente vorgeladen werden. Andere Parameter findet man bei http://www.apple.com/quicktime/authoring/qtsmil.html

Andreas wrote at :

Majo, danke für den Hinweis -- gut zu wissen. Der Fehler hing irgendwie mit der gerade abgespielten Sounddatei zusammen. Ich habe sie ausgetauscht und jetzt funktioniert es (jedenfalls mit Quicktime).

fab wrote at :

und zwar im "fischmarkt" von guangzhou:

Der Schockwellenreiter wrote at :

Fast ein Jahr später habe ich, aufbauend auf Dein Tutorial, ebenfalls eine Einführung in Vodcasting mit SMIL geschrieben. Du bist Schuld. ;o)

luettmatten wrote at 2007-11-15 21:55:

Ich habe mich bisher drei Monate lang intensiv mit SMIL beschäftigt. Ich sehe daran besonders für industriele Zwecke eine große Zukunft. Hier ergeben sich noch ungenutzte Einsatzgebiete. Auch HD DVD setzt auf SMIL - das ist ein Zeichen. SMIL 3.0 erscheint bald und die Player reifen auch.

Waldik wrote at 2008-04-18 10:26:

Vielen Dank für eine gute Einführung! Hat mir sehr geholfen!

Pascal wrote at 2010-06-17 00:12:

Klasse Einführung! Wir behandeln das gerade an der Uni und ich hab die Vorlesung verpennt.. das englisch Tutorial auf http://www.w3schools.com/smil/ ist leider zu sehr auf den IE fixiert.




Valid XHTML 1.0  Powered by Blosxom