OBJECT 레이어를 올리는 방법



프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[HTML] OBJECT 레이어를 올리는 방법

2011.04.15
//-------------------------------------------------------

요게 중요한거임 . 적어도 나한테는..

<param name="Movie" value="button.swf">
<param name="Play" value="true">
<param name="Loop" value="true">
<param name="Quality" value="High">
<param name="_cx" value="5080">
<param name="_cy" value="5080">
<param name="Src" value="button.swf">
<param name="WMode" value="Transparent"><!--투명-->
<param name="Menu" value="true">
<param name="AllowScriptAccess" value="always">
<param name="Scale" value="ShowAll">
<param name="DeviceFont" value="false">
<param name="EmbedMovie" value="false">
<param name="SeamlessTabbing" value="false">

z레이어를 올리는 방법
[PARAM NAME=wmode VALUE=transparent]
이렇게 설정하셔야 투명으로 보여서 아래 부분이 보이게 됩니다.^^

--------------------------------------------------------//

<OBJECT classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="300">
<PARAM NAME="Filename" VALUE="음악 파일 경로">
<param name="ClickToPlay" value="true">
<param name="AutoSize" value="true">
<param name="AutoStart" value="true">
<param name="ShowControls" value="true">
<param name="ShowAudioControls" value="true">
<param name="ShowDisplay" value="false">
<param name="ShowTracker" value="true">
<param name="ShowStatusBar" value="false">
<param name="EnableContextMenu" value="false">
<param name="ShowPositionControls" value="false">
<param name="ShowCaptioning" value="false">
<param name="AutoRewind" value="true">
<param name="Enabled" value="true">
<param name="EnablePositionControls" value="true">
<param name="EnableTracker" value="true">
<param name="PlayCount" value="1">
<param name="SendWarningEvents" value="true">
<param name="SendErrorEvents" value="true">
<param name="SendKeyboardEvents" value="false">
<param name="SendMouseClickEvents" value="false">
<param name="SendMouseMoveEvents" value="false">
<param name="ShowGotoBar" value="false">
<param name="TransparentAtStart" value="false">
<param name="Volume" value="0">
</OBJECT>

윈도미디어플레이어로 음악을 재생시키기 위해 흔히들 사용하시는 소스입니다.
이 소스에 보시면 PARAM속성이 많이 지정이 되어 있는데...
이 속성의 역할과 활용에 대해 간단히 알아보면..


<PARAM NAME="Filename" VALUE="음악 파일 경로">
이 부분에서 음악 파일 경로를 삽입하고,
밑부분의 <param name> 부분은 기능을 제어하는 태그입니다.
만약 링크 못가져가게 마우스 우측 클릭 후 나타나는 정보창을 막고자 한다면,
<param name="EnableContextMenu" value="false">
이 부분에서 value 값을 true 혹은 false 로 지정하면서 제어할 수 있습니다.
보기와 같이 false로 지정하면 우측 클릭을 해도 반응을 하지 않습니다.
유용하게 쓰이겠죠? ^^
이제 하나하나의 기능을 살펴보기로 할까요?

<param name="ClickToPlay" value="true">
: 동영상 등을 재생할때 화면을 클릭하면 일시 정지되거나 다시 재생하는 기능을 제어하는 기능입니다. true / false로 제어합니다.

<param name="AutoSize" value="true">
: 화면의 비율을 자동으로 제어할 것인지, 말 것인지를 제어하는 기능입니다.
true로 해 놓으면 원래 정해진 화면 비율로 자동으로 재생됩니다.

<param name="AutoStart" value="true">
: 플레이어창이 뜨면서 자동실행 여부, 즉 autostart와 같은 기능입니다. false로 해놓으면 재생 버튼을 클릭해야 플레이 됩니다.

<param name="ShowControls" value="true">
: 이것 역시 저번 시간에 알아보았던 hidden 태그와 같은 기능으로 false로 지정시 미디어 콘트롤러가 보이지 않게 됩니다.

<param name="ShowAudioControls" value="true">
: 이 기능은 미디어 플레이어 우측의 볼륨 조절기능과 음소거 기능을 제어하는 기능입니다.
false로 지정하시면 볼륨 조정과 음소거 기능이 사라집니다.

<param name="ShowDisplay" value="false">
: 이 부분은 콘트롤러 아래에 음악이나 동영상 파일의 정보를 출력할 것인가 말것인가를 제어하는 부분입니다.
true로 해 놓을 경우 아래에 쇼, 클립, 만든이, 저작권 등의 기능이 출력됩니다.

<param name="ShowTracker" value="true">
: 재생 구간을 보여주는, 재생이 되면서 옆으로 움직이는 부분, 트랙커를 제어하는 기능입니다.
이 부분을 움직여서 원하는 부분만을 들을 수도 있지요.
false로 지정시 트랙커가 사라집니다.

<param name="ShowStatusBar" value="true">
: 컨트롤러 아래에 버퍼링과 남은시간/총시간 을 보여주는 한줄의 정보창을 제어하는 부분입니다.
false로 해놓으면 보이지 않습니다.

