컴.자료실

미디어 플레이어 꾸미기

영지니 2010. 3. 29. 18:37
 
 <Embed src="음악주소" ShowPositionControls="0" Volume="0" EnableContextMenu="0" showgotobar="0" showstatusbar="0" x-x-allowscriptaccess="never" AutoStart="1" PlayCount="0" width="160" height="26">
 
x-text/html; charset=iso-8859-1" invokeURLs="false" PlayCount="0" AutoStart="1" showstatusbar="0" showgotobar="0" EnableContextMenu="0" Volume="0" ShowPositionControls="0" parentResizeIframe(?cafe_main?) invokeURLS="false" x-x-allowscriptaccess="never" autostart="false">

 <Embed style="FILTER: gray()" src="음악주소" ShowPositionControls="0" Volume="0" EnableContextMenu="0" showgotobar="0" showstatusbar="0" x-x-allowscriptaccess="never" AutoStart="1" PlayCount="0" Width=160 Height=26>

 
x-text/html; charset=iso-8859-1" invokeURLs="false" PlayCount="0" AutoStart="1" showstatusbar="0" showgotobar="0" EnableContextMenu="0" Volume="0" ShowPositionControls="0" parentResizeIframe(?cafe_main?) invokeURLS="false" x-x-allowscriptaccess="never" autostart="false">
 <Embed style="FILTER: xray()" src="음악주소" ShowPositionControls="0" Volume="0" EnableContextMenu="0" showgotobar="0" showstatusbar="0" x-x-allowscriptaccess="never" AutoStart="1" PlayCount="0" Width=160 Height=26>
x-text/html; charset=iso-8859-1" invokeURLs="false" PlayCount="0" AutoStart="1" showstatusbar="0" showgotobar="0" EnableContextMenu="0" Volume="0" ShowPositionControls="0" parentResizeIframe(?cafe_main?) invokeURLS="false" x-x-allowscriptaccess="never" autostart="false">
 </FONT><FONT style="BACKGROUND-COLOR: #ff3300"><Embed style="FILTER: gray()alpha(opacity=35,style=1,finishopacity=35)" src="음악주소" ShowPositionControls="0" Volume="0" EnableContextMenu="0" showgotobar="0" showstatusbar="0" x-x-allowscriptaccess="never" AutoStart="1" PlayCount="0" Width="160" Height="26"></FONT>
x-text/html; charset=iso-8859-1" invokeURLs="false" PlayCount="0" AutoStart="1" showstatusbar="0" showgotobar="0" EnableContextMenu="0" Volume="0" ShowPositionControls="0" parentResizeIframe(?cafe_main?) invokeURLS="false" x-x-allowscriptaccess="never" autostart="false">
 </FONT><FONT style="BACKGROUND-COLOR: #ff6600"><Embed style="FILTER: gray()alpha(opacity=35,style=1,finishopacity=35)" src="음악주소" ShowPositionControls="0" Volume="0" EnableContextMenu="0" showgotobar="0" showstatusbar="0" x-x-allowscriptaccess="never" AutoStart="1" PlayCount="0" Width="160" Height="26"></FONT>
x-text/html; charset=iso-8859-1" invokeURLs="false" PlayCount="0" AutoStart="1" showstatusbar="0" showgotobar="0" EnableContextMenu="0" Volume="0" ShowPositionControls="0" parentResizeIframe(?cafe_main?) invokeURLS="false" x-x-allowscriptaccess="never" autostart="false">
 </FONT><FONT style="BACKGROUND-COLOR: #ffff00"><Embed style="FILTER: gray()alpha(opacity=35,style=1,finishopacity=35)" src="음악주소" ShowPositionControls="0" Volume="0" EnableContextMenu="0" showgotobar="0" showstatusbar="0" x-x-allowscriptaccess="never" AutoStart="1" PlayCount="0" Width="160" Height="26"></FONT>
