컴퓨터상식

EMBED 태그의 모든것

청담 일취월장 2011. 2. 23. 13:43

<EMBED> 태그의 속성 정리
1. SRC
SRC 속성은 원본을 의미하는 'source' 라는 의미의 속성이 되겠습니다.
이곳에는 원본 미디어 파일의 주소(URL)가 들어가게 됩니다.
만약 동영상이나 플래시 파일이 제대로 실행되지 않고 멈추어 있다면,
제일 먼저 이곳(SRC)의 링크에 이상이 있는 것은 아닌가~ 확인을 해보셔야 합니다.
2. WIDTH, HEIGHT
모든 태그에서 거의 공통적으로 사용하는, 넓이와 높이의 WIDTH 와 HEIGHT 는
더이상 설명드리지 않아도 충분히 잘 알고 계실 것이라고 생각합니다.
이 속성들은 미디어 파일이 화면에 나타나는 크기를 의미합니다.
(단위가 픽셀(Pixel) 이라는 것. 노파심에 다시 한번 살짝 말씀드려 봅니다.)
3. LOOP
'반복할지의 여부' 를 의미하는 LOOP 속성은 해당 미디어 파일이 연속적으로
실행되게 할지, 아니면 단 한 번만 실행되게 할지를 결정하는 속성입니다.
만약 여기에 TRUE 또는 1 이라는 값을 넣으면 끊임 없이 무한정 반복되며,
FALSE 또는 0 의 값을 넣게 되면 단 한 번만 실행하고 멈추게 됩니다.
참고로 이 속성을 지정하지 않았을 때의 기본값은 FALSE 입니다.

또 한가지.. 만약 LOOP 속성에 0이 아닌 다른 숫자를 넣으시면 MARQUEE 태그처럼
그 숫자만큼 적용되는 것이 아니고 무한 반복됩니다. 혼동하시면 안되겠지요?
4. AUTOSTART
이 속성은 말 그대로 '자동으로 시작되게 할 것인지' 의 여부를 결정합니다.
LOOP 와 마찬가지로 TRUE 나 1 의 값을 넣으면 자동으로 미디어 파일이 실행되며,
FALSE 나 0 의 값을 넣으면 시작 버튼을 누르기 전까지는 실행이 되지 않습니다.
그리고, 이 속성 값을 지정하지 않았을 때의 기본값은 TRUE 입니다.
따라서 이 속성 값이 없는 경우에는 해당 미디어 파일이 자동적으로 실행 됩니다.
5. HIDDEN
HIDDEN 속성은 이 미디어 파일을 보여줄 것인지 숨길 것인지를 결정합니다.
예를 들어 동영상의 경우, 영상을 숨기고 소리만 들려주고 싶다던가..
여러가지 이유로 화면을 숨기고 싶을 때 이 속성에 TRUE 값을 적용합니다.
(이때는 1의 값을 적용하면 안되는 것 같더군요. TRUE 를 사용하실 것을 권장합니다.)
보여주고 싶다면 이 속성의 값에 FALSE 를 사용하시면 되지만, 이 속성의 기본 값이 FALSE 이기에 굳이 이 값은 넣어주지 않아도 무방할 것 같습니다.
6. VOLUME
미디어 파일의 소리(볼륨)의 크기를 지정합니다.
최대 크기의 볼륨으로 동영상을 감상하고 싶다면 이 속성에 0 값을 지정하면 되고,
마이너스 값이 점점 커질수록 볼륨의 크기는 점점 줄어들게 됩니다.
(제가 제 컴퓨터에서 Windows Media Player 9 로 테스트 해본 결과로는
0 이 최대의 볼륨이고, -3400 정도가 최소의 볼륨인 것 같습니다만.. 뭐, 이 결과는
환경에 따라 달라질 수 있으니까요. 최대 볼륨이 0 이라는 것만 기억하시기 바랍니다.)
만약 이 속성에 양의 정수 값을 입력하면 볼륨은 절반 정도로 자동 조절됩니다.
또한 이 속성 값을 지정하지 않았을 때에도 볼륨은 절반 정도가 되는 것 같습니다.
7. MUTE
MUTE. 즉, '음소거' 라는 기능을 여러분들께서는 잘 아실겁니다.
(TV 리모콘을 자주 만지는 분이시라면 더더욱 잘 아실 것 같습니다.)
이 속성은 말 그대로 '완전히 소리를 나오지 않게 하는' 속성인데요.
이 속성 값에 TRUE 또는 1 의 값을 입력하면 '음소거' 된 상태로 재생이 되고,
FALSE 또는 0 의 값을 입력하면 정상 볼륨으로 파일이 재생됩니다.
물론 이 속성의 기본값은 FALSE 입니다. 소리는 정상적으로 나오게 되지요.
8. PLUGINSPAGE
HTML 페이지에서 EMBED 태그는 멀티미디어 파일을 끼워넣기 위한 태그이며,
플러그인 프로그램이 설치되어 있어야만 파일이 실행된다는 말씀을 위에서 드렸는데요.
플러그인 프로그램이 설치되어 있지 않은 사용자들을 위하여 그 플러그인 프로그램을 설치할 수 있도록 해당 플러그인을 제공하는 사이트의 주소(URL)를 알려주는 속성이 바로 이 PLUGINSPAGE 속성이 되겠습니다.
즉, 이 속성은 플러그인 프로그램이 설치되어 있지 않은 사람들을 위한 속성입니다.
9. SHOWCONTROLS
이 속성은 동영상을 실행할 때 아래 그림과 같은 재생, 멈춤, 볼륨 조절 등의
컨트롤 패널을 보여줄 것인지를 결정하는 속성입니다..

 
http://www.dukyoung.net/pds/lecture/html/09/control.gif

