쓸만한 글

미디어 플레이어 제어하기 네 번째

봄돌73 2006. 6. 23. 13:11
출처 : http://kin.naver.com/db/detail.php?d1id=1&dir_id=10701&eid=sGQcrWdaBx/2xm99nTqycmNB9cXD3u0p






<!--script language="JavaScript">
alert("시스템 점검으로 인하여 잠시 VOD 서비스가 중단되었습니다.\n잠시 후, 이용하여 주십시요.\n\n서비스 이용에 불편을 드려 대단히 죄송합니다.");
self.close();
</script-->


<script language="JavaScript">
resizeTo(399,539);
</script>

<HTML>
<HEAD>
<TITLE>WWCAST - VOD PLAYER</TITLE>
<META http-equiv="Content-Type" CONTENT="text/html; charset=euc-kr">
<style type="text/css">
<!--
td {
 font-family: "굴림";
 font-size: 12px;
 color: #333333;
}
-->
</style>
<link rel="stylesheet" href="mui.css" type="text/css">

<script language="JavaScript">
function wnderror()
{
 return true;
}
function keyboardclick()
{
 if( (event.ctrlKey == true &&
   (event.keyCode == 66 || event.keyCode == 78 || event.keyCode == 82)) ||
   (event.keyCode >= 112 && event.keyCode <=115) ||
   (event.keyCode >= 117 && event.keyCode <= 123) ||
   event.keyCode == 8 || event.keyCode == 27){
  event.keyCode = 0;
  event.cancelBubble = true;
  event.returnValue = false;
 }
}
function mouseclick()
{
 if ((event.button==2) || (event.button==3) )
 {
  return false;
 }
}

window.onerror = wnderror;
document.onkeydown = keyboardclick;
document.onmousedown = mouseclick;
</script> 
</HEAD>

<body bgcolor="#ffffff" text="#000000" link="#000000" vlink="#000000" alink="#000000" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" oncontextmenu="return false" ondragstart="return false" onselectstart="return false">