x-text/html; charset=iso-8859-1" invokeURLs="false" PlayCount="0" AutoStart="1" showstatusbar="0" showgotobar="0" EnableContextMenu="0" Volume="0" ShowPositionControls="0" parentResizeIframe(?cafe_main?) invokeURLS="false" x-x-allowscriptaccess="never" autostart="false">
 </FONT><FONT style="BACKGROUND-COLOR: #00cc00"><Embed style="FILTER: gray()alpha(opacity=35,style=1,finishopacity=35)" src="음악주소" ShowPositionControls="0" Volume="0" EnableContextMenu="0" showgotobar="0" showstatusbar="0" x-x-allowscriptaccess="never" AutoStart="1" PlayCount="0" Width="160" Height="26"></FONT>
x-text/html; charset=iso-8859-1" invokeURLs="false" PlayCount="0" AutoStart="1" showstatusbar="0" showgotobar="0" EnableContextMenu="0" Volume="0" ShowPositionControls="0" parentResizeIframe(?cafe_main?) invokeURLS="false" x-x-allowscriptaccess="never" autostart="false">
 </FONT><FONT style="BACKGROUND-COLOR: #0000cc"><Embed style="FILTER: gray()alpha(opacity=35,style=1,finishopacity=35)" src="음악주소" ShowPositionControls="0" Volume="0" EnableContextMenu="0" showgotobar="0" showstatusbar="0" x-x-allowscriptaccess="never" AutoStart="1" PlayCount="0" Width="160" Height="26"></FONT>
x-text/html; charset=iso-8859-1" invokeURLs="false" PlayCount="0" AutoStart="1" showstatusbar="0" showgotobar="0" EnableContextMenu="0" Volume="0" ShowPositionControls="0" parentResizeIframe(?cafe_main?) invokeURLS="false" x-x-allowscriptaccess="never" autostart="false">
 </FONT><FONT style="BACKGROUND-COLOR: #000066"><Embed style="FILTER: gray()alpha(opacity=35,style=1,finishopacity=35)" src="음악주소" ShowPositionControls="0" Volume="0" EnableContextMenu="0" showgotobar="0" showstatusbar="0" x-x-allowscriptaccess="never" AutoStart="1" PlayCount="0" Width="160" Height="26"></FONT>
x-text/html; charset=iso-8859-1" invokeURLs="false" PlayCount="0" AutoStart="1" showstatusbar="0" showgotobar="0" EnableContextMenu="0" Volume="0" ShowPositionControls="0" parentResizeIframe(?cafe_main?) invokeURLS="false" x-x-allowscriptaccess="never" autostart="false">
 </FONT><FONT style="BACKGROUND-COLOR: #660066"><Embed style="FILTER: gray()alpha(opacity=35,style=1,finishopacity=35)" src="음악주소" ShowPositionControls="0" Volume="0" EnableContextMenu="0" showgotobar="0" showstatusbar="0" x-x-allowscriptaccess="never" AutoStart="1" PlayCount="0" Width="160" Height="26"></FONT>

 

 

음악만 재생하는 미디어플레이어의 색상을 바꿀 때(회색으로..)

<embed src=소스 style="FILTER:gray" volume="0">

 

회색말고 검은색으로 바꾸고 싶다면 gray 부분에 xray 라고 넣어주면 된다.

 

 동영상을 재생하는 미디어플레이어의 색상을 바꿀 때

<embed src=소스 invokeURLs="false"  width=250 height=250 volume="0" style="FILTER:gray" style="border:ridge 0">

이때 width는 가로, height는 세로의 사이즈 이다. 원하는 대로 조절해주면 된다.

그리고 style="border:ridge 0 에서 0을 높은 숫자로 바꿔줄수록 미디어플레이어의 바깥 테두리가 굵어진다.

 

 미디어 플레이어의 일부버튼만 보이게 하기
<embed src=소스  width="67" height="45" volume="0">

   (width=67)         (width=100)                (width=145)

width=가로, height=세로사이즈의 수치를 조정해 주면 원하는 크기를 얻을 수 있다.

 

 미디어 플레이어의 일부버튼만 보이게 하고 색상도 바꾸기

<embed src=소스  width="67" height="45" style="FILTER:gray" volume="0">

     

 

 재생, 정지, 음소거, 볼륨 버튼만 보이게 하기

