멀티미디어
DESCRIPTION
멀티미디어. 내용. 멀티미디어 배경음악 멀티미디어 삽입 객체 삽입 . 웹 페이지에서의 멀티미디어 활용. 이미지 , 사운드 , 동영상 등을 이용해서 다양한 웹 페이지를 구성 여러 가지 형식으로 정보를 전달 시선을 모으고 , 관심을 가질 수 있게 해 준다 플러그인 (Plug-in) 멀티미디어 파일을 웹 브라우저 자체 기능만으로 처리 못할 경우에 외부 뷰어를 연결 - PowerPoint PPT PresentationTRANSCRIPT
멀티미디어
내용
• 멀티미디어• 배경음악 <BGSOUND>• 멀티미디어 삽입 <EMBED>• 객체 삽입 <OBJECT>
웹 페이지에서의 멀티미디어 활용
• 이미지 , 사운드 , 동영상 등을 이용해서 다양한 웹 페이지를 구성• 여러 가지 형식으로 정보를 전달 시선을 모으고 , 관심을 가질 수
있게 해 준다• 플러그인 (Plug-in)
– 멀티미디어 파일을 웹 브라우저 자체 기능만으로 처리 못할 경우에 외부 뷰어를 연결
– 외부 뷰어는 통상 웹 브라우저에서 지원하지 않는 데이터 형식을 처리하기 위해 추가로 지원되는 프로그램
사운드
• Wave 파일 – 기본적인 사운드 파일 , 확장자가 wav – 파일의 크기가 커 길이가 짧은 음악이나 음성 , 음향 효과에 주로 사용
• Mp3 파일 – 비디오 압축에 사용되는 MPEG 압축 방식 - 사운드와 관련된 부분만 사용– 확장자는 mp3– Wave 파일을 1/10 정도로 압축 - 훌륭한 음질을 제공
• Real Audio – Real Network 사에서 만든 오디오 파일– 크기는 Wave 파일의 1/10 정도이나 음질은 mp3 에 비해 좋지 못함– 확장자는 ra, rm
• Wma – MicroSoft 사가 멀티미디어 압축 방식으로 음악 데이터만을 압축한 기술– 용량은 MP3 절반 정도이나 음질은 동일한 정도로 제공
사운드
• Midi 파일 – Musical Instrument Digital Interface 의 약어로 전자
악기간의 표준– 확장자는 mid 이다 . – 웹 브라우저에서 기본적으로 지원하는 파일이기 때문에
플러그인 없이 사용
동영상 ( 비디오 )
• Avi – Audio Video Interleaved 의 약자– 마이크로소프트사에서 만든 윈도우 프로그램 표준 동영상 형식– 동영상 파일 형식 중 가장 오래된 동영상 무비 파일로 확장자는
avi 이다 . – 윈도우 미디어 플레이어로 기본 재생된다 .
• MOV – 애플 (Apple) 사에서 만든 동영상 형식– 퀵타임 (QuickTime) 무비라고 한다 . – 확장자는 mov 이며 퀵타임 플러그인이 별도로 설치되어
있어야만 재생할 수 있다 .
동영상 ( 비디오 )
• MPEG – MPEG 은 mpg 혹은 mpeg 의 확장자를 가진다– 일반적인 동영상 파일을 압축률을 높여 압축하여 획기적으로
파일의 크기를 줄여 놓은 것– 대부분의 비디오 편집 시스템에서 이 파일의 출력을 지원– AVI 나 MOV 와는 달리 다양한 압축 형태의 파일을 지원– 윈도우 미디어 플레이어로 기본 재생된다 .
• WMV(ASF) – 마이크로소프트사가 개발한 스트리밍 오디오 /비디오 포맷
멀티미디어 압축 방식– 웹에서 실시간으로 비디오 및 오디오를 전송하기 위한 구조 – 보통 파일을 내려 받아 재생하거나 스트리밍하는데 사용되며 이
둘의 차이점은 비디오 코덱 (Codec) 이 v3 일 경우 ASF 가 되고 v8 일 경우 WMV 가 되는 것만 다르다 .
플래시
• 벡터 기반의 애니메이션을 만들 수 있다 . • 용량이 작다 . • 스트리밍 (Streaming) 을 지원하여 실시간 전송이 가능하다 . • 상호대화적인 애니메이션의 제작이 가능하다 . • 뛰어난 호환성과 확장성을 가지고 있다 .
배경음악 <BGSOUND>
• BackGround Sound 의 약자 , 웹 페이지의 배경에 사운드를 삽입• 웹 브라우저 화면에는 배경 음악에 대한 정보나 배경 음악을 조절할
수 있는 컨트롤 박스 등이 보이지 않고 음악만이 흘러나온다 • 재생 가능한 음악 파일의 종류가 제한적 , 인터넷 익스플로러에서만
사용 가능하다• 형식
• 예
<BGSOUND 속성 =“ 속성값” >
속성 예 설명
srcsrc="bg1.wav" 속성값으로 주어진 파일명의 배경 음악이 연주된다 .
loop loop="3“반복 연주 횟수를 지정한다 . 속성 값으로 infinite 를 지정하면 무한 반복된다 .
<BGSOUND src="bebe.wav" loop="1">
예제 : <BGSOUND> 태그
1
2
3
4
<BODY>
<BGSOUND src="street.mp3" loop="3">
<IMG src="back1.jpg">
</BODY>
멀티미디어 삽입 <EMBED>
• “ 끼어 넣다”라는 의미를 가지고 있는 <EMBED> 태그는 웹 문서에 멀티미디어 요소를 삽입할 때 사용하는 가장 기본 태그이다 .
• <EMBED> 태그를 사용하여 멀티미디어 요소를 삽입할 때는 반드시 해당 파일을 플레이시킬 수 있는 플러그인을 필요로 한다 .
• 형식
<EMBED 속성 =“ 속성값” >
속성 예 설명
srcsrc="newyork.avi"
멀티미디어 파일의 경로 및 파일명을 지정한다 .
volume volume="10" 음량을 지정한다 .width width="200" 컨트롤 박스의 폭을 지정한다 .height height="100" 컨트롤 박스의 높이를 지정한다 .
autostartautostart = "true"
자동으로 연주를 시작한다 . 자동으로 연주하지 않으려면 "false" 로 준다 .
hidden hidden="true"컨트롤 박스를 보이지 않게 한다 . 보이게 하려면 “false" 로 지정하거나 이 속성을 사용하지 않는다 .
<EMBED> 태그 사용 예
• 웹 페이지가 열리자마자 자동으로 "30" 의 음량으로 "maria.midi" 음악 파일이 연주
• 컨트롤 상자가 표시되므로 중간에 음량을 조절할 수 있다 .
• 실행결과
<EMBED src="maria.midi" volume="30">
예제 : <EMBED> 태그
1
2
3
4
<BODY>
<IMG src="back1.jpg"> <BR><BR><BR>
<EMBED src="sound4.mp3" autostart="true" volume="10"
loop="true">
</BODY>
<EMBED> 태그로 동영상 삽입• 컨트롤 박스와 함께 동영상 화면이 브라우저에 표시• 사운드와는 달리 width 와 height 를 지정해 주는 것이 좋다 .• 화면에 표시할 영상의 크기를 고려해서 지정• hidden 속성을 “ true” 로 지정하면 컨트롤 버튼뿐만 아니라
동영상도 같이 보이지 않게 되므로 주의• 예
<EMBED src="mystory.avi" autostart=true width="400" height="350"
loop=false>
<EMBED> 태그로 플래시 무비 삽입• 사운드나 동영상과는 달리 컨트롤 박스가 보이지 않고 플래시
화면만 보인다 .• 플래시 무비 삽입 시 추가 속성
속성 예 설명
pluginspage
pluginspage="url"
플래시 플러그인 버전이 낮은 경우 지정된 url 에서 새로운 버전의 Macromedia Flash Player 를 자동으로 다운로드하여 설치할 수 있다
quality quality="high"플래시 무비의 품질을 지정 , 속성값으로 high 와 low 가 있다 .
<EMBED src="summer.swf" width="400" height="350“ quality="high“
pluginspage=http://www.macromedia.com/shockwave/download/index.cgi
?
P1_Prod_Version=ShockwaveFlash“ type="application/x-shockwave-
flash">
</EMBED>
객체 삽입 <OBJECT>
• <EMBED> 태그와 마찬가지로 다양한 멀티미디어 개체를 삽입• 인터넷 익스플로러를 비롯하여 한정된 웹 브라우저에서만 인식할 수
있는 태그• 실행할 멀티미디어 파일의 URL 과 파일을 컨트롤하기 위한
속성들은 <OBJECT> 태그 내 <PARAM> 태그에 작성한다 . • 형식
<OBJECT 속성 = 속성값“ > <PARAM name=“ 값” value=" 값“ > ..................... <PARAM name=“ 값” value=" 값“ > <EMBED 속성 =“ 속성값” ></EMBED></OBJECT>
<OBJECT> 태그의 형식
• 형식
• 클래스 아이디는 멀티미디어 종류에 따라 이미 지정된 값이 있다 .– 음악 , 동영상 파일의 경우 : "clsid:22D6F312-B0F6-11D0-
94AB-0080C74C7E95“– 플래시 무비인 경우 : "clsid:d27cdb6e-ae6d-11cf-96b8-
444553540000" 이다 .
<OBJECT classid=" 클래스 아이디“ width=" 플레이어 폭” height=" 플레이어 길이” > 속성 예 설명
classid classid="XXX" 멀티미디어 개체에 따른 플레이어를 지정
width width="300“ 멀티미디어 개체가 웹 브라우저에 보일 폭을 지정
height height="400" 멀티미디어 개체가 웹 브라우저에 보일 길이를 지정
<PARAM> 태그 형식
• 재생구간을 보여주는 트레커나 , 화면 비율 제어 , 자동실행 등 멀티미디어 파일을 조금 더 상세하게 컨트롤
• <OBJECT> 태그 내에서 여러 번 사용할 수 있다 . • 형식
<PARAM name=“ 값” value=" 값“ >name 값 value 값 설명
filenamevalue="URL"
오디오 및 비디오 파일의 경로와 파일명을 지정
movievalue="URL"
플래시 파일의 경로와 파일명을 지정
AutoSize value="true"화면의 비율을 자동으로 제어할 것인지 (true), 아닌지(false) 를 제어 .
AutoStart value="true" 플레이어창이 뜨면서 자동실행 여부ClickToPlay value="true" 동영상을 재생할 때 화면을 클릭하면 일시 정지
ShowAudioControls
value="true"플레이어 우측의 볼륨 조절기능과 음소거 기능을 제어 . false 로 지 정하면 플레이 어에서 볼륨 조정과 음소거 조절하는 부분이 사라진다 .
ShowControls value="true" 플레이어가 보이지 않게 할 때 지정
ShowStatusBar value="true"플레이어 아래에 버퍼링과 남은시간 /총시간을 보여주는 정보창을 제어
ShowTracker value="true" 재생 구간을 보여주는 트랙커를 제어하는 기능
예제 : <OBJECT> 태그1
2
3
4
5
6
7
8
9
10
11
12
13
14
<OBJECT classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
width="300" height="250">
<PARAM name="Filename" value="clock.avi">
<PARAM name="AutoStart" value="true">
<PARAM name="EnableContextMenu" value="false">
<PARAM name="ShowControls" value="true">
<PARAM name="ShowAudioControls" value="true">
<PARAM name="ShowDisplay" value="false">
<PARAM name="ShowTracker" value="true">
<PARAM name="ShowStatusBar" value="true">
<PARAM name="ShowCaptioning" value="false">
<EMBED src="clock.avi" width="300" height="250" autostart="true" >
</EMBED>
</OBJECT>
<H2 align="center">[ 해리포터와 비밀의 방 ]</H2>
<P align="left"> 덤블도어 교수가 ..............
연습문제
1. 다음의 파일 확장자 중 인터넷에서 통용되는 오디오 파일의 형식이 아닌 것은 ?
① wav② ra③ asf④ wmd
2. HTML 문서에 멀티미디어 객체를 삽입하여 나타내려고 한다 . 다음 태그들 중 적합한 것은 무엇인가 ?
① <IMG>② <INPUT>③ <FORM>④ <EMBED>
연습문제
3. 웹 페이지가 열리자마자 배경에 음악이 흘러나오게 하려고 한다 . 특별한 표시 없이 음악만 나오게 하려면 어떤 태그가 적당한가 ?
① <BGSOUND>② <BODY BackgroundSound>③ <SOUND>④ <OBJ>
4. 인터넷에 사용할 수 있는 동영상 파일 형식이 아닌 것은 무엇인가 ?① AVI② MOV③ MPG④ WMA