<span id="inbody" name="inbody" style="visibility:visible;LEFT: 0px; TOP:0px; POSITION: absolute;">
<table width=389 border=0 cellpadding=0 cellspacing=0>
 <tr>
  <td colspan=16><img src="images/new_320_01.jpg" width=389 height=85 alt=""></td>
 </tr>
 <tr>
  <td colspan=16><img src="images/new_320_02.jpg" width=389 height=21 alt=""></td>
 </tr>
 <tr>
  <td><img src="images/new_320_03.jpg" width=32 height=240 alt=""></td>
  <td colspan=14 bgcolor=#000000><!--광고<img src="images/new_320_04.jpg" width=320 height=240 border=0>--></td>
  <td><img src="images/new_320_05.jpg" width=37 height=240 alt=""></td>
 </tr>
 <tr>
  <td colspan=16><img src="images/new_320_06.jpg" width=389 height=7 alt=""></td>
 </tr>
 <tr>
  <td><img src="images/new_320_07.jpg" width=32 height=9 alt=""></td>
  <td colspan=14 background="images/new_320_08.jpg" width=320 height=9>
  <div id="positionBorder" style="CURSOR: hand;width:100%;" onmousedown="MediaPlayer1_PositionControl();" onmouseup="MediaPlayer1_PositionControl();">
  <div id="ProgressPointer" style="VISIBILITY: visible; left:0; top:0; width:10; POSITION: relative;" ondragstart="MediaPlayer1_PositionControl();" ondrag="MediaPlayer1_PositionControl();" ondragend="MediaPlayer1_PositionControl();">
  <img src='images/new_bar.jpg' style="CURSOR: hand;"></div></div>
  </td>
  <td><img src="images/new_320_09.jpg" width=37 height=9 alt=""></td>
 </tr>
 <tr>
  <td colspan=16><img src="images/new_320_10.jpg" width=389 height=18 alt=""></td>
 </tr>
 <tr>
  <td rowspan=2><img src="images/new_320_11.jpg" width=32 height=27 alt=""></td>
  <td colspan=2 rowspan=2><img src="images/new_320_12.jpg" width=56 height=27 alt="시작" onclick="javascript:playIt();" style="cursor:hand;"></td>
  <td rowspan=2><img src="images/new_320_13.jpg" width=7 height=27 alt=""></td>
  <td><img src="images/new_320_14.jpg" width=41 height=20 alt="일시정지" onclick="javascript:pauseIt();" style="cursor:hand;"></td>
  <td rowspan=2><img src="images/new_320_15.jpg" width=6 height=27 alt=""></td>
  <td><img src="images/new_320_16.jpg" width=41 height=20 alt="정지" onclick="javascript:stopIt();" style="cursor:hand;"></td>
  <td rowspan=2><img src="images/new_320_17.jpg" width=9 height=27 alt=""></td>
  <td rowspan=2><img src="images/new_320_18.jpg" width=35 height=27 alt=""></td>
  <td><img id="imgmute" src="images/new_320_19.jpg" width=13 height=20 alt="음소거" onclick="javascript:volMute();" style="cursor:hand;"></td>
  <td rowspan=2><img src="images/new_320_20.jpg" width=6 height=27 alt=""></td>
  <td><img src="images/new_320_21.jpg" width=23 height=20 alt="볼륨 +" onclick="javascript:volChange(1);" style="cursor:hand;"></td>
  <td rowspan=2><img src="images/new_320_22.jpg" width=5 height=27 alt=""></td>
  <td><img src="images/new_320_23.jpg" width=23 height=20 alt="볼륨 -" onclick="javascript:volChange(0);" style="cursor:hand;"></td>
  <td><img src="images/new_320_24.jpg" width=55 height=20 alt=""></td>
  <td><img src="images/new_320_25.jpg" width=37 height=20 alt=""></td>
 </tr>
 <tr>
  <td><img src="images/new_320_26.jpg" width=41 height=7 alt=""></td>
  <td><img src="images/new_320_27.jpg" width=41 height=7 alt=""></td>
  <td><img src="images/new_320_28.jpg" width=13 height=7 alt=""></td>
  <td><img src="images/new_320_29.jpg" width=23 height=7 alt=""></td>
  <td><img src="images/new_320_30.jpg" width=23 height=7 alt=""></td>
  <td><img src="images/new_320_31.jpg" width=55 height=7 alt=""></td>
  <td><img src="images/new_320_32.jpg" width=37 height=7 alt=""></td>
 </tr>
 <tr>
  <td colspan=16><img src="images/new_320_33.jpg" width=389 height=6 alt=""></td>
 </tr>
 <tr>
  <td><img src="images/new_320_34.jpg" width=32 height=23 alt=""></td>
  <td><img src="images/new_320_35.jpg" width=50 height=23 alt="" onclick="MediaPlayer1_changeSize(0);" style="cursor:hand;"></td>
  <td><img src="images/new_320_36.jpg" width=6 height=23 alt=""></td>
  <td colspan=2><img src="images/new_320_37.jpg" width=48 height=23 alt="" onclick="MediaPlayer1_changeSize(1);" style="cursor:hand;"></td>
  <td><img src="images/new_320_38.jpg" width=6 height=23 alt=""></td>
  <td colspan=2><img src="images/new_320_39.jpg" width=50 height=23 alt="" onclick="MediaPlayer1_changeSize(2);" style="cursor:hand;"></td>
  <td><img src="images/new_320_40.jpg" width=35 height=23 alt=""></td>
  <td colspan=2><img src="images/new_320_41.jpg" width=19 height=23 alt=""></td>
  <td colspan=4><img src="images/new_320_42.jpg" width=106 height=23 alt=""></td>
  <td><img src="images/new_320_43.jpg" width=37 height=23 alt=""></td>
 </tr>
 <tr>
  <td colspan=16><img src="images/new_320_44.jpg" width=389 height=11 alt=""></td>
 </tr>
 <tr>
  <td colspan=16 background="images/new_320_45.jpg" width=389 height=63 align=center valign=middle>
  <a href="http://www.skinwell.co.kr/" target="_blank"><img src="/images/banner/player_lamente.gif" border=0></a></td>
 </tr>
</table>
</span>

