3. SMIL Synchronization

3(b). SMIL Timing

[Reference] RealNetworks Production Guide, Chapter 13 & 14 에서 발췌

Timing 모델

미디어의 종류

Continuous media : 시간(duration) 정보가 내장, 즉, clip을 포함한다

<video>, <audio>, <animation>, <textstream> 등

Discrete media : 시간(duration) 정보가 없다. 즉, clip을 포함하지 않는다

<text>, <img> 등

Timing에 대한 정의

Media Timing

discrete media has no implicit duration time
continuous media has implicit duration within the encoding

Presentation Timing

composite duration for a set of objects in a file

Timing 표현의 특징

not simply timeline-based
Structure-based, and Interactive, event-based

시간의 표현 (Time Value)

clock value

full clock 02:30:03.25
partial clock 02:33 00:10.5
timecount 2h 30min 3s 250ms 2h 33min 10s 500ms
wallclock 1999-04-25T11:10:00

syncbase values

다른미디어의 ID.begin±offset 또는 ID.end±offset
예) txt1.begin+4s, vid1.begin, vid2.end-3s, ad1.end

event values

미디어의 ID.이벤트±offset
예) img1.activateEvent, img2.inBoundsEvent+1s

special values

indefinite
media (default)

Duration 종류

Implicit Duration : 미디어에 내장된 실행시간

예) <video src="ex.mpg" />

Simple Duration : SMIL의 dur 속성에 명시적(explicit)으로 표기한 시간

예) <video src="ex.mpg" />
<video src="ex.mpg" dur="7s" />
<video src="ex.mpg" dur="3s" />

Active Duration : 반복횟수가 적용된 시간

예) <video src="ex.mpg" repeatCount="2" />
<video src="ex.mpg" dur="7s" repeatCount="2" />
<video src="ex.mpg" dur="3s" repeatCount="2" />

예)
<par begin="0s" dur="33s">
<video begin="1s" dur="10s" repeatCount="2.5" fill="freeze" .../>
</par>
예)
<par begin="0s" dur="12s" repeatDur="33s" fill="freeze" >
<video begin="1s" dur="5s" repeatCount="1.8" fill="freeze" .../>
</par>

Timing 설정을 위한 요소 및 속성

시간 관련 요소

container 요소 : <par> <seq> <excl>
미디어 요소

일반적인 시간제어 속성 : begin, end, dur

begin="시간값", end="시간값"
dur="시간값" | "media" (default) | "indefinite"

예) begin="2.5h", end="2.75min", end="15.55s", dur="670ms"
예) dur="indefinite", dur="media"

미디어 시간제어 속성 :clipBegin, clipEnd

클립의 내부 timing mark 에 기준한 시간
웹 전송 스트림 또는 live 방송 스트림인 경우 사용 금지
예)

<video src="v1.mpg" clipBegin="10s" clipEnd="50s" />
<video src="v1.mpg" clipBegin="10s" clipEnd="50s" begin="5s" />
<video src="v1.mpg" clipBegin="10s" clipEnd="50s" begin="5s" end="50s" />

반복제어 속성 : repeatCount, repeatDur

예) vi.mpg 의 media time이 2min인 경우

<video src="v1.mpg" repeatCount="3.5" />

<video src="v1.mpg" repeatDur="5min" />
<video src="v1.mpg" repeatDur="5min" begin="1min" />
<video src="v1.mpg" repeatCount="2" dur="3min"/>
<video src="v1.mpg" repeatCount="2" dur="3min" end="5min" />
<video src="v1.mpg" repeatCount="indefinite" />
<video src="v1.mpg" repeatDur="indefinite" dur="30s" />

확장 시간제어 속성

endsync

<par>의 경우 endsync 속성 가능 (그룹이 동시에 종료)

endsync = "all | first | ID | last"

min, max
fill="freeze" | "remove"

이벤트 기반 동기화 : SMIL1.0 사양

이벤트 기반 시간 표기 방법

begin 또는 end = "id(아이디명칭) (해당이벤트)"