<param name="EnableContextMenu" value="true">
: 앞서도 언급했던 마우스 클릭시 나타나는 메뉴를 제어하는 기능입니다.
false로 해놓으면 우측 클릭을 해도 등록정보 등이 있는 메뉴가 나타나지 않습니다.

<param name="ShowPositionControls" value="true">
: 이 부분은 컨트롤러의 뒤로 가기(▶▶), 앞으로 가기(◀◀) 등의 버튼을 제어하는 부분입니다.
false로 해놓으면 재생 버튼과 정지 버튼만 출력됩니다.

<param name="ShowCaptioning" value="false">
: 동영상 등의 자막이 있을때 이를 제어하는 기능입니다.
음악 파일 재생시는 false로 해놓으시면 됩니다.

<param name="AutoRewind" value="true">
: 재생이 끝났을 경우 이 부분을 true로 해놓으면 자동으로 처음으로 돌아갑니다.
false로 해놓으면 끝부분에 그대로 머물러 있습니다.

<param name="PlayCount" value="1">
: 저번 시간에 배웠던 loop와 같은 기능으로 플레이 반복 횟수를 결정합니다.
'-1'로 해놓으면 무한 반복 됩니다.

<param name="Volume" value="0">
: 재생시 자동으로 설정할 볼륨 량을 지정해주는 부분입니다.
보기와 같이 0으로 해놓으면 최대 볼륨으로 재생됩니다.






< * object 태그 * >
object태그는 엑티브엑스 컨트롤을 사용하고 싶을때 사용하는 것입니다.

엑티브엑스는 보통 윈도우등에 사용하는 프로그램을 웹에서 사용을 하려고 만들어 진것입니다.

동영상, 플레쉬등 기본적으로는 운영체제의 프로그램에서 동작을 합니다.

그곳에 사용되는 미디어플레이어등을 웹에 심어 웹브라우져에서도 볼수 있도록 만들었지요.

param 값은 엑티브 엑스가 실행되는데 필요한 값들을 넘겨주는 값입니다.
동영상을 재생하려면 먼저 파일경로가 있어야 하겠죠.
파일경로등을 param 으로 넘겨주는 역할을 하는것이지요.

CLASSID 는 엑티브엑스의 이름이라고 생각하시면 되실것입니다.

엑티브엑스를 사용하는 사이트에 접속을 하면 엑티브엑스가 자신의 pc에 깔리게 되어있습니다.

그러면 레지스트리에 등록이되고 CLASSID의 값으로 그프로그램(엑티브엑스)를 브라우져에서 호출을하여 보여지게 되는 것이구요.

CLASSID는 엑티브엑스 프로그램 이름입니다.

엑티브엑스를 개인이 만들수도 있습니다.
vb나 델파이 등를 이용하여 만들어 나만의 컨트롤을 만들수도 있습니다.

CLASSID 를 알수 있는것은 소스보기를 하면 그곳에 CLASSID 가 나와 있습니다.

다른방법은 엑티브엑스패드 인가 하는 프로그램으로 알수도 있구요.





<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="player" width="300" height="45">
<param name="Filename" value="../../001.mp3">
<param name="AudioStream" value="-1">
<param name="AutoSize" value="1">
<param name="AutoStart" value="1"> <!-- 자동시작여부 (0: 수동, 1: 자동)-->
<param name="AnimationAtStart" value="true">
<param name="AllowScan" value="true">
<param name="AllowChangeDisplaySize" value="true">
<param name="AutoRewind" value="false"><!-- 자동반복여부-->
<param name="Balance" value="0">
<param name="BufferingTime" value="5">
<param name="ClickToPlay" value="false">
<param name="CursorType" value="0">
<param name="CurrentPosition" value="-1">
<param name="CurrentMarker" value="0">
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="0">
<param name="DisplaySize" value="0">
<param name="Enabled" value="true">
<param name="EnableContextMenu" value="true"><!-- 마우스 컨트롤 -->
<param name="EnablePositionControls" value="true"><!-- 마우스 컨트롤 -->
<param name="EnableFullScreenControls" value="true"><!-- 마우스 컨트롤 -->
<param name="EnableTracker" value="true">
<param name="InvokeURLs" value="true">
<param name="Language" value="-1">
<param name="Mute" value="false">
<param name="PlayCount" value="1">
<param name="PreviewMode" value="false">
<param name="Rate" value="1">
<param name="SelectixxonStart" value="-1">
<param name="SelectionEnd" value="-1">
<param name="SendOpenStateChangeEvents" value="true">
<param name="SendWarningEvents" value="true">
<param name="SendErrorEvents" value="true">
<param name="SendKeyboardEvents" value="false">
<param name="SendMouseClickEvents" value="false">
<param name="SendMouseMoveEvents" value="false">
<param name="SendPlayStateChangeEvents" value="true">

