Prezentări multimedia sincronizate pe Web

Limbaje pentru realizarea de prezentări multimedia pe Web:

HTML+TIME şi SMIL

Conducător ştiinţific,

Prof. dr. Toader Jucan

Doctorand,

Asist. Mihaela Brut

Prezentări multimedia sincronizate pe Web

cap. 1: Sincronizarea obiectelor multimedia pe Web

  • Problema sincronizării
  • Introducere
  • Modelarea informaţiei temporale
  • Cadrul temporal de referinţă
  • Aplicaţii ale cadrului temporal de referinţă
  • Sisteme multimedia distribuite

Prezentări multimedia sincronizate pe Web

1.1 Problema sincronizării

— Reproducerea sincronizată pe Web a unor multiple date audio/vizuale.

Aspecte:

  • Stocarea distribuită a datelor multimedia
  • Interacţiunile om-calculator
  • Comunicarea datelor în reţea
  • limitările de performanţă ale calculatoarelor

Prezentări multimedia sincronizate pe Web

1.2 Introducere

Sincronizarea – două subprobleme:

  • Stocarea distribuită a datelor multimedia

  • Modelarea, reprezentarea şi specificarea cerinţelor temporale ale scenariilor multimedia

  • Transpunerea acestor specificaţii temporale în vederea obţinerii sincronizării

Prezentări multimedia sincronizate pe Web

1.2 Introducere

– Analogie în spaţiu: modelarea reprezentării fizice a obiectelor

Modelare masa din lumea reala
Diverse modele de reprezentare a unei mese din lumea reală

Prezentări multimedia sincronizate pe Web

1.2 Introducere

Cadrele unui film din lumea reala
Cadrele unui film din lumea reală

  • Descrierea în limbaj natural

  • Evenimentele petrecute de-a lungul liniei temporale

  • Relaţiile temporale pe baza instanţelor temporale

  • Descrierea relaţiilor temporale pe baza intervalelor de timp

Prezentări multimedia sincronizate pe Web

1.3 Modelarea informaţiei temporale

Modelarea informatiei temporale

Scenariile temporale — determinate sau nedeterminate

Modelele temporale — descrise prin:

  • unitatea temporală primară

  • informaţia contextuală

  • tehnica de reprezentare temporală

Prezentări multimedia sincronizate pe Web

1.4 Cadrul temporal de referinţă

Tehnica de sincronizare multimedia
Proiectarea unei tehnici de sincronizare multimedia

Prezentări multimedia sincronizate pe Web

1.4 Cadrul temporal de referinţă

Cadrul temporal de referinta

Prezentări multimedia sincronizate pe Web

1.5 Aplicaţii ale cadrului temporal de referinţă

Cateva specificatii temporale pt. un scenariu multimedia particular

Prezentări multimedia sincronizate pe Web

1.6 Sisteme multimedia distribuite

Utilizarea modelului OCPN impreuna cu diferite protocoale de comunicare

Prezentări multimedia sincronizate pe Web

cap. 2: HTML+TIME - o extensie a HTML pentru realizarea de prezentări multimedia

  • Introducere în HTML+TIME
  • Modelul HTML+TIME pentru temporizare
  • Editarea documentelor HTML+TIME
  • Containere temporale exclusive, secvenţiale şi paralele
  • Inserarea obiectelor multimedia în prezentările HTML+TIME
  • Asocierea de animaţie prezentărilor
  • Efecte de tranziţie între slide-urile unei prezentări
  • Alternative de afişare: elementul "t:switch"

Prezentări multimedia sincronizate pe Web

2.1 Introducere în HTML+TIME

  • HyperText Markup Language - Timed Interactive Multimedia Extensions
  • disponibil din Internet Explorer 5

Beneficii:

  • Pagini Web având conţinut dinamic
  • Utilizare facilă
  • Suport pentru scripting

Prezentări multimedia sincronizate pe Web

2.2 Modelul HTML+TIME pentru temporizare

  • unifică modelul liniei temporale şi cel al relaţiilor bazate pe evenimente
  • interactivitate: timpii de început/sfârşit - corelaţi cu câte un eveniment
  • producere eveniment => adăugare element la linia temporală curentă

Tipuri elemente:

  • Elemente de conţinut
  • Elemente de stil

Prezentări multimedia sincronizate pe Web