해당이벤트 = begin | 시간 | end

예) id(video1)(begin), id(txt1)(4s), id(audio1)(end)

<par>의 경우 시작후 시간, <seq>의 경우 종료후 시간

예제)

<par>
<img src="june-1.jpg" region="p1" id="img1" begin="3s" dur="6s"/>
<img src="june-2.jpg" region="p2" id="img2" begin="id(img1)(begin)" />
</par>

<par>
<img src="june-1.jpg" region="p1" id="img1" begin="3s" dur="6s"/>
<img src="june-2.jpg" region="p2" id="img2" begin="id(img1)(2s)" dur="5s"/>
</par>

<par>
<img src="june-1.jpg" region="p1" id="img1" begin="1s" dur="5s"/>
<img src="june-2.jpg" region="p2" id="img2" begin="id(img1)(end)" dur="5s"/>
</par>

결과보기 결과보기 결과보기

예제)

<par>
   <text src="pic1.txt" region="p1" id="txt1" dur="3s" />
   <par begin="id(txt1)(4s)" >
      <img src="june-1.jpg" region="p1" id="img1" dur="7s"/>
      <img src="june-2.jpg" region="p2" id="img2" dur="5s"/>
   </par>
</par>

<par>
    <img src="june-1.jpg" region="pic1" id="img1" dur="4s"/>
    <img src="june-2.jpg" region="pic2" id="img2" begin="id(img1)(end)" dur="4s"/>
    <img src="june-3.jpg" region="pic3"      begin="id(img1)(2s)"   end="id(img2)(end)" />
</par>

결과보기 결과보기

이벤트 기반 동기화 : SMIL2.0

객체기반 스크립트 방식과 유사 개념

이벤트와 시간을 분리하여 명기 :begin 또는 end = ID.이벤트±시간

예) begin="img1.begin", "img1.begin+2s", "img1.end", "txt1.begin+4s"

예제) 결과보기

<par>
    <img src="june-1.jpg" region="pic1" id="img1" dur="4s"/>
    <img src="june-2.jpg" region="pic2" id="img2" begin="img1.end" dur="4s"/>
    <img src="june-3.jpg" region="pic3"      begin="img1.begin+2s"   end="img2.end" />
</par>

이벤트의 유형

scheduled event : 미디어 실행전에 시간 계산이 가능한 이벤트

positive & negative offset time 모두 사용 가능

interactive event : 사용자 또는 외부 입력(trigger)이 있어야 하는 경우

negative offset time 사용 불가

지원되는 이벤트 목록

	이벤트	이벤트유형	이벤트발생(trigger)
start or stop	ID.begin	scheduled(시간지정)	미디어 요소의 시작 (계획된 시각)
	ID.end	시간지정	미디어 요소의 종료
	ID.beginEvent	interactive	미디어 요소의 시작 (클릭, 실제시작)
	ID.endEvent	interactive	미디어 요소의 종료
repeat	ID.repeat(n)	시간지정	특정횟수 반복
repeat	ID.repeatEvent	interactive	매번 반복
mouse event	ID.activateEvent	interactive	마우스 클릭
	ID.inBoundsEvent	interactive	마우스가 요소 위로 이동
	ID.outOfBoundsEvent	interactive	마우스가 요소 밖으로 이동
keyboard event	accesskey(key)	interactive	키보드 누름
	ID.focusInEvent	interactive	키보드 초점 획득
	ID.focusOutEvent	interactive	키보드 초점 상실
advanced	ID.marker(name)	시간지정	마커
	ID.topLayoutOpenEvent	interactive/시간지정	윈도우 시작
	ID.topLayoutCloseEvent	interactive/시간지정	윈도우 종료
	ID.wallclock(time)	시간지정	외부 시간값

시작/종료 이벤트

예)

begin = "ID.end" : at the time when ID is scheduled to end.
end = "ID.begin - 5s" : at the time when ID is scheduled to begin - 5s
begin = "ID.beginEvent + 5s" : when ID actually begins
end = "ID.endEvent" : when ID actually begins