이 속성에 TRUE 또는 1 의 값이 들어가면 이 컨트롤이 보여지게 되며,
FALSE 또는 0 의 값이 들어가게 되면 컨트롤은 사라집니다.
(대신 이 컨트롤의 크기만큼 화면의 크기가 늘어나게 됩니다.)
이 속성의 기본값은 TRUE 이므로, 기본적으로 이 컨트롤은 보여지게 됩니다.
10. SHOWSTATUSBAR
SHOWSTATUSBAR 속성은 동영상을 실행하는 경우에 아래 그림과 같은 상태창이
보여지게 할 것인지 아닌지
를 결정하는 속성입니다.

 

 

http://www.dukyoung.net/pds/lecture/html/09/statusbar.gif

 


이 속성에 TRUE 또는 1 의 값이 들어가면 상태창이 보여지게 되며,
FALSE 또는 0 의 값이 들어가게 되면 상태창은 보여지지 않게 됩니다.
이 속성의 기본값은 FALSE 이므로 기본적으로 상태창은 보여지지 않습니다.


지금까지 말씀드린 속성들이 EMBED 태그를 사용할 때 유용하게 사용되는 속성들입니다.
물론 이 외에도 많은 속성들이 있습니다만, 위의 속성들만큼 자주 쓰이지는 않는 것 같습니다.
(더 많은 속성들이 궁금하시면 관련 서적이나 사이트들을 참고하시기 바랍니다.)

참고삼아 말씀드리자면.. 위에서 설명드린 속성은 대부분 동영상에 관련된 속성들입니다.
플래시와 관련된 속성들은 보통 SRC WIDTH, HEIGHT 속성 정도를 사용합니다.
(물론 태그 사용 방법은 동영상의 경우와 같기에 설명은 하지 않도록 하겠습니다.) 



클럽이나 카페 등을 돌아다니다가 재미있는 동영상 또는 플래시 파일들을 발견하고는
'이 미디어 파일들을 내 홈페이지나 클럽으로 옮겨 놓을 수 있었으면 좋겠다' 라는 생각.
웹서핑을 즐기는 분들이시라면 누구나 한번쯤은 해보게 될 것 같은데요.

그런 경우 다음과 같은 순서대로 하시면 쉽게 목적을 달성하실 수 있을 것 같습니다.

1. 해당 페이지에서 마우스 오른쪽 버튼을 누른 후, ' 소스보기 ' 메뉴를 선택한다.
2. 그 페이지의 소스가 메모장에서 열리는 것을 확인한다.
3. ' F3 ' 버튼, 또는 ' Ctrl+F' 버튼을 눌러 찾아보기 창을 띄운다.
4. 그 창에 ' EMBED ' 라는 문장을 입력한 후 ' 다음 찾기' 버튼을 클릭한다.
5. 검색된 부분의 소스를 복사 해서 내가 원하는 페이지로 옮겨온다.

동영상이나 플래시 파일의 경우, 거의 대부분의 경우 EMBED 태그를 사용하기 때문에
EMBED 태그만 잘 알고 계시면 여러분이 원하시는 페이지로 쉽게 옮기실 수 있을 것입니다.
(물론 EMBED 외에 다른 방법이 전혀 없는 것은 아닙니다만, 가장 일반적인 방법이므로
대부분의 경우에는 어렵지 않게 원하시는 소스를 얻으실 수 있을 것입니다.)

자, 그러면 EMBED 태그를 이용한 동영상 하나를 감상하시면서
좋은 하루 보내세요. 다음에 또 뵙도록 하겠습니다. ^^

