EMBED 태그의 모든것
카테고리 없음 2014. 3. 14. 13:40 |EMBED 태그의 모든것
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>로 재생 할 수 있습니다.
그러면 자주 쓰는 속성들을 살펴보겠습니다.
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이면 최대 오른쪽 입니다.
EMBED 태그의 모든것
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>로 재생 할 수 있습니다.
그러면 자주 쓰는 속성들을 살펴보겠습니다.
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>
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><*/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이면 최대 오른쪽 입니다.