반복 이벤트

예)

begin = "ID.repeatEvent + 10s" : ID가 매번 반복되고 10초후 시작

begin = "ID.repeat(3)" : ID가 3번 반복된후 시작
end = "ID.repeat(2) - 5s" : ID가 2번 반복되기 5초전에 종료

<video src="v1.mpg" id="main" repeatCount="3" region="v_region" />
<img src="p1.jpg" region="img_reg" dur="20s" begin="main.repeat(2)" />

예제) 결과보기

<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
   . . .
   <par repeatCount="5">
      <img src="june-1.jpg" region="pic1" id="img1" fill="remove"
                                                   begin="0s" dur="2s" end="4s" />
      <img src="june-3.jpg" region="pic2" id="img2"   fill="remove"
                                                   begin="2s" dur="2s" end="4s" />
      <text src="pic1.txt" region="txt0" fill="remove"
                                                begin="0s" end="img1.repeatEvent" dur="1s" />
      <text src="pic22.txt" region="txt0" fill="remove"
                                                begin="2s" end="img1.repeatEvent+4s" dur="1s" />
   </par>

마우스 이벤트

예)

begin = "ID.activateEvent" : 미디어 요소를 클릭하여 활성화 시켰을 때
begin = "ID.inBoundsEvent" : 마우스 포인터가 미디어 위로 들어올 때
end = "ID.outOfBoundsEvent + 1s" : 마우스 포인터가 미디어 밖으로 나갈 때 + 1초

예제) 결과보기

   <region id="pic1" left="10" top="10" width="100" height="130" />
   <region id="pic2" left="90" top="30" width="100" height="135" />
   <region id="txt1" left="10" top="160" width="70" height="20" />
   <region id="txt2" left="90" top="170" width="70" height="20" />
...
  <par dur="indefinite">
    <text src="pic1.txt" region="txt1" begin="img1.activateEvent" dur="2s"/>
    <text src="pic2.txt" region="txt2" begin="img2.inBoundsEvent"
                                                       end="img2.outOfBoundsEvent" />
    <img src="june-1.jpg" region="pic1" id="img1"/>
    <img src="june-2.jpg" region="pic2" id="img2" begin="img1.begin+5s" />
  </par>

예제) 결과보기

  <region id="pic1" left="20" top="10" width="140" height="170" z-index="1" />
  <region id="pic3" left="60" top="30" width="130" height="160" z-index="2" />
...
  <par dur="indefinite">
    <img src="june-1.jpg" region="pic1" id="img1" left="5" top="5" >
        <set targetElement="pic1" attributeName="backgroundColor" to="red"
                     begin="img1.inBoundsEvent" end="img1.outOfBoundsEvent" />
        <set targetElement="pic1" attributeName="z-index" to="4"                      begin="img1.inBoundsEvent" end="img1.outOfBoundsEvent" />
    </img>
    <img src="june-3.jpg" region="pic3" id="img2" begin="img1.begin+3s" left="5" top="5" >
        <set targetElement="pic3" attributeName="backgroundColor" to="lime"
                     begin="img2.activateEvent" dur="3s"/>
    </img>
  </par>

키보드 이벤트

예)

begin = "accesskey(h)"
begin = "ID.focusInEvent + 2s"
end = "ID.focusOutEvent + 2s"

예제) 결과보기

  <par dur="indefinite">
    <img src="june-1.jpg" region="pic1" id="img1" left="5" top="5" >
        <set targetElement="pic1" attributeName="backgroundColor" to="red"
                     begin="accesskey(a)" dur="2s"  />
        <set targetElement="pic1" attributeName="z-index" to="4"                      begin="accesskey(a)" end="accesskey(a)" />
    </img>
    <img src="june-3.jpg" region="pic3" id="img2" begin="img1.begin+3s" left="5" top="5" >
        <set targetElement="pic3" attributeName="backgroundColor" to="lime"
                     begin="accesskey(1)" end="accesskey(2)" />
    </img>
  </par>