2.3 Editarea documentelor HTML+TIME

  • Crearea unui spaţiu de nume XML:

    <html xmlns:t ="urn:schemas-microsoft-com:time">

    <?import namespace="t"

    implementation="#default#time2">

  • Precizarea comportamentului time2

    <p style="behavior:url(#default#time2)" ...>

    <style> .time {behavior: url(#default#time2);}

    </style> ...<p class="time" ...>...

  • Specificarea atributelor de temporizare
  • Inserarea unei acţiuni

Prezentări multimedia sincronizate pe Web

2.4 Containere temporale exclusive, secvenţiale şi paralele

<t:seq repeatCount="indefinite">
<t:par>
<img class="time" begin="0" dur="3" timeAction="display" 
src="images/Encarta/p1.jpg" style="height=150; 
width=300" /> <div class="time" begin="0" dur="3" 
 timeAction="display"> Prima pasăre</div>
</t:par>
<t:par>
<img class="time" dur="3" timeAction="display" 
   src="images/Encarta/p2.jpg" style="height=150; 
   width=300" />
<div class="time" dur="3" timeAction="display">
   A doua pasăre</div>
</t:par> </t:seq>

Prezentări multimedia sincronizate pe Web

2.4 Containere temporale exclusive, secvenţiale şi paralele

Prima pasăre
A doua pasăre

Prezentări multimedia sincronizate pe Web

2.5 Inserarea obiectelor multimedia

t:media, t:video, t:audio, t:img, t:animation, t:ref 
<button id=start>Play</button>
<button id=stop>Stop</button>
<t:media begin="start.click" end="stop.click" 
src="OrinocoFlow.avi" mute="false" timeAction="display" 
style="height=150; width=150" />

Prezentări multimedia sincronizate pe Web

2.6 Asocierea de animație prezentărilor

t:animate, t:animateColor, t:animateMotion, t:set 
<div id="div1" class="time" begin="Div19.begin+3" 
style="background-color:yellow;text-align:center; 
width:25px; position:relative"> ...HTML+TIME...
<t:animate id="widen" begin="0" targetElement="div1" 
attributeName="width" from="25" to="570" 
calcmode="paced" dur="5" fill="hold"/> 
</div>
...HTML+TIME...

Prezentări multimedia sincronizate pe Web

2.7 Efecte de tranziţie între slide-urile unei prezentări

t:transitionFilter 
<!-- elementul DIV poate fi un container 
        pentru continutul unei pagini -->
<div Iid="unContainer" class="time" dur="29">

<t:transitionFilter ID="unContainerTranIn" mode="in" 
begin="unContainer.begin" type="ellipseWipe" dur="1"/>

<t:transitionFilter mode="out" begin="unContainer.end-2" 
type="barnDoorWipe" dur="2"/>
<!-- Efectele de tranzitie aplicate containerului div 
        vor fi aplicate si tuturor copiilor sai. -->
</DIV>

Prezentări multimedia sincronizate pe Web

2.8 Alternative de afișare: elementul "t:switch"

systemCaptions, systemBitrate, systemOverdubOrSubtitle, systemLanguage 
<t:switch>
<span class="time" systemLanguage="es" 
    >Somos interdependientes (Espanol)</span>
<span class="time" systemLanguage="pt" >
    Nós somos interdependentes (Portuguese)</span>
<span class="time" systemLanguage="en" >
    We are interdependent (English)</span>
<span class="time" systemLanguage="ro" >
    Suntem o ţară interdependentă (Română)</span>
<span class="time"<
    Sistem setat pe o limbă necunoscută</span>
</t:switch>

Prezentări multimedia sincronizate pe Web

cap. 3: SMIL - limbaj bazat pe XML pentru prezentări multimedia sincronizate pe Web

  • Introducere
  • SMIL ca limbaj XML
  • Funcţionalitatea limbajului SMIL
  • Modelul de animaţie folosit de limbajul SMIL
  • Structura unei prezentări
  • Modalităţi de includere a obiectelor multimedia
  • Setarea de hiperlegături
  • Elemente de sincronizare
  • Alternative de prezentare
  • Integrarea prezentărilor SMIL în paginile Web

Prezentări multimedia sincronizate pe Web

3.1 Introducere în limbajul SMIL

  • Synchronized Multimedia Integration Language

  • Limbaj bazat pe XML dezvoltat de Consorţiul Web începând cu 1998

  • O prezentare SMIL => mai multe fluxuri de date şi fişiere, fiecare având propriul URL

  • Necesită player specializat - de ex., RealOne for SMIL 2.0 al firmei RealNetworks sau GriNS al firmei Oratrix

Prezentări multimedia sincronizate pe Web

3.2 SMIL ca limbaj XML

  • Definit ca un set de module de marcare reutilizabile

  • Orice set de module componente ale SMIL poate fi integrate în orice alt limbaj din familia XML

  • Actualmente, componente ale SMIL 2.0 sunt deja utilizate în cadrul limbajelor XHTML şi SVG

  • Se vizează încorporarea unor componente SMIL în limbajul WML sau în cadrul aplicaţiilor complexe folosite de televiziuni

Prezentări multimedia sincronizate pe Web

3.3 Funcționalitatea limbajului SMIL

  • SMIL este constituit din zece arii funcţionale, fiecare partiţionată în module

  • Fiecare dintre module introduce un set de elemente, proprietăţi şi atribute înrudite semantic

  • Modulele pot fi independente sau complementare

  • Fiecare modul SMIL are asociat un URI unic

  • un subset de specificaţii care se conformează limbajului gazdă SMIL trebuie să specifice în mod explicit URI-ul spaţiului de nume pe care îl utilizează

Prezentări multimedia sincronizate pe Web

3.4 Modelul de animație folosit de limbajul SMIL

  • f(t) - funcţia pentru animaţie simplă

  • F(t, u) - funcţia efect al animaţiei

  • fr(t) - funcţia de animaţie repetată

  • fc(t) - funcţia de animaţie cumulativă

  • ff(t) - funcţia de animaţie blocată

Prezentări multimedia sincronizate pe Web

3.5 Structura unei prezentări

smil, head, body 
<smil>
<head>  <layout>
    <region id="image" top="20" left="20" />
    <region id="video" top="100" left="40" />
</layout> </head>
<body> <par>
  <img region="image"  src="images/Enya/enya3.gif" 
	  dur="15s" />
  <video region="video" src="movies/OrinocoFlow.avi" 
	  dur="15s" />
</par> </body>
</smil>

Prezentări multimedia sincronizate pe Web

3.6 Modalități de includere a obiectelor multimedia

ref, text, textstream, img, audio, video, animation 
<smil> <head>
<layout type="text/smil-basic-layout">
<root-layout width="350" height="350"/>
<region id=r1 top=15 left=20 height=200 width=300/>
<region id=r2 top=250 left=20 height=300 width=300/>
</layout>  </head>
<body> <par>
 <video region="r1" src="Orinoco.avi" dur="50s"/>
 <video region="r2" src="box.avi" repeat="2"/>
</par> </body>
</smil>
Exemplul 1

Prezentări multimedia sincronizate pe Web

3.7 Setarea de hiperlegături

a, anchor - show

<video src="http://www.infoiasi.ro/~cipc/desch.mpeg">
<!-- primele 50 sec., legatura 
  catre textul in romaneste -->
<anchor href="http://www.infoiasi.ro/~cipc/disc-ro.txt" 
   begin="0s" end="50s" show="replace"/>
<!-- urmatoarele 69 sec., legatura 
  catre textul in engleza -->
<anchor href="http://www.infoiasi.ro/~cipc/disc-en.txt" 
   begin="51s" end="2min" show="new"/>
</video>

Prezentări multimedia sincronizate pe Web

3.8 Elemente de sincronizare

par, seq, excl 
<smil> <head> <layout>
 <region id="r1" top="0" left="0" 
  height="275" width="350" />
 <region id="r2" top="185" left="0" 
  height="300" width="450" />
</layout> </head> 
<body> <seq begin="5s">
 <img src="figura.jpg" dur="5s" fit="scroll"
  title="Figura geometrica" region="r1" />
 <video src="smil.mpg" region="r2" />
  <audio src="vals.mp3" dur="7s" title="Vals" />
</seq> </body> </smil>

Prezentări multimedia sincronizate pe Web

3.9 Alternative de prezentare

switch - system-bitrate, system-captions, system-language, system-screen-size, system-screen-depth

<switch>
  <video src="conf/deschidere_fr"
         system-language="fr, en, it" />
  <audio src="conf/deschidere_ro"
         system-language="ro" />
</switch>

Prezentări multimedia sincronizate pe Web

3.10 Integrarea prezentărilor SMIL în paginile Web

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

Prezentări multimedia sincronizate pe Web

Rezumat

  1. Sincronizarea obiectelor multimedia pe Web
  2. HTML+TIME - o extensie a HTML pentru realizarea de prezentări multimedia
  3. SMIL - limbaj bazat pe XML pentru prezentări multimedia sincronizate pe Web

Întrebări?

Prezentări multimedia sincronizate pe Web

Vă mulţumesc!