<span id="inbody2" name="inbody2" style="visibility:hidden;LEFT: 0px; TOP:0px; POSITION: absolute;">
<table width=700 border=0 cellpadding=0 cellspacing=0>
 <tr>
  <td colspan=20><img src="images/new_640_01.jpg" width=700 height=108 alt=""></td>
 </tr>
 <tr>
  <td colspan=20><img src="images/new_640_02.jpg" width=700 height=14 alt=""></td>
 </tr>
 <tr>
  <td><img src="images/new_640_03.jpg" width=31 height=480 alt=""></td>
  <td colspan=18 bgcolor=#000000><!--광고<img src="images/new_640_04.jpg" width=640 height=480 border=0>--></td>
  <td><img src="images/new_640_05.jpg" width=29 height=480 alt=""></td>
 </tr>
 <tr>
  <td colspan=20><img src="images/new_640_06.jpg" width=700 height=7 alt=""></td>
 </tr>
 <tr>
  <td><img src="images/new_640_07.jpg" width=31 height=9 alt=""></td>
  <td colspan=18 background="images/new_640_08.jpg" width=640 height=9>
  <div id="positionBorder2" style="CURSOR: hand;width:100%;" onmousedown="MediaPlayer1_PositionControl();" onmouseup="MediaPlayer1_PositionControl();">
  <div id="ProgressPointer2" style="VISIBILITY: visible; left:0; top:0; width:10; POSITION: relative;" ondragstart="MediaPlayer1_PositionControl();" ondrag="MediaPlayer1_PositionControl();" ondragend="MediaPlayer1_PositionControl();">
  <img src='images/new_bar.jpg' style="CURSOR: hand;"></div></div>
  </td>
  <td><img src="images/new_640_09.jpg" width=29 height=9 alt=""></td>
 </tr>
 <tr>
  <td colspan=20><img src="images/new_640_10.jpg" width=700 height=17 alt=""></td>
 </tr>
 <tr>
  <td rowspan=2><img src="images/new_640_11.jpg" width=31 height=27 alt=""></td>
  <td rowspan=2><img src="images/new_640_12.jpg" width=56 height=27 alt="시작" onclick="javascript:playIt();" style="cursor:hand;"></td>
  <td rowspan=2><img src="images/new_640_13.jpg" width=7 height=27 alt=""></td>
  <td><img src="images/new_640_14.jpg" width=41 height=23 alt="일시정지" onclick="javascript:pauseIt();" style="cursor:hand;"></td>
  <td rowspan=2><img src="images/new_640_15.jpg" width=6 height=27 alt=""></td>
  <td><img src="images/new_640_16.jpg" width=41 height=23 alt="정지" onclick="javascript:stopIt();" style="cursor:hand;"></td>
  <td rowspan=2><img src="images/new_640_17.jpg" width=44 height=27 alt=""></td>
  <td><img id="imgmute2" src="images/new_640_18.jpg" width=13 height=23 alt="음소거" onclick="javascript:volMute();" style="cursor:hand;"></td>
  <td rowspan=2><img src="images/new_640_19.jpg" width=6 height=27 alt=""></td>
  <td><img src="images/new_640_20.jpg" width=23 height=23 alt="볼륨 +" onclick="javascript:volChange(1);" style="cursor:hand;"></td>
  <td rowspan=2><img src="images/new_640_21.jpg" width=5 height=27 alt=""></td>
  <td><img src="images/new_640_22.jpg" width=23 height=23 alt="볼륨 -" onclick="javascript:volChange(0);" style="cursor:hand;"></td>
  <td rowspan=2><img src="images/new_640_23.jpg" width=9 height=27 alt=""></td>
  <td><img src="images/new_640_24.jpg" width=50 height=23 alt="" onclick="MediaPlayer1_changeSize(0);" style="cursor:hand;"></td>
  <td rowspan=2><img src="images/new_640_25.jpg" width=5 height=27 alt=""></td>
  <td><img src="images/new_640_26.jpg" width=50 height=23 alt="" onclick="MediaPlayer1_changeSize(1);" style="cursor:hand;"></td>
  <td rowspan=2><img src="images/new_640_27.jpg" width=5 height=27 alt=""></td>
  <td><img src="images/new_640_28.jpg" width=50 height=23 alt="" onclick="MediaPlayer1_changeSize(2);" style="cursor:hand;"></td>
  <td colspan=2 rowspan=2><img src="images/new_640_29.jpg" width=235 height=27 alt=""></td>
 </tr>
 <tr>
  <td><img src="images/new_640_30.jpg" width=41 height=4 alt=""></td>
  <td><img src="images/new_640_31.jpg" width=41 height=4 alt=""></td>
  <td><img src="images/new_640_32.jpg" width=13 height=4 alt=""></td>
  <td><img src="images/new_640_33.jpg" width=23 height=4 alt=""></td>
  <td><img src="images/new_640_34.jpg" width=23 height=4 alt=""></td>
  <td><img src="images/new_640_35.jpg" width=50 height=4 alt=""></td>
  <td><img src="images/new_640_36.jpg" width=50 height=4 alt=""></td>
  <td><img src="images/new_640_37.jpg" width=50 height=4 alt=""></td>
 </tr>
 <tr>
  <td colspan=20><img src="images/new_640_38.jpg" width=700 height=11 alt=""></td>
 </tr>
 <tr>
  <td colspan=20 background="images/new_640_39.jpg" width=700 height=72 align=center valign=middle>
  <a href="http://www.skinwell.co.kr/" target="_blank"><img src="/images/banner/player_lamente.gif" border=0></a></td>
 </tr>
 <tr>
  <td><img src="images/spacer.gif" width=31 height=1 alt=""></td>
  <td><img src="images/spacer.gif" width=56 height=1 alt=""></td>
  <td><img src="images/spacer.gif" width=7 height=1 alt=""></td>
  <td><img src="images/spacer.gif" width=41 height=1 alt=""></td>
  <td><img src="images/spacer.gif" width=6 height=1 alt=""></td>
  <td><img src="images/spacer.gif" width=41 height=1 alt=""></td>
  <td><img src="images/spacer.gif" width=44 height=1 alt=""></td>
  <td><img src="images/spacer.gif" width=13 height=1 alt=""></td>
  <td><img src="images/spacer.gif" width=6 height=1 alt=""></td>
  <td><img src="images/spacer.gif" width=23 height=1 alt=""></td>
  <td><img src="images/spacer.gif" width=5 height=1 alt=""></td>
  <td><img src="images/spacer.gif" width=23 height=1 alt=""></td>
  <td><img src="images/spacer.gif" width=9 height=1 alt=""></td>
  <td><img src="images/spacer.gif" width=50 height=1 alt=""></td>
  <td><img src="images/spacer.gif" width=5 height=1 alt=""></td>
  <td><img src="images/spacer.gif" width=50 height=1 alt=""></td>
  <td><img src="images/spacer.gif" width=5 height=1 alt=""></td>
  <td><img src="images/spacer.gif" width=50 height=1 alt=""></td>
  <td><img src="images/spacer.gif" width=206 height=1 alt=""></td>
  <td><img src="images/spacer.gif" width=29 height=1 alt=""></td>
 </tr>
