SMIL - Allgemeines

Transcription

SMIL - Allgemeines

h_da SS 2016
SMIL
Seite 1
SMIL: Synchronized Multimedia Integration Language
- Überblick
- Sprachversionen
- Tools: Player, Authoring Tools
- Aufbau eines SMIL Dokuments
h_da SS 2016
- Layout
Seite 2
SMIL - Allgemeines
• SMIL: Synchronized Multimedia Integration Language
h_da SS 2016
• SMIL ist eine Präsentationssprache mit dem Ziel
-
Unterschiedliche Medientypen (Text, Audio, Video und Animation) zu integrieren
-
Eine umfassende Präsentationssprache für Medien zu werden. Die breite Einsetzbarkeit
von HTML für Hypertext-Dokumente war das Vorbild.
Seite 3
SMIL - Allgemeines
• Zum Aufbau einer Präsentation muss man Aussagen machen können zu:
-
Layout (wo wird etwas auf der Darstellungsebene dargestellt)
-
Timing und Synchronisation (wann wird etwas dargestellt und wie ist die zeitliche
Relation zu anderen Darstellungen)
Media-Objekte (was wird dargestellt: Text, Audio, Video)
• Zusätzlich:
h_da SS 2016
-
-
SMIL-Dokument ist eine XML – Dokument (Struktur und Metadaten)
-
Präsentation soll flexibel an unterschiedliche Kontexte anpassbar sein (Control)
Seite 4
SMIL - Allgemeines
Auf Grund des großen Sprachumfang und der logischen Komponenten einer Präsentation ist
SMIL in Modulen spezifiziert.
Ein Modul ist eine Ansammlung von semantisch in Beziehung stehenden XML Elementen,
Attributen und Attributwerten, die eine funktionale Einheit darstellen.
Module sind als zusammenhängende Mengen definiert, die durch einen Namespace
ausgedrückt werden.
h_da SS 2016
Ein Sprach-Profil (language profile) ist eine Kombination von Modulen
Seite 5
SMIL - Allgemeines
h_da SS 2016
• Module (Smil 2.1):
-
Structure (beschreibt die Grund-Elemente von SMIL: smil, head, body)
-
Layout (Kontrolle der Positionierung von Medien Elementen, Lautstärken-Kontrolle bei
Audio)
-
Timing (Timing und Synchronisation)
-
Time Manipulations (Erweiterte Zeitmanipulation: Geschwindigkeit, Rückwärtsabspielen,
Beschleunigen)
-
Media Objects (Beschreibung von Medien-Objekten (Text, Audio, Video, Image,
Animation, Brush-Module, Media-Clipping)
Seite 6
SMIL - Allgemeines
h_da SS 2016
• Module (Smil 2.1):
-
Content Control (Auswahl von Înhalt zur Laufzeit und optimierte Inhalts- Auslieferung,
z.B. Prefetching, Systemabhängigkeiten)
-
Linking (Linking und Navigation in Präsentation, Benutzerkontrolliert, Zeitgesteuert)
-
Animation (Einbeziehung von Animationen und Kombination mehrerer Animationen)
-
Transitions (wipe, fade)
-
Metainformation (Beschreibung von SMIL-Dokumenten, vergleichbar HTML)
Seite 7
SMIL – Content Control
Beispiel für Zugriff auf unterschiedliche Inhalte in Abhängigkeit von der Bitrate:
h_da SS 2016
<par>
<video src="anchor.mpg" ... />
<switch>
<audio src="dutchHQ.aiff" systemBitrate="2000000" ... />
<audio src="dutchMQ.aiff" systemBitrate="512000" ... />
<audio src="dutchLQ.aiff" ... />
</switch>
</par>
Beispiel: unterschiedliche Sprache für ein Audio:
<switch>
<audio src="joe-audio-nederlands" systemLanguage="nl"/>
<audio src="joe-audio-english" systemLanguage="en"/>
</switch>
Seite 8
SMIL - Linking
h_da SS 2016
Anklicken der Bildes in der oberen Hälfte startet eine SMIL-Präsentation in der unteren Hälfte
des Bildschirms.
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<region id="source"
height="%50"/>
<region id="destination" top
="%50"/>
</layout>
</head>
<body>
<a href="embeddedSMIL.smil" target="destination" accesskey="a">
<img region="source" src="source.jpg" dur="indefinite"/>
</a>
</body>
</smil>
Seite 9
SMIL - Metainformation
Beispiel für Metadaten zu einer SMIL-Präsentation (Element meta)
h_da SS 2016
<meta id="meta-smil1.0-a"
<meta id="meta-smil1.0-b"
<meta id="meta-smil1.0-c"
Smith" />
<meta id="meta-smil1.0-d"
12:00:00 GMT"/>
name="Publisher" content="W3C" />
name="Date" content="1999-10-12" />
name="Rights" content="Copyright 1999 John
http-equiv="Expires" content=" 31 Dec 2001
Seite 10
SMIL - Metainformation
Beispiel für Metadaten (Element metadata) zu einer SMIL-Präsentation:
<metadata xml:id="meta-rdf">
<rdf:RDF
xmlns:rdf = "http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:rdfs = "http://www.w3.org/2000/01/rdf-schema#">
h_da SS 2016

<rdf:Description rdf:about="#scene1" >
...
</rdf:Description>
</rdf:RDF>
</metadata>
Seite 11
SMIL - Allgemeines
• Profiles:
-
Ein Language Profile ist eine Kombination vom Modulen.
-
Immer ein gesamter Modul ist Komponente eines Language Profiles.
Es können Integrationsanforderungen spezifiziert sein (z.B. ein Modul verlangt auch die
Integration eines anderen)
• Zwei vordefinierte Profile:
-
- SMIL 3.0 Language Profile (umfasst alle Module)
h_da SS 2016
- SMIL 3.0 Host-Languages Conformant Profile (z.B. BasicMedia, BasicTimeContainers)
Seite 12
SMIL - Allgemeines
SMIL 1.0, SMIL2.0, SMIL2.1, SMIL3.0
• S MIL 1.0 — W3C Recommendation on 15th J une 1998
• S MIL 2.0 "meta-language" W3C Recommendation on 13th December 2005
• Haupt-Unterschiede:
-
Syntaktische Anpassungen z.B.: statt clip-begin, nun clipBegin (siehe DOM)
Anwendungen vom MIME-Type application/smil müssen beide syntaktischen Varianten
unterstützen.
• Aktuell: S MIL 2.1 - W3C Recommendation 13 December 2005: Funktionserweiterung zur
Unterstützung mobiler Geräte
h_da SS 2016
-
Seite 13
SMIL - Allgemeines
SMIL 1.0, SMIL2.0, SMIL2.1, SMIL3.0
• S MIL 3.0 — W3C Recommendation 1 December 2008
-
Updates und Erweiterungen von Modulen. Z.B.:
 Deckkraft des Hintergrunds kann definiert werden
 Motion Layout Modul definiert Bewegung von Inhalten innerhalb von Regionen
-
Neue Funktionalität. Z.B.
 SmilText: Textmodule, der Inline Formatierung einfacher Texte erlaubt.
h_da SS 2016
 State module, das erlaubt System- ode Benutzerzustände in die Ablaufsteuerung zu
nutzen.
 SMIL DOM Support (Dynamisches Setzen von Attributen)
Seite 14
SMIL - Allgemeines
SMIL Player
AMBULANT Open SMIL Player (SMIL3.0 compliant)
• CWI: http://ambulantplayer.org/
RealNetworks
• RealOne for SMIL 2.0 (ab Real Player 11)
Microsoft
• Internet Explorer 6.0 ( XHMTL+SMIL Profile Unterstützung)
h_da SS 2016
Apple
• Ab QuickTime 4.1 (SMIL 1.0)
Seite 15
SMIL - Allgemeines
SMIL Player(Fortsetzung)
Adobe
• Adobe's SVG Viewer unterstützt SMIL Animationen in SVG
X-Smiles
• Produkt, das viele XML Formate in einem Browser vereint (SMIL2.0 Basic, SVG,
XHTML).
• http://www.x-smiles.org/
PocketSmil2.0 (A S MIL 2.0 Playe r for the Pocke t PC) (nicht me hr ve rfügbar)
h_da SS 2016
• http://www.primewares.com/PocketSMIL-19911.html
SMIL Player by InterObject. (A S MIL 2.0 Playe r Bas ic Profile for the Pocke t PC)
Seite 16
• http://handheld.softpedia.com/progDownload/SMIL-Player-for-InterObject-MPEG4-live-streaming-se
SMIL - Allgemeines
SMIL Player(Fortsetzung)
Qi™ the intent®Browser
• Tao's Qi browser supports SMIL, HTML 4.01 CSS, and XML (including XML Parser, DTD
and Schema validation). http://tao-group.com/
h_da SS 2016
(nicht mehr verfügbar)
Seite 17
SMIL - Allgemeines
SMIL Authoring Tools
LimSee2 : A cross platform SMIL2.0 Authoring tool (Version 1.9.1 (11 January 2007))
• http://limsee2.gforge.inria.fr/
LimSee3: Ein Autorentool basierend auf einem template Mechanismus (Slideshow, Lektion;
Annotation)
• http://limsee3.gforge.inria.fr/public-site/
h_da SS 2016
GRiNS Editor Pro 2.2 for SMIL 2.0 (nicht mehr verfügbar)
• http://www.oratrix.com/Products/G2E
Seite 18
SMIL - Allgemeines
Der Aufbau eines SMIL-Dokuments ist in einer DTD festgelegt.
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN"
"http://www.w3.org/TR/REC-smil/ SMIL20.dtd">
<smil
xmlns="http://www.w3.org/2001/SMIL20/Language">
h_da SS 2016
Die W3C Recommendation von SMIL2.0 enthält auch eine informative Version der
Beschreibung als XML/Schema.
Seite 19
SMIL - Allgemeines
Top-Level Element:
smil enthält alle SMIL-Anweisungen
Ebene 1:
head Layout, Meta-Information, Definitionen (siehe HTML)
h_da SS 2016
body Inhalt und Timing (alle dynamischen Aspekte einer Präsentation)
Seite 20
SMIL - Allgemeines
<?xml version="1.0" encoding="UTF-8"?>
<!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"
id="smil_example" title="example5" xml:lang="de">
<head>