<param name="ShowCaptioning" value="false"><!--자막파일 넣는 부분 (value:true 로 하고 SAMIFileName="자막파일" 로 넣음-->
<param name="ShowControls" value="true"><!--플레이어 컨트롤러 보임여부-->
<param name="ShowAudioControls" value="true"><!-- 볼륨조절 컨트롤러 보임여부-->
<param name="ShowDisplay" value="true"><!-- 디스플레이 창 보임여부-->
<param name="ShowGotoBar" value="true">
<param name="ShowPositionControls" value="true">
<param name="ShowStatusBar" value="true">
<param name="ShowTracker" value="true">

<param name="TransparentAtStart" value="true">
<param name="VideoBorderWidth" value="0">
<param name="VideoBorderColor" value="0">
<param name="VideoBorder3D" value="false">
<param name="Volume" value="600">
<param name="WindowlessVideo" value="true">

</object>


AllowChangedDisplayMode

:초단위, 프레임 단위로 최종 사용자가 디스플레이 모드를 실행시 변경할 수 있는지를 나타낸다. -1=true, 0=false
AllowHideControls

:최종 사용자가 컨트롤 패널을 실행시 감출 수 있는지를 나타낸다. -1=true, 0=false
AllowHideDisplay

:최종 사용자가 디스필레이를 실행시 감출 수 있는지를 나타낸다. -1=true, 0=false
Apperance

:디스플레이 패널의 경계의 모양을 지정한다. 1=inset border 패인모양, 0=무경계
AutoRewind

:파일의 재생이 끝났을 때 자동으로 되감기를 할 것인지를 표시한다. -1=true, 0=false
AutoStart

:웹페이지를 열면 자동으로 재생을 시작할 것인지를 표시한다. -1=true, 0=false
Balance

:소리의 균형을 나타낸다. 0=균형, -10,000=왼쪽스피커만 사용, 10,000=오른쪽 스피커만 사용
BorderStyle

:컨트롤 경계 스타일을 지정한다. 0=무사용, 1=고정된 싱글 경계
CurrentPosition

:재생 파일에서의 현 위치를 초 단위로 나타낸다.
CurrentState

:플레이어의 현 상태를 나타낸다. 0=정지, 2=재생, 1=일시정지
DisplayBackColor

:디스플레이 패널의 배경색을 나타낸다.
DisplayForeColor

:디스플레이 패널의 전경생을 나타낸다.
DisplayMode

:디스플레이 패널에 초단위 또는 프레임 단위로 현위치를 디스플레이할지를 나타낸다. 0=초, 1=프레임
EnableContextMenu

:단축 메뉴를 활성화시킬지를 나타낸다. -1=true, 0=false
Enabled

:컨트롤이 활성화되었는지를 나타낸다. -1=true, 0=false
EnablePositionControls

:컨트롤 패널에 위치 버튼을 보여줄 것인지를 표현한다. -1=true, 0=false
EnableSelectControls

:컨트롤 패널에 선택 버튼을 보여줄 것인지를 표현한다. -1=true, 0=false
EnableTracker

:컨트롤 패널에 트랙바 컨트롤을 보여줄 것인지를 표시 -1=true, 0=false
FileName

:재생될 멀티미디어 파일을 지정한다.
FullScreenMode

:모니터 전체의 크기로 멀티미디어를 표시한다.
MovieWindowSize

:재생 패널의 크기를 결정한다. 0=원래크기, 1=원래크기의 2배, 2=화면의 1/6크기, 3=화면의 1/4
PlayCount

:재생할 횟수를 지정한다.
Rate

:재생 비율을 결정한다.
ReadyState

:소스 파일을 얼마나 로드했는가에 따른 Active Movie Control의 준비 상태를 나타낸다.
SelectionEnd

:파일의 처음에서부터 종료 위치를 초 단위로 지정한다.
SelectionStart

:파일의 처음에서부터 시작 위치를 초 단위로 지정한다.
ShowControls

:컨트롤 패널 표시 여부를 지정한다. -1=true, 0=false
ShowDisplay

:디스플레이 패널 표시 여부를 지정한다. -1=true, 0=false
ShowPositionControls

PARAM 태그 속성과 속성값


:위치 컨트롤의 표시 여부를 지정한다. -1=true, 0=false
ShowSelectControls

:선택 컨트롤의 표시 여부를 지정한다. -1=true, 0=false
ShowTracker

:트랙바의 표시 여부를 지정한다. -1=true, 0=false
Volume

:데이벨의 100분의 1 단위로 볼륨을 지정한다

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3712
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3901
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2379
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20948
227 [기타] innerHTML 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.11.16 0
226 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
225 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 118
224 [소스] Window.scroll() 꿘쓰 2020.06.22 113
223 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
222 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 1
221 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.11.12 143
220 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
219 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 227
218 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 389
217 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 410
216 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 578
215 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 678
214 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 645
213 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 656
212 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
211 [소스] 별점주기 꿘쓰 2019.02.21 768
210 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 734
209 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 950
208 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 726