</table>
</span>

<DIV ID="bufferDiv" STYLE="color:#5e5e5e; padding-left:2px; FONT: 9pt 굴림; HEIGHT: 17px; LEFT: 32px; POSITION: absolute; TEXT-ALIGN: left; TEXT-VALIGN: center; TOP: 364px; VISIBILITY: visible; WIDTH: 190px">
 <span id=bufprogress>Buffering : 0%</span>
</DIV>

<DIV ID="progressdiv" STYLE="color:#5e5e5e; padding-right:2px; FONT: 9pt 굴림; HEIGHT: 17px; LEFT: 222px; POSITION: absolute; TEXT-ALIGN: right; TOP: 364px; VISIBILITY: visible; WIDTH: 130px">
  <span id=progress>00:00 / 00:00</span>
</DIV>

<object id=MagicLock classid="clsid:9B75502C-BBED-4BBD-8FE2-822E5E0AD32C" codebase="MagicLockOCX.cab#version=1,0,0,4" width=0 height=0></object>
<script language=vbscript>
On Error Resume Next
dim nErrorResult
nErrorResult = MagicLock.GetLoadResult
If nErrorResult <> 1 Then
 MsgBox "동영상서비스를 위한 ActiveX 콘트롤이 설치되지 않았습니다.", 16, "WWCAST.com"
 window.close
 Player.Close
 Player.enabled = False
End If
</script>