</head>
h_da SS 2016
<body
id="body_mainSequence"/>
</smil>
Seite 21
SMIL – Benutzung von Profiles
h_da SS 2016
SMIL ”full language support”
xmlns:smil20lang="http://www.w3.org/2001/SMIL20/Language"
systemRequired="smil20lang" >
...
</smil>
SMIL Anforderung bestimmter Profile
xmlns:transition="http://www.w3.org/2001/SMIL20/BasicTransitions"
xmlns:layout="http://www.w3.org/2001/SMIL20/HierarchicalLayout"
systemRequired="transition+layout" >
...
</smil>
Seite 22
SMIL – Benutzung von Profiles
Eine Liste der Module und ihrer exakten Bezeichner steht im Standard.
Für SMIL3.0 ist das:
h_da SS 2016
http://www.w3.org/TR/SMIL/smil-modules.html#smilModulesNSProfiles
Module name
Identifier
AudioLayout
http://www.w3.org/2008/SMIL30/AudioLayout
BasicLayout
http://www.w3.org/2008/SMIL30/BasicLayout
BasicLinking
http://www.w3.org/2008/SMIL30/BasicLinking
BasicMedia
http://www.w3.org/2008/SMIL30/BasicMedia
Seite 23
SMIL - Allgemeines
h_da SS 2016
Medien können sein:
•
Text: HTML, Timed Text
•
Audio (WAV, RealAudio)
•
Video (MPEG, RealVideo)
•
Graphik (JPG, GIF, PNG, RealPix)
•
Animation (GIF, SVG)
•
textStream
•
Brush-Media: Zeichnen von Flächen und Füllen
Seite 24
SMIL - Layout
Die Layout-Funktionalität ist in vier Stufen definiert:
BasicLayout +
AudioLayout
MultiwindowLayout
h_da SS 2016
Subregion Layout (Hierarchisches Layout)
Seite 25
SMIL - Layout
• BasicLayout: Elemente layout, root-layout, region
• AudioLayout: Attribut soundLevel im Element region
(relative Veränderung des Audio-Pegels)
• MultiwindowLayout (erlaubt mehrere Top-Level Fenster und deren
Koordination in einer Präsentation)
h_da SS 2016
• Hierarchisches Layout (Region Definitionen können hierarchisch
geschachtelt werden)
Seite 26
SMIL - Layout
Element layout:
definiert, wie die Elemente positioniert werden. Folgende
Randbedingungen:
• Layout muss deklariert werden, bevor es benutzt wird, also
innerhalb des head – Elements
• Mehrere layout-Elemente können innerhalb eines switchElements verwendet werden, und erlauben somit z.B.
Bildschirmabhängige Präsentationen.
h_da SS 2016
• Attribute type legt die Layout Sprache fest. Default ist:
text/smil-basic-layout
• Eine Layout-Element kann die Element
- region
- root-layout enthalten
Seite 27
SMIL – Layout - BasicLayout
Element root-layout
Syntaktisch ist es ein leeres Element und beschreibt das
toplevel Präsentations Fenster. Alle Regionen werden
relativ zu ihm positioniert.
Es hat folgende Attribue:
• Background Color
• Heigth
h_da SS 2016
• Width
Seite 28
Element root-layout
Beispiel:
<root-layout
width="1024"
height="768"
id="root"
h_da SS 2016
backgroundColor="aqua"/>
Seite 29
Das region Element kontrolliert die Position, Größe und die Skalierung des Medien
Objekts:
Im folgenden Beispiel wird Region “a” 5 Pixel unterhalb der Oberkante des
Darstellungsfensters definiert:
h_da SS 2016
<smil xmlns="http://www.w3.org/2001/SMIL20/"> <head> <layout> <root-layout width="320“
height="480"/> <region id="a" top="5"/>
</layout> </head> </smil>
Seite 30
Element topLayout
Beschreibt die Grösse eines Präsentationsfensters und dient als toplevel Fenster für
Regionen. Es sind mehrere topLayout Element erlaubt.
Es hat folgende Attribue:
• backgroundColor
• heigth, width
h_da SS 2016
• open (onStart, whenActive), close (onRequest, whenNotActive)
Seite 31
h_da SS 2016
SMIL – Layout - topLayout
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout
id="layout_main" type="L1">
<topLayout
backgroundColor="blue"
id="topLayout_l1"
height="480"
open="whenActive"
close="whenNotActive"
width="640">
<region id="region_r1l1“/>
</topLayout>
<topLayout
close="whenNotActive"
height="240"
id="topLayout_l2"
open="whenActive"
width="240"
backgroundColor="red">
<region id="region_r1l2“/>
</topLayout>
</layout>
</head>
Seite 32
h_da SS 2016
Attribute des region Element:
• position: top,left, right, bottom, heigth, width
• backgroundColor: definiert den Hintergrundfarbe, des Bereichs, der nicht
durch Medien gefüllt ist. (erbt die Farbe des Parent-Elements, wenn nicht
definiert).
• regionName: Region kann benannt sein
• showBackground: always , whe nActive : steuert die Hintergrundfarbe, wenn
kein Medien dargestellt wird.
• z-index: steuert Überlagerung
●
fit: fill, hidde n, m e e t, s croll, s lice
Seite 33
CSS – Formatiermodell: Größeneinheiten
Absolute Einheiten:
h_da SS 2016
H1
H2
H3
H4
H4
{
{
{
{
{
margin: 0.5in } /* inches, 1in = 2.54cm */
line-height: 3cm }
/* centimeters */
word-spacing: 4mm }
/* millimeters */
font-size: 12pt }
/* points, 1pt = 1/72 in */
font-size: 1pc } /* picas, 1pc = 12pt */
Seite 34
CSS – Formatiermodell: Größeneinheiten
Relative Einheiten:
H1 { margin: 0.5em } /* ems, Höhe des Fonts des Elements */
H1 { margin: 1ex }
/* x-Höhe, der Höhe des Buchstaben 'x' */
P { font-size: 12px } /* pixels, relative zur Canvas */
Beispiel:
BODY {
font-size: 12pt;
text-indent: 3em;
}
h_da SS 2016
Prozentwerte sind immer relativ zu einem spezifizierten Wert.
P { line-height: 120% }
Seite 35
SMIL - Allgemeines
Element region:
Parameter fit hat folgenden Werte:
•
hidden: Inhalt wird nicht skaliert, zu gross -> abschneiden
h_da SS 2016
zu klein -> Rand
•
scroll: Inhalt wird nicht skaliert, Scroll-Balken eingefügt
•
fill: Inhalt wird skaliert auf die Grösse der Region.
Grössenverhältnis bleibt nicht erhalten.
•
meet: Inhalt wird so skaliert, dass es an drei Seiten die Region
füllt. Grössenverhältnis bleibt erhalten.
•
slice: Inhalt wird skaliert, dass die gesamte Region gefüllt ist.
Grössenverhältnis bleibt erhalten.
Seite 36
h_da SS 2016
SMIL – Attribut fit
Seite 37
h_da SS 2016
Seite 38
h_da SS 2016
Seite 39
SMIL - Allgemeines
Element region:
Parameter z-index definiert die Reihenfolge der Regionen, wenn
sie sich überlappen.
Die Region mit dem höheren Index liegt oben.
Reihenfolge wird vererbt
h_da SS 2016
Bei identischer Stack-Ebene liegt die zeitlich zuletzt gestartete
region liegt oben
Seite 40
SMIL – Layout - region
<region id="r1" top="0" left="0" height="400" width="400“
backgroundColor="red" fit="fill"/>
<region id="r2" top="0" left="50%" height="400" width="400“
backgroundColor="blue" fit="hidden"/>
<region id="r3" top="50%" left="0" height="400" width="400“
backgroundColor="green" fit="meet"/>
h_da SS 2016
<region id="r4" top="50%" left="50%" height="400" width="400"
backgroundColor="yellow" fit="slice"/>
Seite 41
SMIL - Allgemeines
Registration Points erlauben das präzise setzen von
Positionierungen. Beispiel ist das Positionieren eines
Inhalts in unterschiedlichen Boxen an derselben
Position.
h_da SS 2016
Dazu wir der Referenzpunkt definiert, optional das
Alignment definiert und dann bei der Positionierung
des Inhalts darauf Bezug genommen.
Seite 42
SMIL – Registration Point, Alignment
<layout>
<regPoint id=„middle“ top=„10“ left=„10“ regAlign=„center“/>
</layout>
<body>
h_da SS 2016
<img src=„B.jpg“ region=„R1“ regPoint=„middle“/>
</body>
Seite 43
SMIL – Registration Point, Alignment
<layout type="text/smil-basic-layout">
<root-layout id="rootLayout"
width="640" height="480" backgroundColor="white"/>
<region left="7%" top="10%" width="51%" height="50%"
id="region_r1" backgroundColor="blue"/>
<regPoint id="regPoint_rp1"
left="10" top="10" regAlign="topLeft"/>
</layout>
</head>
h_da SS 2016
<body id="body_mainSequence">
<img fit="hidden"
id="img_i1" region="region_r1"
src="MEDIAS/aktuell_rbb.jpg" regPoint="regPoint_rp1"/>
</body>
Seite 44

SMIL - Allgemeines

Transcription

Similar documents

pdf (1/1)

Ausarbeitung Mechanismenmodellierung mittels