SMIL 2016 S h_da S Seite 1

Transkript

1 SMIL Seite 1

2 SMIL Layout Layout-Konzept: Rechteckige Darstellungs-Regionen Referenzpunk: Linke obere Ecke Hierarchie von Darstellungsregionen Positionierung relativ zur umfassenden Darstellungsregion Vererbung von Attributen (Hintergrundfarbe, Dimensionierung) Multiwindow-Layout Hierarchisches Layout Seite 2

3 SMIL - Timing Seite 3

4 SMIL Timeline Die Elemente seq, par und excl heissen Zeit-Container und legen eine Zeitschiene für ihre Kindelemente fest. Durch Timing-Attribute kann das Zeitverhalten der Elemente gesteuert werden (Beginn, Dauer, Ende, Wiederholung) Jedes Element hat eine simple duration, das ist die implizite Dauer des Mediums (0 bei diskreten Medien (z.b. Bild)) Die active duration ist die Dauer, die sich aus der simple duration in Kombination mit Wiederholungsangaben ergibt. Die Timing-Attribute können auf Medien und die Zeit-Container angewendet werden Seite 4

5 SMIL Timeline Sequence (seq): Inhalte werden nacheinander abgespielt. Der nächste Inhalt wird präsentiert, wenn der vorherige endet Parallel (par): Inhalte werden gleichzeitig präsentiert Exclusive (excl) ist vergleichbar zu par, aber es ist immer nur ein Element aktiv. Anwendungen dafür sind z.b.: - Interaktive Playlist - Untertitel Auswahl - Audio-Beschreibungen Sequence und Parallel können geschachtelt werden. Timing kann zeit-orientiert (absolut/relativ) oder Event-orientiert sein (bei Aktivierung eines Buttons) Seite 5

6 SMIL Timeline <par begin="0s" dur="33s"> <video begin="1s" dur="10s" repeatcount="2.5" fill="freeze".../> </par> Seite 6

7 SMIL Timeline <par begin="0s" dur="12s" repeatdur="33s" fill="freeze" > <video begin="1s" dur="5s" repeatcount="1.8" fill="freeze".../> </par> Seite 7

8 SMIL Timing Element par : Zeit-Defaultverhalten: - Syncbase ist der Start des Zeit-Containers - Beginn der Kind-Elemente ist Zeitpunkt 0 - Dauer ist durch endsync festgelegt, als Default gilt: endsync= "last", d.h. Der Parallel-Container endet, wenn das zeitlich letzte Element endet. Seite 8

9 SMIL Timeline Beim Abspielen parallelen Inhalts kann die Dauer durch das endsync Attribut beeinflusst werden: (1): Ende, wenn das erste Element endet endsync="first" (2): Ende, wenn das adressierte Element endet endsync="id(name)" (3): Ende, wenn das letzte Element endet endsync="last" Seite 9

10 SMIL Timing Timing Attribute: Attribute: begin, dur, end, min, max, repeatdur, repeatcount Mögliche Werte Absolutangabe: 02:30:03.25 zwei Stunden, zwanzig Minuten, 3 Sekunden, 250 Millisekunden Relativeangabe: + 2s nach zwei Sekunden, -3s 3 Sekunden vorher SyncBase: Id-value.begin Id-value.end z.b. vid.begin Event: eventbaseelement.eventsymbol z.b. show.activateevent AccessKey: Taste der Tastatur z.b. accesskey( q ) Seite 10

11 SMIL Timing Format Beispiel hh:mm:ss.f (angelehnt an das SMPTE Format: hh:mm:ss:ff) number [h min s ms] wallclock (YYYY-MM-DDThh:mm:ss+zone) 1:50:00 (1 Stunde, 50 Minuten) 10:50 (10 Minuten,50 Sekunden) 10.5 (10,5 Sekunden) 3.5h (3.5 Stunden) 3.5min (3,5 Minuten) 3.5s (3,5 Sekunden) (Default) 35ms (35 Millisekunden) wallclock( t12:10: ) (10 Minuten und 30 Sekunden nach 12 Uhr am 5. J anuar 2014 GMT+ 1.00) Seite 11