<DIV ID="controlDiv" STYLE="POSITION: absolute; TOP: 106px; LEFT: 800px; VISIBILITY: visible;">
<OBJECT ID="MediaPlayer1" width=320 height=240 classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" 
 standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
 <param name="uiMode" value="none">
 <param name="enableContextMenu" value="false">
 <param name="volume" value="80">
 <param name="fullScreen" value="false">
 <param name="width" value="320">
 <param name="height" value="240">
 <param name="stretchToFit" value="true">
 <param name="DisplaySize" value="4">
 <param name="autoStart" value="true">
</OBJECT>
</DIV>

</BODY>
</HTML>

<script language="JavaScript">
if(document.body.clientHeight < 510)
 resizeTo(399,539 + (510 - document.body.clientHeight));
</script>

<script language="javascript">
var play_stats = 2;
var positionSize = 320;
var leftBlank = 32;

var stats2 = "";
var timer_MediaPlayer1_currentInfo;
var timer_MediaPlayer1_Position;

function playIt() {
 if (MediaPlayer1.controls.isAvailable('Play'))
  MediaPlayer1.controls.play();
 play_stats = 3;
}

function pauseIt() {
 if (MediaPlayer1.controls.isAvailable('Pause'))
  MediaPlayer1.controls.pause();
 play_stats = 2;
}

function stopIt() {
 if (MediaPlayer1.controls.isAvailable('Stop'))
  MediaPlayer1.controls.stop();
 play_stats = 1;
}

function volMute() {
 if (MediaPlayer1.settings.mute) {
  MediaPlayer1.settings.mute = false;
  stats2 = "";
  UpdateState();
  imgmute.src="images/new_320_19.jpg";
  imgmute.alt="음소거";
  imgmute2.src="images/new_640_18.jpg";
  imgmute2.alt="음소거";
 }
 else {
  MediaPlayer1.settings.mute = true;
  stats2 = "(음소거)";
  UpdateState();
  imgmute.src="images/new_320_19_2.jpg";
  imgmute.alt="음복원";
  imgmute2.src="images/new_320_19_2.jpg";
  imgmute2.alt="음복원";
 }
}

function volChange(UpDown){
 var curVol = document.MediaPlayer1.settings.volume;
 
 if (UpDown == 1)
 {
  curVol += 10;
  if (curVol >= 100)
   curVol = 100;
 }
 else
 {
  curVol -= 10;
  if (curVol < 0)
   curVol = 0;
 }

 curVol = Math.floor(curVol);
 document.MediaPlayer1.settings.volume = curVol;
}

function MediaPlayer1_changeSize(n) {
 switch (n){
  case 0:
   positionSize=320;
 
   if(MediaPlayer1.playState != 1)
    controlDiv.style.left="32px";
   controlDiv.style.top="106px";
   
   resizeTo(399,539);
   if(document.body.clientHeight < 510)
    resizeTo(399,539 + (510 - document.body.clientHeight));
   inbody2.style.visibility="hidden";
   inbody.style.visibility="visible";
   bufferDiv.style.left="32px";
   bufferDiv.style.top="364px";
   bufferDiv.style.width="190px";
   progressdiv.style.left="222px";
   progressdiv.style.top="364px";
 
   MediaPlayer1.width = 320;
   MediaPlayer1.height = 240;

   break;
  case 1:
   positionSize=640;
 
   if(MediaPlayer1.playState != 1)
    controlDiv.style.left="31px";
   controlDiv.style.top="122px";
   
   resizeTo(710,774);
   if(document.body.clientHeight < 745)
    resizeTo(710,774 + (745 - document.body.clientHeight));
   inbody.style.visibility="hidden";
   inbody2.style.visibility="visible";
   bufferDiv.style.left="31px";
   bufferDiv.style.top="620px";
   bufferDiv.style.width="510px";
   progressdiv.style.left="540px";
   progressdiv.style.top="620px";
   
   MediaPlayer1.width = 640;
   MediaPlayer1.height = 480;
   
   break;
  case 2:
   MediaPlayer1.fullScreen = "true";

   break;
 }
}

