![Page 1: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/1.jpg)
SMIL – Synchronized Multimedia Integration Language
1. Was ist SMIL - Möglichkeiten und Grenzen
2. Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen
3. Einsatzempfehlungen
4. Ein PHP-Skript zum Erstellen von SMIL-Präsentationen ohne SMIL-Kenntnisse
![Page 2: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/2.jpg)
Was ist SMIL?
Die "Synchronized Multimedia Integration Language" (SMIL) ist eine vom W3C standardisierte Sprache zur kombinierten Präsentation multimedialer Daten wie Audio, Video, Text und Grafik. www.w3.org/AudioVideo/
SMIL ist eine XML-Applikation. Sie befähigt Autoren, genau festzulegen, welches Objekt wann und wo angezeigt bzw. abgespielt werden soll.
SMIL trennt streng zwischen Inhalt und Struktur (SMIL-Präsentationen enthalten keine Inhalte, sondern nur Verweise auf Objekte)
Kurz vor Veröffentlichung: Version 2.0
Ein HTML-Dokument wird vom Web-Server mit dem Hypertexttransferprotokoll (http) zum Client übertragen. Das übertragene HTML-Dokument wird dabei schrittweise auf dem Bildschirm sichtbar, ohne dass der zeitliche Ablauf der Übertragung oder der Präsentation der einzelnen Objekte kontrolliert werden kann. Dies ist bei traditionellen HTML-Seiten, die aus Texten und Bildern bestehen, auch gar nicht erforderlich. Texte und Bilder einer HTML-Seite erscheinen nach ihrer vollständigen Übertragung auf dem Bildschirm. Ihre Präsentation ist an keinen festen zeitlichen Ablauf gebunden.
Dies ist bei multimedialen Präsentationen anders. Text, Ton und statische oder laufende Bilder werden in einer vorher genau definierten zeitlichen Folge präsentiert. Bei einem Film ist es ist wichtig, dass der Ton zusammen mit dem entsprechenden Bild wahrgenommen werden kann, usw.. Um dies zu erreichen, müssen Multimediaobjekte kontinuierlich und nach einem klar definierten zeitlichen Schema übertragen werden. Die genaue zeitliche Steuerung und Kontrolle der Übertragung ist für eine Multimediapräsentation also eine entscheidende Determinante. Um dieses Problem zu lösen, wurde SMIL entwickelt. Über die zeitliche Steuerung und Kontrolle der Übertragung und des Ablaufs eine Multimediapräsentation hinaus, kann SMIL auch zur Kontrolle des Layouts der Präsentation verwendet werden. Vereinfacht ausgedrückt: SMIL dient der Positionierung, Synchronisation und Präsentation von Multimediaobjekten.
Ein HTML-Dokument wird vom Web-Server mit dem Hypertexttransferprotokoll (http) zum Client übertragen. Das übertragene HTML-Dokument wird dabei schrittweise auf dem Bildschirm sichtbar, ohne dass der zeitliche Ablauf der Übertragung oder der Präsentation der einzelnen Objekte kontrolliert werden kann. Dies ist bei traditionellen HTML-Seiten, die aus Texten und Bildern bestehen, auch gar nicht erforderlich. Texte und Bilder einer HTML-Seite erscheinen nach ihrer vollständigen Übertragung auf dem Bildschirm. Ihre Präsentation ist an keinen festen zeitlichen Ablauf gebunden.
Dies ist bei multimedialen Präsentationen anders. Text, Ton und statische oder laufende Bilder werden in einer vorher genau definierten zeitlichen Folge präsentiert. Bei einem Film ist es ist wichtig, dass der Ton zusammen mit dem entsprechenden Bild wahrgenommen werden kann, usw.. Um dies zu erreichen, müssen Multimediaobjekte kontinuierlich und nach einem klar definierten zeitlichen Schema übertragen werden. Die genaue zeitliche Steuerung und Kontrolle der Übertragung ist für eine Multimediapräsentation also eine entscheidende Determinante. Um dieses Problem zu lösen, wurde SMIL entwickelt. Über die zeitliche Steuerung und Kontrolle der Übertragung und des Ablaufs eine Multimediapräsentation hinaus, kann SMIL auch zur Kontrolle des Layouts der Präsentation verwendet werden. Vereinfacht ausgedrückt: SMIL dient der Positionierung, Synchronisation und Präsentation von Multimediaobjekten.
![Page 3: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/3.jpg)
Möglichkeiten von SMIL?
Erstellen von interaktiven audiovisuellen Präsentationen auf relativ einfache Weise
Integration verschiedener, zeitlich aufeinander abgestimmter Elemente (Audio- und Videofiles, Texte, Bilder etc.)
Effekte wie Überlappung, Überblendung, Bewegung
HTML sehr ähnlich und ebenso leicht zu erlernen und zu editieren. Die Dateien können auch von Skriptsprachen erstellt werden.
Testsuite: www.w3.org/2001/SMIL20/testsuite/s2animation.html
Ähnlich den Anmerkungen eines Theaterdirektors, der die Darsteller auf- und abtreten lässt, ohne selbst an der Darstellung mitzuwirken
Ein SMIL-Dokument enthält Metadaten und Steuerungsinformationen, nicht aber den tatsächlichen Mediengehalt
Ähnlich den Anmerkungen eines Theaterdirektors, der die Darsteller auf- und abtreten lässt, ohne selbst an der Darstellung mitzuwirken
Ein SMIL-Dokument enthält Metadaten und Steuerungsinformationen, nicht aber den tatsächlichen Mediengehalt
![Page 4: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/4.jpg)
Vorteile
SMIL bietet gegenüber anderen Technologien Vorteile:
Trennung von Struktur und Inhalten
Zusammenfassung von unterschiedlichen Objekten, die auch nicht auf einem Server liegen müssen (eng mit Streamingtechnologie verbunden)
einfache Textdateien – einfaches Editieren
Anpassung an Browser möglich (unterschiedliche Bandbreiten, Sprachen, etc.)
exakte Synchronisation der Objekte
![Page 5: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/5.jpg)
Vorteile
Hauptvorteil:
SMIL wurde unter Aufsicht des W3C von vielen Personen und Firmen entwickelt, darunter RealNetworks, Apple, Netscape, Philipps, GMD, INRIA usw.
Damit ist SMIL ein nicht-proprietärer Standard!
![Page 6: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/6.jpg)
Beispiele
SOJA: www.helio.org/products/smil/demo/ INRIA: cgi-serv.inrialpes.fr/PDMS//docs_mm.htm Real: Enjoy New York with a SMILe INRIA: Étude de données météorologiques
![Page 7: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/7.jpg)
Grenzen von SMIL
junger Standard: Browser bzw. Plugins unterstützen noch nicht vollständig, z.B. RealPlayer + Text,ohne PlugIn derzeit nur vom Internet Explorer ausführbar
einzelne Objekte der Präsentation bleiben betriebssystemabhängig
je nach Präsentationswerkzeug: nicht barrierefrei relativ geringer Befehlsumfang
![Page 8: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/8.jpg)
Syntax von SMIL-Dokumenten
SMIL ist XML-basiert und daher HTML sehr ähnlich. Dies macht SMIL einfach zu schreiben, zu lesen und zu verstehen. Es gibt allerdings einige Unterschiede zwischen SMIL und HTML:
SMIL ist "case sensitive"; alle Tags müssen klein geschrieben werden;
SMIL ist vollständig XML-basiert, d.h. alle Elemente müssen abgeschlossen werden. (Elemente, die kein Ende-Tag besitzen, erhalten am Ende einen Forward-Slash /)
![Page 9: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/9.jpg)
Struktur von SMIL-Dokumenten
<smil> <head> <meta name="title" content="SMIL-Vortrag" />
... <layout> <root-layout background-color="#FFFFFF" width="100" height="200" id="window" /> <region id="text_region" top="5" /> </layout> </head> <body> <text region="text_region" src="text.html" dur="10s" /> </body></smil>
![Page 10: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/10.jpg)
Wichtige Sprachelemente
par Container für parallel anzuzeigende Objekte
<par> <img id="a" dur="6s" begin="0s" src="bild1.jpg" /> <img id="b" dur="4s" begin="0s" src="bild2.jpg" /> <img id="c" dur="5s" begin="2s" src="bild3.jpg" /></par>
(Beginnzeiten sind relativ zum Container par)
![Page 11: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/11.jpg)
Wichtige Sprachelemente
seqContainer für nacheinander anzuzeigende Objekte
<seq> <img id="a" dur="6s" begin="0s" src="bild1.jpg" /> <img id="b" dur="4s" begin="0s" src="bild2.jpg" /> <img id="c" dur="5s" begin="2s" src="bild3.jpg" /></seq>
(Beginnzeiten der Objekte sind relativ zum Vorgänger, hier: 1. und 2. Bild hintereinander, dann 2 Sekunden Pause, dann 3. Bild)
![Page 12: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/12.jpg)
Wichtige Sprachelemente
exclContainer für Objekte, von denen immer nur eines anzuzeigen ist
<excl> <img id="a" dur="6s" src="bild1.jpg" begin="0s;x.activateEvent" /> <img id="b" dur="4s" src="bild2.jpg" begin="y.activateEvent" /></excl> (Bild 1 wird am Anfang gezeigt und immer dann, wenn Objekt x aktiviert wird, Bild 2 nur dann, wenn Objekt y aktiv ist)
![Page 13: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/13.jpg)
Wichtige Sprachelemente
switch Container für Objekte, von denen eines in Abhängigkeit von den vorliegenden Bedingungen angezeigt wird<switch> <par system-bitrate="75000"> <audio src="song1.rm" /> <video src="video1.rm" /> </par> <par system-bitrate="20000"> <audio src="song2.rm" /> <video src="video2.rm" /> </par></switch>
![Page 14: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/14.jpg)
Wichtige Sprachelemente
anchorDefinieren eines Hot Spot Links
<video src="video1.mov" region="videoregion"> <anchor href="rtsp://lumiere.rz.hu-berlin.de/hildebrandt/regine1.mov" coords="20,40,80%,100%" begin="5s" end="10s" /></video>
(Koordinaten definieren ein Rechteck für den Hotspot, als Werte können Pixel und Prozent angegeben werden, hier: der Hotspot steht für 5s zur Verfügung)
![Page 15: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/15.jpg)
Integration von SMIL
HTML Der SMIL-Standard beschreibt die Synchronisation multimedialer Objekte, nicht jedoch die Integration in Webseiten.
Die Einbindung kann auf zwei Wegen geschehen:1. Überführung in ein Dokument, das von einem PlugIn
interpretiert werden kann (siehe RZ-Mitteilungen Nr. 20)
2. Nutzung des HTML+TIME-Konzeptes
![Page 16: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/16.jpg)
HTML+TIME
TIME = Timed Interactive Multimedia Extensions
Erweiterung von HTML für den Internet Explorer, Angabe von Erscheinungszeitpunkt, Dauer und Wiederholungsanzahl zu jedem Objekt,Unterstützung von Bewegung und Interaktion
<html xmlns:t="urn:schemas-microsoft-com:time"> <head> <style> .time { behavior: url(#default#time2) } </style> <?IMPORT namespace="t" implementations="#default#time2"> </head> <body> <p id="example" class="time" begin="0" dur="5">Test</p> </body></html> http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dntime/html/htmltime.asp
![Page 17: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/17.jpg)
Integration von SMIL
XMLAngabe von Codierung und XML-Namespace
<?xml version="1.0" encoding="ISO-8859-1"?><smil xmlns="http://www.w3.org/SMIL20/Language"> <head> <layout> ...</smil>
![Page 18: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/18.jpg)
Integration von SMIL
SVG
<rect y="45" width="10" height="10" fill="red"> <animate attributeName="x" from="0" to="90"
dur="10s" repeatCount="indefinite"></rect>(Deklaration eines Rechtecks mit Hilfe von SVG, Hinzufügen einer Bewegung mit SMIL)
Weitere Beispiele: http://www.kevlindev.com/tutorials/basics/animation/svg_smil/index.htm
![Page 19: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/19.jpg)
Integration von SMIL
PHP
Erstellung von SMIL-Dateien durch ein PHP-SkriptBeispiel
![Page 20: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/20.jpg)
Werkzeuge
Editoren
GRiNS 2.0
SMILGen von Real*GoLive6 von Adobe*
sowie jeder ASCII-Editor*-Qualität nicht geprüft
Player
Real Player SOJA (Smil Output in Java Applets)
Quicktime PlayerGRiNS Player for SMIL 2.0 Schmunzel von SunTREC * Internet Explorer 6 (HTML+TIME)
![Page 21: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/21.jpg)
Tendenzen
Firmen ergänzen SMIL-Standard
<smil
xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions"
qt:autoplay="true"> <head> <layout> ...</smil>
Quelle: http://developer.apple.com/techpubs/quicktime/qtdevdocs/REF/QT41_HTML/QT41WhatsNew-6.html
![Page 22: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/22.jpg)
Einsatzempfehlungen
Flash, PowerPoint, Director usw. = Multimedia-Äquivalent zu Microsoft Word, speichern Binärformate ab, schwer von außen änderbar
Vergleichstabelle
![Page 23: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/23.jpg)
SMIL ohne SMIL-Kenntnisse
http://www.hu-berlin.de/tmp/smil/projekt.php
![Page 24: SMIL – Synchronized Multimedia Integration Language 1.Was ist SMIL - Möglichkeiten und Grenzen 2.Werkzeuge zum Erstellen und Vorführen von SMIL-Präsentationen](https://reader034.vdokument.com/reader034/viewer/2022051413/55204d6249795902118b686f/html5/thumbnails/24.jpg)
Tutorials und Literatur
www.w3.org Wolfgang Keitz: Das SMIL-Textbuch:
http://v.hdm-stuttgart.de/~keitz/skripte/SMILStart.htm
Frank Goetz: SMIL – Multimedia im Internet mit Realsystem G2
SMIL-Tutorial: http://www.helio.org/products/smil/tutorial/