[Javascript] - 동영상 제어
Javascript 2011. 6. 29. 15:50++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
자바스크립트..동영상 제어..
1. 먼저 플레이어를 세팅한후에
2. controls.currentMarker 속성을 이용하여 마킹한 부분을 찾아 가면 됩니다.
<OBJECT id=MediaPlayer1 style="LEFT: 0px; TOP: 0px" codeBase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701 type=application/x-oleobject height=304 standby="Loading Microsoft? Windows? Media Player components..." width=320 classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<PARAM NAME="URL" VALUE='mms://파일명.wmv'>
<PARAM NAME="autoStart" VALUE="-1">
<PARAM NAME="currentMarker" VALUE="0">
<PARAM NAME="volume" VALUE="50">
<PARAM NAME="uiMode" VALUE="full">
<PARAM NAME="fullScreen" VALUE="0">
</OBJECT>
<a href="./javascript ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 동영상 이미지 버튼으로 재생하기, 그다지 어렵지 않습니다. // 동영상 재생, 멈춤, 일시정지 스크립트 입니다. <script language="JavaScript"> </script> // 동영상 삽입 부분입니다. <div id="vod" style="width:가로값; height:세로값; z-index:1"> // 동영상 재생, 멈춤, 일시정지의 버튼이 있는 이미지 입니다. <img src="./이미지주소" width="가로크기" height="세로크기" border="0" usemap="#mm">
<a href="./javascript
<script language="javascript">
<!--//
function setPlayMarker( m ){
oPlayer = document.getElementById('MediaPlayer1');
oPlayer.controls.currentMarker = m;
oPlayer.controls.play();
}
//-->
</script>
// <head></head>사이에 넣는 것이 가장 이상적이겠죠~
function OnPlay()
{
if (MediaPlayer1.PlayState != 2)
{
MediaPlayer1.Play();
}
}
function OnStop()
{
MediaPlayer1.Stop();
MediaPlayer1.CurrentPosition=0;
}
function OnPause()
{
if (MediaPlayer1.PlayState == 2)
{
MediaPlayer1.Pause();
}
}
// ShowStatusBar값이 0이니까 밑에 상태바(재생,멈춤등의 버튼이 있는)가 생기지 않고 동영상만 나타납니다.
// AutoStart값이 1이니까 자동 실행됩니다.
<object id="MediaPlayer1" width="가로크기" height="세로크기" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Loading Microsoft?Windows?Media Player components..." type="application/x-oleobject">
<param name="Filename" value="주소">
<param name="ShowStatusBar" value="0">
<param name="AutoStart" value="1">
<param name="ShowControls" value="0">
<param name="AllowChangeDisplaySize" value="0">
<param name="DisplaySize" value="0">
<PARAM NAME="DISPLAYMODE" VALUE="4">
</object>
</div>
// 버튼을 하나씩 쪼개지 않고 통이미지에 이미지맵을 이용하는 경우지요.
// 이미지맵의 이름이 같아야 겠죠.(아래 소스에서는 mm이죠.)
// 각 버튼의 영역을 이미지맵으로 선택하고 onclick값을 넣어주면 됩니다.
<map name="mm" id="mm">
<area shape="rect" coords="167,2,181,15" href="./#" onclick="OnPause()" alt="일시정지" title="pause">
<area shape="rect" coords="152,2,166,15" href="./#" onclick="OnStop()" alt="멈춤" title="stop">
<area shape="rect" coords="137,2,151,15" href="./#" onclick="OnPlay()" alt="재생" title="play">
</map>
'Javascript' 카테고리의 다른 글
| [Javascript] - Iframe Auto Resize (0) | 2011.07.01 |
|---|---|
| [Javascript] - Ajax로 페이지 Call하는법 (0) | 2011.06.29 |
| [Javascript] - 슬라이딩 터치 (0) | 2011.06.28 |
| [Javascript] - 달력(심플) (0) | 2011.06.28 |
| [Javascript] - 페이지 로딩 소스 (0) | 2011.06.28 |