Transcript Folie 1
Multimedia & SMIL Vorlesung Multimedia & Webtechnologie WS 04/05 Seminararbeit zum Thema: Multimedia & SMIL 16.12.2004 MWT 1 Multimedia & SMIL ► Agenda ■ Einleitung ■ Erläuterung SMIL ■ Vorteile & Nachteile ■ Werkzeuge ■ Programmierung ■ Anwendungsbeispiele ■ Player ■ Fragen 16.12.2004 MWT 2 Multimedia & SMIL ► Einleitung Synchronized Multimedia Integration Language 16.12.2004 MWT 3 Multimedia & SMIL ► Einleitung Die "Synchronized Multimedia Integration Language" (SMIL) ist eine vom W3C standardisierte Sprache zur kombinierten Präsentation multimedialer Daten wie Audio, Video, Text und Grafik. 16.12.2004 MWT 4 Multimedia & SMIL ► Erläuterung Was ist SMIL? ● Zeitlich Kontrolle der Medienobjekte (Synchronized) ● Unterstützung verschiedenster Medienformate (Multimedia) ● Einheitliche Präsentation (Integration) ● basiert auf XML 16.12.2004 MWT 5 Multimedia & SMIL ► Erläuterung Wer entwickelte SMIL ? ● SMIL Arbeitsgruppe des World -Wide-Web-Consortiums (W3C) ● In Zusammenarbeit mit Firmen: Netscape, Realnetworks, Microsoft, .... ● Internationale Beteiligung ● 1998 Version 1.0 SMIL 16.12.2004 MWT 6 Multimedia & SMIL ► Erläuterung Welche Vorteile bietet SMIL ? ● Integration verschiedenster Medienformate ● Sequenzzierung ● zeitliche Koordination der Medienobjekte ● Interaktiv: automatische Multilingualität 16.12.2004 MWT 7 Multimedia & SMIL ► Erläuterung Welche Vorteile bietet SMIL ? ● Unterstützung der Streamingtechnologie ● Nutzung unterschiedlicher Medienquellen ● Benutzerinteraktiv 16.12.2004 MWT 8 Multimedia & SMIL ► Erläuterung 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.) 16.12.2004 MWT 9 Multimedia & SMIL ► Erläuterung Möglichkeiten von SMIL? ● 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. 16.12.2004 MWT 10 Multimedia & SMIL ► 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.) 16.12.2004 MWT 11 Multimedia & SMIL ► Vorteile ● exakte Synchronisation der Objekte ● SMIL wurde unter Aufsicht des W3C von vielen Personen und Firmen entwickelt, darunter Real Networks, Apple, Netscape, Philipps, GMD, INRIA usw. Damit ist SMIL ein nicht - proprietärer Standard! 16.12.2004 MWT 12 Multimedia & SMIL ► Nachteile ● junger Standard: Browser bzw. Plugins unterstützen noch nicht vollständig, z.B. Real Player + Text ● einzelne Objekte der Präsentation bleiben betriebssystemabhängig ● je nach Präsentationswerkzeug: nicht barrierefrei ● relativ geringer Befehlsumfang 16.12.2004 MWT 13 Multimedia & SMIL ► Werkzeuge Editoren GRiNS 2.0 SMILGen von Real GoLive6 von Adobe sowie jeder ASCII-Editor 16.12.2004 MWT 14 Multimedia & SMIL ► Programmierung <smil> <head> <meta name=„copyright“ content“Inhalt“ /> <layout> </layout> </head> Einleitendes und abschließendes Tag Head - Element enthält Meta-tags und Layout-Element Body - Element enthält die Spezifizierung der Medienelemente 16.12.2004 <body> </body> </smil> MWT 15 Multimedia & SMIL ► Programmierung <smil> <head> das „Layout“ -Element <layout> </layout> </head> <body> </body> </smil> 16.12.2004 MWT 16 Multimedia & SMIL ► Programmierung <smil> <head> das „Layout“ –Element <layout> - „root-layout“ - Element <root-layout width="300“ height="200“ backgroundcolor="white" /> </layout> </head> <body> </body> </smil> 16.12.2004 MWT 17 Multimedia & SMIL ► Programmierung <smil> das „Layout“ –Element <head> <layout> -„root-layout“ – Element -„region“ –Element <root-layout width="300“ height="200“ backgroundcolor="white" /> <region id="vim_icon" left="75" top="50" width="32" height="32" /> </layout> </head> absolute Positionierung [...] 16.12.2004 MWT 18 Multimedia & SMIL ► Programmierung <smil> das „Layout“ –Element <head> <layout> -„root-layout“ – Element -„region“ –Element <root-layout width="300“ height="200“ backgroundcolor="white" /> <region id="vim_icon" left="50%" top="40%" width="32" height="32" /> </layout> </head> relative Positionierung [...] 16.12.2004 MWT 19 Multimedia & SMIL ► Programmierung das „img“ - Tag 16.12.2004 <smil> <head> <layout> [...] </layout> </head> <body> <img src="vim32x32.gif" alt="The vim icon" region="vim_icon" /> </body> </smil> MWT 20 Multimedia & SMIL ► Programmierung Zeitliche Steuerung: - das „dur“ - Attribut 16.12.2004 <smil> <head> <layout> [...] </layout> </head> <body> <img src="vim32x32.gif" alt="The vim icon" region="vim_icon" dur=„6s“ /> </body> </smil> MWT 21 Multimedia & SMIL ► Programmierung Zeitliche Steuerung: - das „dur“ - Attribut - das „begin“ - Attribut 16.12.2004 <smil> <head> <layout> [...] </layout> </head> <body> <img src="vim32x32.gif" alt="The vim icon" region="vim_icon" dur=„6s“ begin=„2s“ /> </body> </smil> MWT 22 Multimedia & SMIL ► Programmierung Sequenzzierung: <smil> [...] <body> <sequ> <img src="vim32x32.gif" alt="The vim icon" region="vim_icon" dur="6s" /> - das „sequ“ - Element <img src="madewithsoja.gif" alt="Made with SOJA" region="soja_icon" dur="4s" begin="1s" /> </sequ> </body> </smil> 16.12.2004 MWT 23 Multimedia & SMIL ► Programmierung Sequenzzierung: <smil> [...] <body> <par> <img src="vim32x32.gif" alt="The vim icon„ region="vim_icon" dur="6s" /> - das „sequ“ - Element - das „par“ – Element <img src="madewithsoja.gif" alt="Made with SOJA„ region="soja_icon" dur="6s" /> </par> </body> </smil> 16.12.2004 MWT 24 Multimedia & SMIL ► Programmierung Sequenzzierung: <smil> [...] <body> <par begin=„2s“ > <img src="vim32x32.gif" alt="The vim icon„ region="vim_icon" dur="6s" /> - das „sequ“ - Element - das „par“ – Element <img src="madewithsoja.gif" alt="Made with SOJA„ region="soja_icon" dur="6s" /> </par> </body> </smil> 16.12.2004 MWT 25 Multimedia & SMIL ► Programmierung Sequenzzierung: <smil> [...] <body> <par begin=„2s“ end=„4s“ > <img src="vim32x32.gif" alt="The vim icon„ region="vim_icon" /> - das „sequ“ - Element - das „par“ – Element <img src="madewithsoja.gif" alt="Made with SOJA„ region="soja_icon" /> </par> </body> </smil> 16.12.2004 MWT 26 Multimedia & SMIL ► Programmierung Sequenzzierung: <smil> [...] <body> <par repeat=“2“ > <img src="vim32x32.gif" alt="The vim icon„ region="vim_icon„ dur=“4s“ /> - das „sequ“ - Element - das „par“ – Element - das “repeat“ - Attribut <img src="madewithsoja.gif" alt="Made with SOJA„ region="soja_icon" dur=“6s“/> </par> </body> </smil> 16.12.2004 MWT 27 Multimedia & SMIL ► Beispiele Schachspiel: Grundlagen: - Video White - Video Board - Video Black - Untertext Englisch - Sound Kommentar - Titelbild 16.12.2004 MWT 28 Multimedia & SMIL ► Beispiele Schachspiel: erste SMILs - Video mit Sound - 3 Videos parallel - 3 Videos parallel mit Sound - Untertext Englisch mit Sound - Video Einfaden - Hyperlink 16.12.2004 MWT 29 Multimedia & SMIL ► Beispiele Schachspiel: kombinierte SMILs - englische komplett Version - komplett Version mit deutschem Untertitel - Programmdarstellung 16.12.2004 MWT 30 Multimedia & SMIL ► Beispiele eigene SMILs: ■ FB 7 - SMIL ■ Urlaubs - SMIL 16.12.2004 MWT 31 Multimedia & SMIL ► Player Real Player SOJA (Smil Output in Java Applets) Quicktime Player GRiNS Player for SMIL 2.0 Schmunzel von SunTREC Internet Explorer 6 (HTML+TIME) 16.12.2004 MWT 32 Multimedia & SMIL ...noch Fragen? 16.12.2004 MWT 33