<embed src=소스 invokeURLs="false" x-x-allowscriptaccess="never" style="FILTER:gray(); width=178px; height=45px" type="text/plain; charset=EUC-KR" ShowPositionControls="False" volume="0">

 

 곡정보 나타나게 하기

<embed src=소스 showstatusbar="true" style="FILTER:gray" volume="0">

 

 컨트롤바를 숨기고 음악정보만 표시하기

<embed src=소스 type=application/x-mplayer2 showstatusbar="true" showcontrols="false" volume="0">

 

 희미하게 표시하기

<embed invokeURLs=false x-x-allowscriptaccess="never" invokeURLS='false' style="FILTER: gray()alpha(opacity=35,style=1,finishopacity=35)" src=소스 Volume="0" loop="-1">
opacity, finishopacity 부분 수치에 따라 오른쪽과 왼쪽 희미해지는 농도가 달라진다.

             (opacity=10,style=1,finishopacity=80)

             (opacity=80,style=1,finishopacity=10)

 

 원하는 색깔로 표시하기

<FONT style="BACKGROUND-COLOR: 색깔"><embed invokeURLs=false x-x-allowscriptaccess="never" invokeURLS='false' style="FILTER: gray()alpha(opacity=35,style=1,finishopacity=35)" src=소스 volume="0" loop="-1">

색깔 부분에 RGB 색상코드를 넣어주면 된다. 색상코드 웹상에 많다.

아니면.. http://parangsaekr.com.ne.kr/rgb01.html

             http://parangsaekr.com.ne.kr/rgb05.html  ◀ 제가 주로 사용하는 곳임!

 

마찬가지로 opacity, finishopacity 부분 수치에 따라 오른쪽과 왼쪽 희미해지는 농도가 달라진다.

             (opacity=35,style=1,finishopacity=35)

             (opacity=20,style=1,finishopacity=80)

             (opacity=80,style=1,finishopacity=20)

 

* 회색이나 검정색처럼 완벽하게 플레이어 색깔을 바꾸는 방법은 아직 모르겠음!

   다만 이렇게 백그라운드 처리로 비슷하게 흉내내는 수밖에.. OTL

 

 테두리를 입히고 싶을 때

style="BORDER-RIGHT: #cecece 3px ridge; BORDER-TOP: #cecece 3px ridge; FILTER: invert(); BORDER-LEFT: #cecece 3px ridge; BORDER-BOTTOM: #cecece 3px ridge"

위 소스를 <>괄호 안에 넣어주면 된다.

px 앞에 붙은 숫자가 테두리 두께이다. 두껍게 바꾸고 싶으면 높은 숫자로..

동서남북 방향은 영어 보시면 아실테고..

 

 다른 형태..

<embed invokeURLs=false x-x-allowscriptaccess="never" invokeURLS='false' style="FILTER: invert()" src=소스 type=audio/x-ms-wax volume="0" loop="-1">

개인적으로 이쁘진 않지만 이런 색깔도 많이 보이길래 올려봄.

 

 재생되는 음악 연속듣기

<embed src=소스 volume="0" loop="-1" showstatusbar="true" enablecontextmenu="0">

 

 재생버튼을 눌러야만 재생되면서 연속듣기

<embed src=소스 volume="0" loop="-1" showstatusbar="true" >

 

 미디어플레이어가 안 보이면서 연속듣기(배경음악으로 사용할 때..)

<embed src=소스 volume="0" loop="-1" hidden=true >

 

 미디어플레이어가 안 보이면서 1회만 재생하기

<embed src=소스 volume="0" loop="1" hidden=true >

 

 미디어 플레이어가 보이지 않게 하기

<embed src=소스 volume="0"  width="1" height="1">

 

<태그 설명>

? /false : 자동 재생 기능 설정. true → on / false → OFF
? loop=횟수/true/false/infinite : 반복 횟수를 지정.

                                             1 → 1번 재생, 2 → 2번 재생

                                             true, -1, infinite → 무한 반복

                                             false → 한번만 재생

? enablecontextmenu=1/0 : 마우스 오른쪽버튼 클릭 허용/금지 설정.