- 시작 버튼을 누르시면 동영상이 실행됩니다. (두번째 등장하는 인물에 주목하세요.)

<EMBED src=http://www.dukyoung.net/pds/pds/kolla.wmv width=400 height=300 type="video/x-ms-wmv" VOLUME="0" AUTOSTART="0" SHOWSTATUSBAR="1"></EMBED>



위 예제에 대한 소스
<CENTER>
<EMBED SRC=http://www.dukyoung.net/pds/pds/kolla.wmv
WIDTH=400 HEIGHT=300 AUTOSTART=0 VOLUME=0 SHOWSTATUSBAR=1>
</EMBED>
</CENTER>

 

 

 

embed 태그를 음악을 재생하는 전용 태그로 잘못 알고 계신 분이 많습니다. 하지만, embed 태그는 음악만을 위한 것이 아닙니다. embed 라는 사전적 의미가 '끼워넣다' 이죠. 말 그대로 문서에 끼워넣는 것입니다. 음악, 동영상, 플래쉬 파일 등을 말이죠.

예를 들어 유명한 '감기송' 플래쉬 애니메이션을 게시판에 올리려고 하면
<*EMBED src=감기송주소.swf width=500 height=400><*/EMBED>
식으로 올리시죠??

사실 정확히 따지고 보면 저렇게 하면 안됩니다. ^^;

만약 flash plug-in을 설치 안하신 분이 계시다면 못 보는거죠.
그런데, 왜 저렇게만 올려도 플래쉬 에니메이션을 볼 수 있을까요??
"감기송주소.swf"라는 파일에 header에 파일에 대한 정보가 있습니다.

이 파일은 플래쉬 파일입니다~~ 하고 알려주는 것이 있습니다.
그래서 embed 태그로 끼워넣기만 하면 익스플로러 브라우저가 알아서 플래쉬라고 인식을 하고 작동을

하는거죠.


음악도 마찬가지입니다. 보통 embed로 음악을 재생하는 확장자는 wma, asf, mp3, 등이 있고...푸키뮤직의 경우는 확장자가 tm$입니다. 그러나, 푸키뮤직에서 임의의 확장자로 만든 것이지 속성자체는 wma를 divx로 코딩한 것입니다.
그러니, 확장자를 자신이 맘대로 고친다고 해서 ogg가 wma가 될 수는 절대 없습니다.
이런 일반적인 음악화일들을 재생시켜주는게 뭐가 있을까요?? 그렇습니다. 윈도우만 깔면 억지로 지우지만 않으면 누구나 깔려있는 medai player 입니다.
그러니 음악파일을 embed로 재생시키면 웹 브라우저(이하 익스플로러와 동일 취급하겠습니다.)에서 미디어플레이어로 재생을 시켜주는거죠.

그러면 embed 태그 뒤에 붙이는 여러 속성들은 당연히 미디어플레이어 오브젝트의 속성들을 붙여주면 되는거죠. ^^
미디어플레이어의 속성들은 MSDN(Microsoft Developed Netword)을 참고 하시면 됩니다.

기본적으로 사용할 소스는 Amazing Christmax에서 "Have Yourself Amazing A Merry Little Christmas - 이승철" 로 하겠습니다. Muzcast의 mp3 파일입니다. 혹시 mp3와 Windows Media Player가 연결이 안된 사용자를 위해서 <*embed> 태그로 재생할 mp3를 Windows Mediap Player로 연결 시키는 것을 추가 하겠습니다.

type="application/x-mplayer2"

위의 속성을 추가해주시면 됩니다. 마찬가지로 사용자가 ogg plug-in을 가지고 있다면 ogg도 위와 같이 type 속성을 넣어줌으로서 <*embed>로 재생 할 수 있습니다.

그러면 자주 쓰는 속성들을 살펴보겠습니다.

먼저, 플레이어의 모양을 결정하는 태그입니다.

 

style="filter: xray() alpha(style=2, opacity=100, finishopacity=0)"

style="filter: gray() alpha(style=2, opacity=100, finishopacity=0)"

gray(): 플레이어를 그레이톤으로.

alpha(): 플레이어를 투명하게.

style: 1(직선), 2(원형), 3(대각선) 등이 있음.

opacity: 불투명도, 100이면 전혀 투명하지 않음. 0 ~ 100.

finishopacity: 경계부분의 불투명도, 0 ~ 100.



1. 반복하기
<*embed src="mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3" type="application/x-mplayer2" loop=true><*/embed>

<EMBED src=mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3 type=application/x-mplayer2 loop="true"></EMBED>  

loop=true, loop=-1, loop=infinity 를 넣어 주시면 무한 반복이 됩니다. 하지만 때로는 원하는 수 만큼 반복하고 싶을때가 있죠. 그럴때는 loop=3 식으로 원하는 회수를 넣어주시면 됩니다.