12 SMIL Timing Event Timing Allgemeine Syntax: Event-value ::= ( Eventbase-element "." )? Event-symbol Eventbase-element ::= Id-value ( S? ("+" "-") S? Clock-value )? Event-symbol ::= Nmtoken Die Menge der Event-symbols ist implementierungsabhängig. Beispiele können sein: activate, focus, mouse-over, load Seite 12

13 SMIL Timing Timing Attribute: Kombinationen und Listen - z.b. end= vid.begin+2s - z.b. end= vid.activateevent; next.activateevent" - repeat, repeatcount, repeatdur: dur="5s repeatcount="3" Seite 13

14 SMIL Timing Timing Attribute: Attribute: repeatcount Mögliche Werte Numerischer Wert auch teilweise (z.b. 1,4) oder "indefinite Attribute: endsync Mögliche Werte endsync = " first last all media Id-value Seite 14

15 SMIL Timesheets Ziel: SMIL3.0 Timing Elemente und Attribute in anderen XML Sprachen verfügbar machen. Beispiele sind XHTML oder SVG Ergänzend zu den Konstrukten in SMIL3.0 werden zwei Elemente definiert: - timesheet: enthält Timing Information und ist im <head> Element des XHTML Dokuments integriert. - Item: enthält Referenzen auf die zeitbehafteten Elemente im <BODY>Abschnitt des XHTML Dokuments. Seite 15

16 SMIL TimeSheets <smil:timesheet> <smil:seq> <smil:item select="#slide1" dur="5s" /> <smil:item select="#slide2" dur="5s" /> <smil:item select="#slide3" dur="5s" /> </smil:seq> </smil:timesheet> HTML Head <div xml:id ="Slide1" class="slide"> <h1 xml:id="title1">timesheets</h1> </div> HTML Body Seite 16

17 SMIL und HTML5 Bei HTML5 arbeitet das World Wide Web Consortium (W3C) und die Web Hypertext Application Technology Working Group (WHATWG) zusammen. Ziel ist es, die Sprachsicht des Web (HTML) und die Anwendungssicht (WHATWG) besser zu koordinieren und eine neue Version von HTML zu erstellen. Ziele für HTML5 sind: Neue Feature sollen auf HTML, CSS, DOM, and JavaScript basieren Verringern der notwendigen Plugins (e.g. Flash) in Browsern Weniger Scripting, mehr Elemente HTML5 soll Geräte-unabhängig sein Seite 17

18 SMIL und HTML5 HTML5 soll laut W3C Zeitplan 2014 offiziell verabschiedet, d. h. zu einer W3C Recommendation werden. Einer der Erweiterungsbereich ist auch die besserer Integration von Medieninhalte. Beispiele: Tag Beschreibung <audio> Definiert Audio Inhalt <video> Definiert Video Inhalt <source> Definiert mehrere Medien Ressourcen für das Audio / Video Element <embed> Container für externe Anwendungen <track> <canvas> Textspuren für Audio und Video Zeichenfläche für Graphiken Seite 18

19 SMIL und HTML5 Beispiel Video: <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Ihr Browser unterstützt das Video Tag nicht. </video> Beispiel Canvas: <canvas id="mycanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> Seite 19

20 SMIL Medienobjekte Folgende Medienobjekte werden unterstützt: text: beliebiger Text (Textreferenz) textstream: Streaming Text image: Still image (png, jpeg) audio: Audio Clip video: Video (MPEG-1, QT,...) animation:animations-referenz ref: Allgemeine Medien-Referenz Seite 20

21 SMIL Medienobjekte Beispiele: <img src="image1.jpg" region="foo1" fill="freeze" erase="never" /> <par> <video id="vid" begin="-5s" dur="10s" src="movie.mpg" /> <audio begin="vid.begin+2s" dur="8s" src="sound.au" /> </par> <text begin="0" dur="5" region="region_r1l1 src="medias/text_news21.rt" id="text_t1"/> <ref begin="0s" dur="6s" id="ref_r1" src="medias/consortium.jpg" region="region_r1l1" fit="hidden"/> Seite 21