Download presentation
Presentation is loading. Please wait.
1
SMIL
2
SMIL 이란? SMIL(Synchronized Multimedia Integration Language) 의 약자이며 멀티미디어 데이터의 동기적 표현을 위한 Markup Language임 Smile라고 발음 SMIL은 서로 다른 미디어 타입의 시간 및 공간을 동기적으로 표현 할 수 있게 해주는 매우 손쉬운 언어임 W3C에서 제안한 멀티미디어 표현의 표준임 현재 SMIL 버전2.0까지 나와있음
3
SMIL의 특징 XML 형식임 쉽고 편리함 웹상에 있는 자료를 이용할 수 있음 XML응용의 한 종류임
XML응용이지만 HTML처럼 태그와 Attribute의 종류가 적음으로 배우고 사용하기 쉽다 웹상에 있는 자료를 이용할 수 있음 미디어의 하이퍼링크 연결이 가능 연결된 미디어들은 동기적으로 제어 가능
4
smil의 일반 규칙 <smil>…</smil> head section은 선택임.
태그와 속성은 소문자를 사용해야 함 단독태그는 “/”를 사용해 종료해야 함 속성값은 “”안에 사용해야 함 smil파일의 확장자는 “smil”, “smi” 그외 HTML에 사용되는 커멘드 형식은 smil에 똑같이 적용됨
5
<meta……/> content name any value (적당한 값) abstract author (저자)
base (기본적으로 사용될 url주소) title (문서 제목) copyright (저작권자)
6
<root-layout …. />
보여질 문서의 크기와 배경색 설정 background-color HEX, Color명 (전체 화면의 배경색) height Pixel ( 문서의 세로 크기) weight Pixel ( 문서의 가로 크기)
7
<region……/> 미디어 클립의 위치영역과 이름을 설정 background-color
fit (배경색 표현의 형태) fill ,hidden, meet, slice height, weight, left, top (위치 지정) pixel , % id (미디어 클립영역의 이름을 부여) name z-index (overlapping 과 관련) number
8
<body>……</body> 1
Clip source Tag 미디어 클립의 삽입이나 정의시 사용 <animation…/> : Shockwave Flash File <audio…/> : Audio Clip File <image…/> : Image Clip File <ref…/> : 다른 용도의 문서 (.htm .rp) <text…/> : Text <textstream…/> : Text Stream (.rt) <video…/> : Video Clip (.rm)
9
<body> Attribute
abstract, author, copyright, title begin, end, clip-begin, clip-end, dur h, min, s, ms fill (재생 종료 후 상황) freeze, remove repeat (반복횟수) number src (미디어 클립의 위치 경로) url system-bitrate, system-language
10
<par>……</par>
태그안의 이미지클립을 동시에 재생함 미디어가 시작된 시점을 기준으로 함 abstract, author, copyright, title begin, end, dur id, repeat system-bitrate, system-language endsync (종료후 이동 위치) 종료후 보여줄 화면을 설정함 first, last, id(Clip id)
11
<seq>……</seq>
태그안에 순서대로 미디어를 재생함 앞선 미디어의 종료시점을 기준으로 함 begin, end, dur id, repeat system-bitrate system-language
12
SMIL 예제 1 (testSmil01.smi) <smil> <head> <layout>
<root-layout width="200" height="300" background-color="#FFFFDF"/> <region id="img1" top="0" left="0" width="100" height="100" /> <region id="img2" top="0" left="100" width="100" height="100" /> <region id="img3" top="100" left="0" width="100" height="100" /> <region id="img4" top="100" left="100" width="100" height="100" /> <region id=“textS" top="200" left="50" width="100" height="100" /> </layout> </head> <body> <par> <seq repeat="5"> <img region="img1" src="./exam.gif" dur="2s" /> <img region="img2" src="./exam.gif" dur="2s" /> <img region="img3" src="./exam.gif" dur="2s" /> <img region="img4" src="./exam.gif" dur="2s" /> </seq> <textstream region="textS" src="./rtexam2.rt" dur="10s" /> </par> </body> </smil>
13
<switch>…</switch>
사용자의 상황에 맞게 미디어를 재생할 수 있도록 해줌 id system-bitrate system-language system-screen-size (해상도) system-screen-depth (색상수) system-overdub-or-caption 더빙과 자막에 의하여 미디어를 선택하게 함
14
Image Source Tag Option
이미지에 링크나 명령을 삽입하기 위해 사용함 이 외에도 <a href…/> </a> , <anchor…/> 도 있음 bgcolor (이미지의 배경색) bitrate (bps, 전송률) target -browser, -player url command:play command:pause() command:seek(time) command:stop()
15
SMIL 예제 2 (testSmil02.smi) <smil> <head> <layout>
<root-layout width="200" height="300" background-color="#FFFDDF"/> <region id="img1" top="0" left="0" width="100" height="100" /> <region id="img2" top="0" left="100" width="100" height="100" /> <region id="img3" top="100" left="0" width="100" height="100" /> <region id="img4" top="100" left="100" width="100" height="100" /> <region id=“video1" top="200" left="50" width="100" height="100" /> </layout> </head> <body> <par> <img region="img1" src="./exam.gif?url=command:play()&target=_player" fill="freeze" /> <img region="img2" src="./exam.gif?url= fill="freeze"/> <img region="img3" src="./exam.gif?url=command:stop()&target=_player" fill="freeze"/> <img region="img4" src="./exam.gif?url=command:seek(0:05.4)&target=_player" fill="freeze"/> <video region="video1" src="./video.rm" dur="15s" fill="freeze"/> </par> </body> </smil>
16
<a>…</a>
다른 미디어와의 링크를 제공함 href (하이퍼 링크 경로) url show (새로운 링크의 플레이 방법) new (새로운 플레이어로 재생함) pause (현재 것은 일시 정지함) replace (현재의 것에 새로 플레이함)
17
<a>…</a> 의 사용예
미디어 클립에 링크를 건 예 <smil> ...... <par> <a href=" show="new"> <video region="vid1" src="rtsp://real.company.com/exam.rm"/> </a> </par> ..... </smil>
18
<anchor……/> 시간요소를 줘 링크를 할 수 있게 함 begin, end (링크의 발동시간을 줌)
coords (링크의 좌표 위치) left-x, top-y, right-x, bottom-y href (url의 경로)
19
SMIL 예제 3 (testSmil03.smi) <smil> <head> <layout>
<root-layout width="200" height="200" background-color="blue" /> <region id="img1" top="0" left="0" width="100" height="100" /> <region id="img2" top="100" left="100" width="100" height="100" /> </layout> </head> <body> <par> <img region="img1" src="./exam.gif" dur="30s" repeat="2"> <anchor href=" show="pause" coords="0,0,100,100" begin="3s" end="15s"/> </img> <img region="img2" src="./exam.gif" dur="45s" /> </par> </body> </smil>
20
참고 사이트 W3C 스마일 미디어 http://www.w3.org/TR/2000/WD-smil20-20000921/
Similar presentations
![HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기.](/40/11068626/big_thumb.jpg "HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기.>")