2. 자동재생 안하기
<*embed src="mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3" type="application/x-mplayer2" autostart=false><*/embed>
  
<EMBED src=mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3 type=application/x-mplayer2 autostart="false"></EMBED>

autostart= false 를 넣으시면 로딩 되었을때 바로 노래를 시작 안하고 사용자가 재생버튼을 눌러야 재생을 시작합니다. 기본값은 autostart= true 입니다.



3. 상태바 보이기
<*embed src="mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3" type="application/x-mplayer2" autostart="false" showstatusbar="true"><*/embed>
  
<EMBED src=mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3 type=application/x-mplayer2 autostart="false" showstatusbar="true"></EMBED>

showstatusbar=true 를 넣게 되시면 왼쪽 예제에서 처럼 하단에 현재의 상태를 보여줍니다. 현재 정지된 상태라서 '정지'라고 표시되습니다. 음악 재생의 상태 뿐 아니라 음악파일에 정보가 있다면 삽입된 정보도 보여줍니다. 특별히 지정을 안할 경우 기본값은 false 입니다.



4. 콘트롤 바 숨기기
<*embed src="mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3" type="application/x-mplayer2" autostart="false" showstatusbar="true" showcontrols="false"><*/embed>
  
<EMBED src=mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3 type=application/x-mplayer2 autostart="false" showstatusbar="true" showcontrols="false"></EMBED>

showcontrols= false 를 넣으시게 되면 예제에서처럼 상용자가 제어할 수 있는 버튼들이 몽땅 없어집니다. ^^; 어디에 쓰일까 하시겠지만, 예제처럼 상태바만 보인다던지 혹은 뮤직비디오를 콘트를 바 없이 보이면 꽤 괜찮습니다.



5. 볼륨 콘트롤 감추기
<*embed src="mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3" type="application/x-mplayer2" autostart="false" showaudiocontrols="false"><*/embed>
  
<EMBED src=mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3 type=application/x-mplayer2 autostart="false" showaudiocontrols="false"></EMBED>

사용자가 볼륨 조절을 못하도록 불륨 콘트롤을 감추는 것입니다. showaudiocontrols= false 를 넣으시면 됩니다.



6. 이전곡, 다음곡 버튼(Position Control) 감추기
<*embed src="mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3" type="application/x-mplayer2" autostart="false" showpositioncontrols="false"><*/embed>
  
<EMBED src=mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3 type=application/x-mplayer2 autostart="false" showpositioncontrols="false"></EMBED>

사용자가 강제적으로 다음 혹은 이전 곡으로 넘어가는걸 방지 하기 위해서 쓰이겠죠. 멈출거 아니면 무조건 끝까지 들어라~ 하는거죠 뭐. showpositioncontrols= false 를 넣어주시면 됩니다.



7. 트랙바 감추기
<*embed src="mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3" type="application/x-mplayer2" autostart="false" showtracker="false"><*/embed>
  
<EMBED src=mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3 type=application/x-mplayer2 autostart="false" showtracker="false"></EMBED>

현재 곡이 진행되고 있는 상황을 표시 하는 혹은 사용자가 임의로 원하는 곳으로 이동할 수 있게 끔 해주는 트랙바를 감췄습니다. showtracker= false 를 넣어주시면 됩니다



8. 응용하기
<*embed src="mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3" type="application/x-mplayer2" autostart="false" showstatusbar="true" showaudiocontrols="false" showpositioncontrols="false" showtracker="false"><*/embed>

<EMBED src=mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3 type=application/x-mplayer2 autostart="false" showstatusbar="true" showaudiocontrols="false" showpositioncontrols="false" showtracker="false"></EMBED>

모든 옵션들은 서로 중복이 가능합니다. 그럼로 예제에서처럼 상태바를 보이면서 오디오콘트를을 감추고 포지션 콘트롤도 감추고 트랙바도 감추는걸 중복해서 쓸 수 있습니다.



9. 볼륨 및 기타
<*embed src="mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3" type="application/x-mplayer2" autostart="false" volume="0" balance="10000" ><*/embed>

<EMBED src=mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3 type=application/x-mplayer2 autostart="false" volume="0" balance="10000"></EMBED>

볼륨의 값은 -10000 부터 0 까지, 0이 최대입니다. 기본 값은 -6000 입니다. 초절정의 섬세한 불륨을 조절 할 수 있습니다/
또한 balance라는 값을 통해서 왼쪽과 오른쪽의 스테레오에 대한 값을 줄 수 있습니다. -10000이면 최대 왼쪽이고 10000이면 최대 오른쪽 입니다.