? hidden=true/false : 미디어플레이어를 화면에 보여 줄 것인가 아닌가를 설정.

? showstatusbar=true/false : 하단의 음악 재생의 상태, 음악파일의 정보표시를 설정.

? showcontrols=true/false : 사용자가 제어할 수 있는 버튼들의 표시를 설정.

? showpositioncontrols= true/false : 이전곡, 다음곡 버튼 표시 설정.

? showaudiocontrols=true/false : 볼륨컨트롤의 표시 설정.

? showtracker= true/false : 현재 곡이 진행되고 있는 상황을 표시 하는 트랙바 표시 설정.

? volume=수치 : 볼륨의 값은 -10000 부터 0 까지, 0이 최대이다. 또한 balance라는 값을

                         통해서 왼쪽과 오른쪽의 스테레오에 대한 값을 줄 수 있다.

                         -10000이면 최대 왼쪽이고 10000이면 최대 오른쪽 이다.

 

 플래시 넣기

<embed src=소스 width="500" height="350" menu="false" quality="high" bgcolor="#FFFFFF"
swLiveConnect=true type="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">

 

 그림과 미디어플레이어 합치기

 

 

<예시 : 라스베가스의 야경 + MC몽 청춘>

 

1. 일단 올리고 싶은 이미지를 블로그의  를 이용해서 올려야 한다.

물론 인터넷에 있는 이미지의 주소를 가지고 와도 되지만 시간이 지나면서 이미지가 없어지는 경우가 많다. 때문에 가능하면 블로그 카테고리에서 이미지만 따로 넣어두는 비공개 메뉴를 하나 만드는 것도 좋은 방법이다.

 

2. 파일을 첨부하면 포스트 우측상단에 이미지 이름.gif 와 같이 나타난다.

여기서 마우스 오른쪽 버튼을 클릭하여 속성을 열어보면 주소(URL)가 나타난다.

이것을 복사해야 한다.

 

3. 밑에 있는 소스부분에서 " 이미지 소스" 부분에 방금 복사한 주소를 붙여넣기 한다.

 

<table border=0 bordercolor=white cellSpacing=0 cellPadding=0 width=400 height=180>
<TR>
<TD><img src=이미지 소스></TD>
</TR>
<TR>
<TD>
<embed invokeURLs="false" x-x-allowscriptaccess="never" style="FILTER: xray(); width:400px; height: 66px"
src=음악소스 width=400 height=28 type=audio/x-ms-wma showControls="true" volume="0"
loop="false" showtracker="true" showstatusbar="true"  enablecontextmenu="0">
</TD>
</TR>
</table>

 

4. 같은 방법으로 음악도 올리고 소스주소를 아래 "음악소스" 부분에 붙여넣기 해준다.

 

5. 완성된 소스를 <Ctrl + A>하여 전체선택 후 복사하여 태그연습장에 붙여넣고 "봅시다" or "결과보기" 를 눌러준다.(태그연습장은 인터넷에서 찾아봐도 되고, 귀찮으면 아래 두 곳 중 아무 곳에나 가서 하면 된다.)

 

*태그연습장 : http://myhome.naver.com/ktnami/html/namitest2.html

 

6. 그렇게 하면 완성된 걸 볼 수 있을 것이다.

이것을 마우스로 드래그 하던지, 아님 <Ctrl+A>해서 전체선택 후 복사를 하던지 해서 포스트에 붙여넣기하면 끝난다. 의외로 간단한 작업이다.

 

위 소스에서 붉은색 width, height 부분이 이미지의 가로와 세로의 사이즈를 정해주는 부분이다. 위에서는 400, 180 으로 설정되어 있으나 이것은 본인이 원하는 사이즈로 수정해 주면 된다.

 

그리고 초록색 width, height 부분은이 미디어플레이어의 가로와 세로의 사이즈를 조절하는 부분이다. 이부분 역시 본인이 원하는 사이즈로 수정해주면 되는데 여기서 이미지 가로사이즈와 미디어플레이어 가로사이즈의 크기가 수치가 같다고 정확히 일치하지 않을 때도 있다. 

러므로 이럴때는 임의적으로 맞춰줘야 한다