function MediaPlayer1_currentInfo(){
 if (MediaPlayer1.controls.currentPosition == "0")
  progress.innerHTML = MediaPlayer1.currentMedia.durationString;
 else
  progress.innerHTML = MediaPlayer1.controls.currentPositionString + " / " + MediaPlayer1.currentMedia.durationString;

 //timer_MediaPlayer1_currentInfo = setTimeout("MediaPlayer1_currentInfo()",1000);
}

function MediaPlayer1_PositionControl(){
 if (positionSize == 320){
  if (event.clientX - leftBlank > positionSize)
   ProgressPointer.style.pixelLeft = positionSize - 11;
  else if (event.clientX - leftBlank < 0 )
   ProgressPointer.style.pixelLeft = 1;
  else
   ProgressPointer.style.pixelLeft = event.clientX - leftBlank - 5;
 }
 else{
  if (event.clientX - leftBlank > positionSize)
   ProgressPointer2.style.pixelLeft = positionSize - 11;
  else if (event.clientX - leftBlank < 0 )
   ProgressPointer2.style.pixelLeft = 1;
  else
   ProgressPointer2.style.pixelLeft = event.clientX - leftBlank - 5;
 }
 
 MediaPlayer1_SetPosition();
}

function MediaPlayer1_SetPosition() {
 if (positionSize == 320)
  MediaPlayer1.controls.currentPosition = Number(ProgressPointer.style.pixelLeft) / positionSize * MediaPlayer1.currentMedia.duration;
 else
  MediaPlayer1.controls.currentPosition = Number(ProgressPointer2.style.pixelLeft) / positionSize * MediaPlayer1.currentMedia.duration;
}

function MediaPlayer1_Position() {
 MediaPlayer1_currentInfo();
 
 var w = parseInt(MediaPlayer1.controls.currentPosition * (positionSize) / MediaPlayer1.currentMedia.duration, 10);
 if (!isNaN(w)) {
  if (w > positionSize-11)
   w = positionSize - 11;
  else if (w < 1)
   w = 1;
 if (positionSize == 320)
  ProgressPointer.style.pixelLeft = w;
 else
  ProgressPointer2.style.pixelLeft = w;
 }
 
 timer_MediaPlayer1_Position = setTimeout("MediaPlayer1_Position()",1000);
}
</script>
<script language="JavaScript" src="js_media2.asp?num=1941&code=130101019000000&speed=300"></script>
<SCRIPT language="JavaScript">
var idI;

function UpdateBP()
{
 bufferDiv.innerHTML = "Buffering : " + MediaPlayer1.network.bufferingProgress + "%" + " " + stats2;
}

function UpdateState()
{
 var states = new Array();

 states[0] = "Undefined";
 states[1] = "정지";
 states[2] = "일시정지";
 states[3] = "재생중";
 states[4] = "앞으로";
 states[5] = "뒤로";
 states[6] = "Buffering : 0%";
 states[7] = "Now Loading...";
 states[8] = "종료";
 states[9] = "대기중";
 states[10] = "준비중";
 states[11] = "접속중";

 bufferDiv.innerHTML = states[MediaPlayer1.playState] + " " + stats2;
 
 if(MediaPlayer1.playState == 1)
  controlDiv.style.left = "800";
}
</SCRIPT>
<SCRIPT language="JavaScript" FOR="MediaPlayer1" EVENT="Buffering(Start)">
 if (Start)
  idI = window.setInterval("UpdateBP()", 1000);
 else
 {
  window.clearInterval(idI);

  if(MediaPlayer1.width == "320")
   controlDiv.style.left = "32px";
  else
   controlDiv.style.left = "31px";
 }
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript"  FOR="MediaPlayer1" EVENT="PlayStateChange(NewState)">
UpdateState();
</SCRIPT>


<script>
  pSvrMMS = document.MediaPlayer1.network.getProxySettings("MMS");
  pSvrRTSP = document.MediaPlayer1.network.getProxySettings("RTSP");
  if (pSvrMMS==2 || pSvrRTSP==2 ) {
       document.MediaPlayer1.close();
    alert("미디어플레이어의 프록시설정이 감지되었습니다.\n미디어플레이어의 프록시서버를 해제하신 후, 이용하여 주십시요.\n\n" +
       "미디어플레이어 : [도구]->[옵션]->[네트워크]->[스트리밍프록시설정]");
    self.close();
  }
</script>