Active X와 Javascript로 만든 미디어 플레이어
컨텐츠 정보
- 25,089 조회
- 10 추천
- 목록
본문
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language='Javascript' for='Player' event='OpenComplete'>
<!--
// Player은 컨트롤의 id입니다.
// 컨트롤의 이벤트는 vb를 참조해야 합니다.
// vb에서 컨트롤의 프로퍼티와 메소드와 이벤트 핸들러를
// 참조할수 있습니다.
// 그전에 regsvr32 control_filename으로 컨트롤을 등록해야 합니다.
// 컨트롤의 OpenComplete이벤트 핸들러에 아래의 함수를 연결하는 것입니다.
Player_OpenComplete();
//-->
</SCRIPT>
<SCRIPT language='Javascript' for='Player' event='PositionChange'>
<!--
Player_PositionChange();
//-->
</SCRIPT>
<SCRIPT language='Javascript' for='Player' event='Timer'>
<!--
Player_Timer();
//-->
</SCRIPT>
<SCRIPT language='Javascript'>
<!--
// tracker를 drag하기 시작했는가? true일땐 drag, false일땐 drag안됨
var dragtracker = false;
// drag하려고 마우스를 누른 위치(X좌표)
// tracker의 가로폭은 10, 마우스를 클릭한 위치대로 움직이게 하려고
var dragplusx;
// volume을 drag하기 시작했는가?
var drag = false;
// volume의 default값은 50(0~100까지)
var vol1 = 50;
// 컨트롤이 연주하려는 오디오파일의 로딩을 다 끝냈을때 실행되는 함수
function Player_OpenComplete()
{
// 비디오라면 원래폭의 크기가 설정된다.
// 비디오가 아니라면 0
// 비디오라면 Display를 보여준다(접속중, 버퍼링중, 등의 메시지를 보여주려고)
if (Player.ImageSourceWidth > 0)
Player.ShowDisplay = 1;
else
Player.ShowDisplay = 0;
// 표시되는 연주시간을 0으로 초기화한다.
Ttime.innerText = FormatTime(0);
// 전체 연주시간을 표시한다.
// FormatTime()는 초로 설정된 값을 분과 초로(:으로) 구분
Llength.innerText = FormatTime(Player.Duration);
}
function Player_PositionChange()
{
// FF, Rew, Tracker등으로 현재위치가 바꼈을때
Ttime.innerText = FormatTime(Player.CurrentPosition);
// 화면의 Tracker sample의 폭은 500,
// 전체시간과 현재위치시간의 비율을 구해서 Tracker를 위치시킨다.
// Tracker의 이동길이는 500, Tracker의 폭은 10
// XTracker이 Tracker, Trackerr은 OnClick을 위해서
XTracker.style.left = Math.floor(Player.CurrentPosition / Player.Duration * 500);
Trackerr.style.left = XTracker.style.left;
}
function Player_Timer()
{
// 컨트롤의 자체 타이머
// 이이벤트가 발생하는 시간은 잘 모르겠다
// 아마 1초에 한번이 아닐까
Ttime.innerText = FormatTime(Player.CurrentPosition);
XTracker.style.left = Math.floor(Player.CurrentPosition / Player.Duration * 500);
Trackerr.style.left = XTracker.style.left;
}
function Open_OnClick()
{
// <INPUT type='file'의 click() 호출(이것도 브라우저 내부적으론 개체다)
File.click();
// 선택된 파일명을 컨트롤에 입력한다
Player.FileName = File.value;
// 파일명을 표시한다.
Filename.value = File.value;
}
function Play_OnClick()
{
// 연주한다.
Player.Run();
}
function Stop_OnClick()
{
// 연주 중지
Player.Stop();
// 연주시간을 0으로 초기화한다.
Ttime.innerText = FormatTime(0);
// OnClick을 위한 가짜 Tracker까지 처음으로 이동
Trackerr.style.left = 0;
XTracker.style.left = Trackerr.style.left;
}
function Pause_OnClick()
{
// 연주 정지
Player.Pause();
}
function Rew_OnClick()
{
// Rew와 FF는 10초 앞 또는 뒤로 이동한다.
// 처리 단위를 frame으로 하지 않고 시간으로 했기 때문이다.
// 이것은 컨트롤을 호출할때
// <PARAM> Tag로 초기화시킬수도 있고,
// 프로그램 실행중에 바꿀수도 있다.
if (Player.CurrentPosition-10 > 0)
Player.CurrentPosition = Player.CurrentPosition - 10;
else
Player.CurrentPosition = 0;
}
function FF_OnClick()
{
Player.CurrentPosition = Player.CurrentPosition + 10;
}
function FormatTime(num)
{
var min, sec;
var str;
// 넘어오는 값은 연주시간이다(전체시간, 연주시간).
// 이 시간을 반올림할 필요는 없다.
// 현재 초단위이기 때문에(프레임단위일수도 있다).
// 문자열로 넘어오기 때문에 숫자로 바꾸려고 이렇게 한 것이다.
num = Math.round(num);
// 몫은 분
min = Math.floor(num / 60);
// 나머지는 초
sec = Math.floor(num % 60);
// 분이 한자리면 앞에 0을 붙인다.
// min은 Javascript변수이나 숫자변수이다.
// toString 메소드로 문자로 바꾼다.
if (min < 10)
str = '0' + min.toString();
else
str = min.toString();
str += ':';
if (sec < 10)
str += '0' + sec.toString();
else
str += sec.toString();
return str;
}
function DragTrackerStart()
{
// 트래커의 드래그가 이미 시작되지 않았다면
// 클릭과 구분하기 위해서다.
// 이함수는 마우스를 눌렀을때 실행된다.
// OnMouseDown
if (!dragtracker)
{
// 길이가 10인 트래커의 어느부분인지 그X좌표를 저장해서
// 트래커가 눌린 그대로 드래그되게 한다.
dragplusx = event.x;
// 마우스 누름을 감지하기 위한 가짜 트래커를 보이지 않게 한다.
Trackerr.style.display = 'none';
// 트래커의 드래그 시작
dragtracker = true;
}
}
function DragTrackerEnd()
{
// 트래커의 드래그가 시작되었다면
// OnClick과 구분하기 위해서
if (dragtracker)
{
// 트래커의 드래그를 끝낸다.
dragtracker = false;
// 가짜 트래커의 위치를 진짜 트래커와 같게 하고,
Trackerr.style.left = XTracker.style.left;
// 가짜 트래커를 보이게 한다.
Trackerr.style.display = 'block';
}
}
function Tracker()
{
var tracker;
// 트래커의 드래그가 시작됐다면
if (dragtracker)
{
// 드래그되는 거리는 마우스의 Move이벤트가 발생한 좌표에서
// 트래커의 클릭된 위치를 빼야 한다.
tracker = event.x - dragplusx;
// 트래커가 범위를 벗어나지 않게 한다.
// 이렇게 하지 않으면,
// 조금 벗어날수도 있다.
if (0 <= tracker && tracker <= 500)
{
// 트래커의 좌표를 이동시킨다.
XTracker.style.left = tracker;
// 전체 연주시간을 트래커의 길이인 500으로 나눈후에
// 트래커가 드래그된 길이를 곱해서
// 현재위치를 설정한다.
Player.CurrentPosition = Math.floor(Player.Duration / 500 * tracker);
}
}
}
function ClickTracker()
{
var tracker;
// 클릭으로 트래커를 이동시킬 경우
// 클릭한 좌표를 트래커의 중간으로 한다(길이가 10).
tracker = event.x - 5;
// 트래커의 이동을 제한한다.
// 트래커의 이동길이는 0~100까지다.
// 약간 벗어날수 있다.
if (tracker < 0)
tracker = 0;
if (tracker > 500)
tracker = 500;
// 클릭한 위치를 연주위치로 바꾼다.
Player.CurrentPosition = Math.floor(tracker / 500 * Player.Duration);
// 클릭한 위치로 트래커를 옮긴다.
XTracker.style.left = tracker;
Trackerr.style.left = XTracker.style.left;
}
function DragStart()
{
// 볼륨의 드래그가 시작되었는가?
if (!drag)
{
// 가짜볼륨을 클릭한 위치를 저장해서
// 볼륨을(길이가 10) 제위치로 이동시킨다.
dragplusx = event.x;
// 가짜 볼륨을 보이지 않게 한다.
// 가짜 볼륨은 마우스의 누름을 감지하기 위한 것이다.
XVolume.style.display = 'none';
// 드래그가 시작됐다.
drag = true;
}
}
function DragEnd()
{
if (drag)
{
drag = false;
XVolume.style.left = Volume.style.left;
XVolume.style.display = 'block';
}
}
function Vol()
{
var vol;
if (drag)
{
vol = event.x - dragplusx;
// 볼륨은 0~100까지다.
if (0 <= vol && vol <= 100)
{
Volume.style.left = vol;
// 어찌된 일인지,
// 내가 사용한 WMP 6.4 Active Movie 컨트롤의 볼륨은
// 0이 가장 큰값이면서 가장 큰 소리고,
// -10000이 가장 작은 값이었다.
// 소리가 거의 나지 않는 -6000을 0으로 잡았다.
// 불롬은 0~100까지지만,
// 실제론 -6000~0까지로
// 볼륨 트래커의 1은 실제론 60이다.
Player.Volume = -6000 + (vol * 60);
}
}
}
function ClickVolume()
{
var vol;
vol = event.x - 5;
if (vol < 0 )
vol = 0;
if (vol > 100)
vol = 100;
Player.Volume = -6000 + (vol * 60);
Volume.style.left = vol;
XVolume.style.left = Volume.style.left;
}
function Mute_OnClick()
{
// Mute는 소리를 끄는 것이다.
// 볼륨을 한번에 0으로 하면,
// '탁'하는 소리가 난다.
// 그소리를 없애려고
// 볼륨을 3씩 루프를 써서 줄이는 방법을 썼다.
var i;
// 볼륨이 -10000이면 뮤트된 것이다.
if (Player.Volume != -10000)
{
for (i=-6000+(vol1*60); i>-10000; i-=3)
Player.Volume = i;
Player.Volume = -10000;
}
else
{
for (i=-10000; i<-6000+(vol1*60); i+=3)
Player.Volume = i;
Player.Volume = -6000 + (vol1 * 60);
}
}
function a100_OnClick()
{
// 원래 크기
Player.MovieWindowSize = 0;
}
function a200_OnClick()
{
// 두배 크기
Player.MovieWindowSize = 1;
}
function sel()
{
// 목록에서 선택된 파일
Player.FileName = List.options(List.selectedIndex).value;
}
//-->
</SCRIPT>
</HEAD>
<!--
마우스가 볼륨이나 트래커의 바깥에서 놓아질수 있다.
-->
<BODY onmouseup='DragEnd();DragTrackerEnd();'>
<DIV style='border:1 solid'>
<TABLE width='600' border='1' bordercolor='blue' cellspacing='0' cellpadding='0'>
<TR height='30'>
<TD colspan='2'>
<!--
clsid는 레지스트리를 봐야 한다.
이용된 컨트롤은 WMP 6.4다.
여러가지를 테스트해봤지만, 플레이어를 만들기에는
6.4가 제일 나은것같다.
다른 버젼의 WMP를 갖고 있는 사용자들도 사용할수 있으려면,
여기에 이용된 컨트롤을 다운받을수 있도록 하는게 좋을것이다.
WMP 6.4의 Active X Control의 파일명은 MSDXM.OCX다.
-->
<OBJECT id='Player' classid='clsid:05589FA1-C356-11CE-BF01-00AA0055595A'>
<PARAM name='AutoStart' value='1'>
<PARAM name='EnableContextMenu' value='1'>
<PARAM name='AutoRewind' value='1'>
<PARAM name='ShowControls' value='0'>
<PARAM name='ShowDisplay' value='0'>
<PARAM name='ShowPositionControls' value='0'>
<PARAM name='ShowSelectionControls' value='0'>
<PARAM name='ShowTracker' value='0'>
<PARAM name='Volume' value='-600'>
<!--
AutoStart는 자동으로 시작되는가
EnableContextMenu는 비디오실행시 팝업메뉴를 허용하는가
AutoRewind는 중지시 자동으로 처음으로 이동하는가
ShowControls은 여러가지 버튼을 보여주는가
ShowDisplay는 접속상태와 연주시간을 보여주는가
ShowPositionControls는 FF, Rew를 보여주는가
ShowSelectionControls는 버튼을 보여주는가
ShowTracker는 자체 트래커를 보여주는가 <-- 디자인된 트래커를 쓸수 있도록 샘플을 만들었다
Volume의 초기값
-->
</OBJECT>
</TD>
</TR>
<TR height='30'>
<TD colspan='2'>
<!--
파일명을 보여주기 위한 텍스트 필드를 읽기전용으로 만든다.
로컬 파일을 선택하기 위한 파일선택 대화상자를 출력하기 위한 것
-->
<INPUT type='text' name='Filename' size='70' readonly>
<INPUT type='file' name='File' style='display:none;'>
</TD>
</TR>
<TR height='30' align='center'>
<!--
연주시간과 전체시간을 출력하기 위한 레이블
-->
<TD width='300'>연주시간 - <LABEL id='Ttime'>00:00</LABEL></TD>
<TD width='300'>총연주시간 - <LABEL id='Llength'>00:00</LABEL></TD>
</TR>
<TR height='30'>
<TD colspan='2'>
<DIV style='overflow:hidden;width:512;height:22;border:1 solid red;left:10;'>
<DIV id='TrackerArea1' style='position:relative;width:512;height:20;top:-1;left:-1;border:1 solid red;'>
<DIV id='XTracker' style='position:relative;width:10;height:20;left:0;background-color:black;'>
</DIV>
</DIV>
<DIV id='TrackerArea2' onclick='ClickTracker()' onmousemove='Tracker()' style='position:relative;width:512;height:22;top:-23;left:-1;border:1 solid red;'>
<DIV id='Trackerr' onmousedown='DragTrackerStart()' style='position:relative;width:10;height:20;left:0;background-color:black;'>
</DIV>
</DIV>
</DIV>
<!--
Tracker1과 Tracker2는 똑같은 길이다.
XTracker과 Trackerr은 똑같은 길이고, 같은 좌표를 갖는다.
트래커를 드래그시키는 마우스의 Move이벤트를 감지하기 위해,
TrackerArea2가 필요하다. 이위에서 마우스가 드래그된다.
클릭도 이위에서 감지된다.
Trackerr은 가짜 트래커로 마우스가 드래그되기 시작할때 누름을 감지하기 위해 사용됐다.
-->
</TD>
</TR>
<TR height='30'>
<TD colspan='2'>
<INPUT type='button' name='Open' value='Open' onclick='Open_OnClick()'>
<INPUT type='button' name='Play' value='Play' onclick='Play_OnClick()'>
<INPUT type='button' name='Stop' value='Stop' onclick='Stop_OnClick()'>
<INPUT type='button' name='Pause' value='Pause' onclick='Pause_OnClick()'>
<INPUT type='button' value='Rew' id='Rew' onclick='Rew_OnClick()'>
<INPUT type='button' value='FF' id='FF' onclick='FF_OnClick()'>
<INPUT type='button' name='Mute' value='Mute' onclick='Mute_OnClick()'>
<INPUT type='button' name='100' value='100' onclick='a100_OnClick()'>
<INPUT type='button' name='200' value='200' onclick='a200_OnClick()'>
<DIV style='position:absolute;overflow:hidden;width:112;height:22;border:1 solid red;'>
<DIV id='VolumeArea1' style='position:relative;width:112;height:20;top:-1;left:-1;border:1 solid red;'>
<DIV id='Volume' style='position:relative;width:10;height:20;left:50;background-color:black;'>
</DIV>
</DIV>
<DIV id='VolumeArea2' onclick='ClickVolume()' onmousemove='Vol()' style='position:relative;width:112;height:22;top:-23;left:-1;border:1 solid red;'>
<DIV id='XVolume' onmousedown='DragStart()' style='position:relative;width:10;height:20;left:50;background-color:black;'>
</DIV>
</DIV>
</DIV>
</TD>
</TR>
<TR>
<TD colspan='2'>
<SELECT name='List' width='400' size='4' onchange='sel()'>
<OPTION value='mms://61.74.69.165/mv2/modern/moden_U/u58.asf'>mms://61.74.69.165/mv2/modern/moden_U/u58.asf</OPTION>
<OPTION value='mms://61.74.69.165/mv2/modern/moden_U/u47.asf'>mms://61.74.69.165/mv2/modern/moden_U/u47.asf</OPTION>
<OPTION value=''></OPTION>
<OPTION value=''></OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
</DIV>
<pre>
MSDXM.OCX파일은 자료실에 등록신청해 놓겠습니다.
</pre>
</BODY>
</HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language='Javascript' for='Player' event='OpenComplete'>
<!--
// Player은 컨트롤의 id입니다.
// 컨트롤의 이벤트는 vb를 참조해야 합니다.
// vb에서 컨트롤의 프로퍼티와 메소드와 이벤트 핸들러를
// 참조할수 있습니다.
// 그전에 regsvr32 control_filename으로 컨트롤을 등록해야 합니다.
// 컨트롤의 OpenComplete이벤트 핸들러에 아래의 함수를 연결하는 것입니다.
Player_OpenComplete();
//-->
</SCRIPT>
<SCRIPT language='Javascript' for='Player' event='PositionChange'>
<!--
Player_PositionChange();
//-->
</SCRIPT>
<SCRIPT language='Javascript' for='Player' event='Timer'>
<!--
Player_Timer();
//-->
</SCRIPT>
<SCRIPT language='Javascript'>
<!--
// tracker를 drag하기 시작했는가? true일땐 drag, false일땐 drag안됨
var dragtracker = false;
// drag하려고 마우스를 누른 위치(X좌표)
// tracker의 가로폭은 10, 마우스를 클릭한 위치대로 움직이게 하려고
var dragplusx;
// volume을 drag하기 시작했는가?
var drag = false;
// volume의 default값은 50(0~100까지)
var vol1 = 50;
// 컨트롤이 연주하려는 오디오파일의 로딩을 다 끝냈을때 실행되는 함수
function Player_OpenComplete()
{
// 비디오라면 원래폭의 크기가 설정된다.
// 비디오가 아니라면 0
// 비디오라면 Display를 보여준다(접속중, 버퍼링중, 등의 메시지를 보여주려고)
if (Player.ImageSourceWidth > 0)
Player.ShowDisplay = 1;
else
Player.ShowDisplay = 0;
// 표시되는 연주시간을 0으로 초기화한다.
Ttime.innerText = FormatTime(0);
// 전체 연주시간을 표시한다.
// FormatTime()는 초로 설정된 값을 분과 초로(:으로) 구분
Llength.innerText = FormatTime(Player.Duration);
}
function Player_PositionChange()
{
// FF, Rew, Tracker등으로 현재위치가 바꼈을때
Ttime.innerText = FormatTime(Player.CurrentPosition);
// 화면의 Tracker sample의 폭은 500,
// 전체시간과 현재위치시간의 비율을 구해서 Tracker를 위치시킨다.
// Tracker의 이동길이는 500, Tracker의 폭은 10
// XTracker이 Tracker, Trackerr은 OnClick을 위해서
XTracker.style.left = Math.floor(Player.CurrentPosition / Player.Duration * 500);
Trackerr.style.left = XTracker.style.left;
}
function Player_Timer()
{
// 컨트롤의 자체 타이머
// 이이벤트가 발생하는 시간은 잘 모르겠다
// 아마 1초에 한번이 아닐까
Ttime.innerText = FormatTime(Player.CurrentPosition);
XTracker.style.left = Math.floor(Player.CurrentPosition / Player.Duration * 500);
Trackerr.style.left = XTracker.style.left;
}
function Open_OnClick()
{
// <INPUT type='file'의 click() 호출(이것도 브라우저 내부적으론 개체다)
File.click();
// 선택된 파일명을 컨트롤에 입력한다
Player.FileName = File.value;
// 파일명을 표시한다.
Filename.value = File.value;
}
function Play_OnClick()
{
// 연주한다.
Player.Run();
}
function Stop_OnClick()
{
// 연주 중지
Player.Stop();
// 연주시간을 0으로 초기화한다.
Ttime.innerText = FormatTime(0);
// OnClick을 위한 가짜 Tracker까지 처음으로 이동
Trackerr.style.left = 0;
XTracker.style.left = Trackerr.style.left;
}
function Pause_OnClick()
{
// 연주 정지
Player.Pause();
}
function Rew_OnClick()
{
// Rew와 FF는 10초 앞 또는 뒤로 이동한다.
// 처리 단위를 frame으로 하지 않고 시간으로 했기 때문이다.
// 이것은 컨트롤을 호출할때
// <PARAM> Tag로 초기화시킬수도 있고,
// 프로그램 실행중에 바꿀수도 있다.
if (Player.CurrentPosition-10 > 0)
Player.CurrentPosition = Player.CurrentPosition - 10;
else
Player.CurrentPosition = 0;
}
function FF_OnClick()
{
Player.CurrentPosition = Player.CurrentPosition + 10;
}
function FormatTime(num)
{
var min, sec;
var str;
// 넘어오는 값은 연주시간이다(전체시간, 연주시간).
// 이 시간을 반올림할 필요는 없다.
// 현재 초단위이기 때문에(프레임단위일수도 있다).
// 문자열로 넘어오기 때문에 숫자로 바꾸려고 이렇게 한 것이다.
num = Math.round(num);
// 몫은 분
min = Math.floor(num / 60);
// 나머지는 초
sec = Math.floor(num % 60);
// 분이 한자리면 앞에 0을 붙인다.
// min은 Javascript변수이나 숫자변수이다.
// toString 메소드로 문자로 바꾼다.
if (min < 10)
str = '0' + min.toString();
else
str = min.toString();
str += ':';
if (sec < 10)
str += '0' + sec.toString();
else
str += sec.toString();
return str;
}
function DragTrackerStart()
{
// 트래커의 드래그가 이미 시작되지 않았다면
// 클릭과 구분하기 위해서다.
// 이함수는 마우스를 눌렀을때 실행된다.
// OnMouseDown
if (!dragtracker)
{
// 길이가 10인 트래커의 어느부분인지 그X좌표를 저장해서
// 트래커가 눌린 그대로 드래그되게 한다.
dragplusx = event.x;
// 마우스 누름을 감지하기 위한 가짜 트래커를 보이지 않게 한다.
Trackerr.style.display = 'none';
// 트래커의 드래그 시작
dragtracker = true;
}
}
function DragTrackerEnd()
{
// 트래커의 드래그가 시작되었다면
// OnClick과 구분하기 위해서
if (dragtracker)
{
// 트래커의 드래그를 끝낸다.
dragtracker = false;
// 가짜 트래커의 위치를 진짜 트래커와 같게 하고,
Trackerr.style.left = XTracker.style.left;
// 가짜 트래커를 보이게 한다.
Trackerr.style.display = 'block';
}
}
function Tracker()
{
var tracker;
// 트래커의 드래그가 시작됐다면
if (dragtracker)
{
// 드래그되는 거리는 마우스의 Move이벤트가 발생한 좌표에서
// 트래커의 클릭된 위치를 빼야 한다.
tracker = event.x - dragplusx;
// 트래커가 범위를 벗어나지 않게 한다.
// 이렇게 하지 않으면,
// 조금 벗어날수도 있다.
if (0 <= tracker && tracker <= 500)
{
// 트래커의 좌표를 이동시킨다.
XTracker.style.left = tracker;
// 전체 연주시간을 트래커의 길이인 500으로 나눈후에
// 트래커가 드래그된 길이를 곱해서
// 현재위치를 설정한다.
Player.CurrentPosition = Math.floor(Player.Duration / 500 * tracker);
}
}
}
function ClickTracker()
{
var tracker;
// 클릭으로 트래커를 이동시킬 경우
// 클릭한 좌표를 트래커의 중간으로 한다(길이가 10).
tracker = event.x - 5;
// 트래커의 이동을 제한한다.
// 트래커의 이동길이는 0~100까지다.
// 약간 벗어날수 있다.
if (tracker < 0)
tracker = 0;
if (tracker > 500)
tracker = 500;
// 클릭한 위치를 연주위치로 바꾼다.
Player.CurrentPosition = Math.floor(tracker / 500 * Player.Duration);
// 클릭한 위치로 트래커를 옮긴다.
XTracker.style.left = tracker;
Trackerr.style.left = XTracker.style.left;
}
function DragStart()
{
// 볼륨의 드래그가 시작되었는가?
if (!drag)
{
// 가짜볼륨을 클릭한 위치를 저장해서
// 볼륨을(길이가 10) 제위치로 이동시킨다.
dragplusx = event.x;
// 가짜 볼륨을 보이지 않게 한다.
// 가짜 볼륨은 마우스의 누름을 감지하기 위한 것이다.
XVolume.style.display = 'none';
// 드래그가 시작됐다.
drag = true;
}
}
function DragEnd()
{
if (drag)
{
drag = false;
XVolume.style.left = Volume.style.left;
XVolume.style.display = 'block';
}
}
function Vol()
{
var vol;
if (drag)
{
vol = event.x - dragplusx;
// 볼륨은 0~100까지다.
if (0 <= vol && vol <= 100)
{
Volume.style.left = vol;
// 어찌된 일인지,
// 내가 사용한 WMP 6.4 Active Movie 컨트롤의 볼륨은
// 0이 가장 큰값이면서 가장 큰 소리고,
// -10000이 가장 작은 값이었다.
// 소리가 거의 나지 않는 -6000을 0으로 잡았다.
// 불롬은 0~100까지지만,
// 실제론 -6000~0까지로
// 볼륨 트래커의 1은 실제론 60이다.
Player.Volume = -6000 + (vol * 60);
}
}
}
function ClickVolume()
{
var vol;
vol = event.x - 5;
if (vol < 0 )
vol = 0;
if (vol > 100)
vol = 100;
Player.Volume = -6000 + (vol * 60);
Volume.style.left = vol;
XVolume.style.left = Volume.style.left;
}
function Mute_OnClick()
{
// Mute는 소리를 끄는 것이다.
// 볼륨을 한번에 0으로 하면,
// '탁'하는 소리가 난다.
// 그소리를 없애려고
// 볼륨을 3씩 루프를 써서 줄이는 방법을 썼다.
var i;
// 볼륨이 -10000이면 뮤트된 것이다.
if (Player.Volume != -10000)
{
for (i=-6000+(vol1*60); i>-10000; i-=3)
Player.Volume = i;
Player.Volume = -10000;
}
else
{
for (i=-10000; i<-6000+(vol1*60); i+=3)
Player.Volume = i;
Player.Volume = -6000 + (vol1 * 60);
}
}
function a100_OnClick()
{
// 원래 크기
Player.MovieWindowSize = 0;
}
function a200_OnClick()
{
// 두배 크기
Player.MovieWindowSize = 1;
}
function sel()
{
// 목록에서 선택된 파일
Player.FileName = List.options(List.selectedIndex).value;
}
//-->
</SCRIPT>
</HEAD>
<!--
마우스가 볼륨이나 트래커의 바깥에서 놓아질수 있다.
-->
<BODY onmouseup='DragEnd();DragTrackerEnd();'>
<DIV style='border:1 solid'>
<TABLE width='600' border='1' bordercolor='blue' cellspacing='0' cellpadding='0'>
<TR height='30'>
<TD colspan='2'>
<!--
clsid는 레지스트리를 봐야 한다.
이용된 컨트롤은 WMP 6.4다.
여러가지를 테스트해봤지만, 플레이어를 만들기에는
6.4가 제일 나은것같다.
다른 버젼의 WMP를 갖고 있는 사용자들도 사용할수 있으려면,
여기에 이용된 컨트롤을 다운받을수 있도록 하는게 좋을것이다.
WMP 6.4의 Active X Control의 파일명은 MSDXM.OCX다.
-->
<OBJECT id='Player' classid='clsid:05589FA1-C356-11CE-BF01-00AA0055595A'>
<PARAM name='AutoStart' value='1'>
<PARAM name='EnableContextMenu' value='1'>
<PARAM name='AutoRewind' value='1'>
<PARAM name='ShowControls' value='0'>
<PARAM name='ShowDisplay' value='0'>
<PARAM name='ShowPositionControls' value='0'>
<PARAM name='ShowSelectionControls' value='0'>
<PARAM name='ShowTracker' value='0'>
<PARAM name='Volume' value='-600'>
<!--
AutoStart는 자동으로 시작되는가
EnableContextMenu는 비디오실행시 팝업메뉴를 허용하는가
AutoRewind는 중지시 자동으로 처음으로 이동하는가
ShowControls은 여러가지 버튼을 보여주는가
ShowDisplay는 접속상태와 연주시간을 보여주는가
ShowPositionControls는 FF, Rew를 보여주는가
ShowSelectionControls는 버튼을 보여주는가
ShowTracker는 자체 트래커를 보여주는가 <-- 디자인된 트래커를 쓸수 있도록 샘플을 만들었다
Volume의 초기값
-->
</OBJECT>
</TD>
</TR>
<TR height='30'>
<TD colspan='2'>
<!--
파일명을 보여주기 위한 텍스트 필드를 읽기전용으로 만든다.
로컬 파일을 선택하기 위한 파일선택 대화상자를 출력하기 위한 것
-->
<INPUT type='text' name='Filename' size='70' readonly>
<INPUT type='file' name='File' style='display:none;'>
</TD>
</TR>
<TR height='30' align='center'>
<!--
연주시간과 전체시간을 출력하기 위한 레이블
-->
<TD width='300'>연주시간 - <LABEL id='Ttime'>00:00</LABEL></TD>
<TD width='300'>총연주시간 - <LABEL id='Llength'>00:00</LABEL></TD>
</TR>
<TR height='30'>
<TD colspan='2'>
<DIV style='overflow:hidden;width:512;height:22;border:1 solid red;left:10;'>
<DIV id='TrackerArea1' style='position:relative;width:512;height:20;top:-1;left:-1;border:1 solid red;'>
<DIV id='XTracker' style='position:relative;width:10;height:20;left:0;background-color:black;'>
</DIV>
</DIV>
<DIV id='TrackerArea2' onclick='ClickTracker()' onmousemove='Tracker()' style='position:relative;width:512;height:22;top:-23;left:-1;border:1 solid red;'>
<DIV id='Trackerr' onmousedown='DragTrackerStart()' style='position:relative;width:10;height:20;left:0;background-color:black;'>
</DIV>
</DIV>
</DIV>
<!--
Tracker1과 Tracker2는 똑같은 길이다.
XTracker과 Trackerr은 똑같은 길이고, 같은 좌표를 갖는다.
트래커를 드래그시키는 마우스의 Move이벤트를 감지하기 위해,
TrackerArea2가 필요하다. 이위에서 마우스가 드래그된다.
클릭도 이위에서 감지된다.
Trackerr은 가짜 트래커로 마우스가 드래그되기 시작할때 누름을 감지하기 위해 사용됐다.
-->
</TD>
</TR>
<TR height='30'>
<TD colspan='2'>
<INPUT type='button' name='Open' value='Open' onclick='Open_OnClick()'>
<INPUT type='button' name='Play' value='Play' onclick='Play_OnClick()'>
<INPUT type='button' name='Stop' value='Stop' onclick='Stop_OnClick()'>
<INPUT type='button' name='Pause' value='Pause' onclick='Pause_OnClick()'>
<INPUT type='button' value='Rew' id='Rew' onclick='Rew_OnClick()'>
<INPUT type='button' value='FF' id='FF' onclick='FF_OnClick()'>
<INPUT type='button' name='Mute' value='Mute' onclick='Mute_OnClick()'>
<INPUT type='button' name='100' value='100' onclick='a100_OnClick()'>
<INPUT type='button' name='200' value='200' onclick='a200_OnClick()'>
<DIV style='position:absolute;overflow:hidden;width:112;height:22;border:1 solid red;'>
<DIV id='VolumeArea1' style='position:relative;width:112;height:20;top:-1;left:-1;border:1 solid red;'>
<DIV id='Volume' style='position:relative;width:10;height:20;left:50;background-color:black;'>
</DIV>
</DIV>
<DIV id='VolumeArea2' onclick='ClickVolume()' onmousemove='Vol()' style='position:relative;width:112;height:22;top:-23;left:-1;border:1 solid red;'>
<DIV id='XVolume' onmousedown='DragStart()' style='position:relative;width:10;height:20;left:50;background-color:black;'>
</DIV>
</DIV>
</DIV>
</TD>
</TR>
<TR>
<TD colspan='2'>
<SELECT name='List' width='400' size='4' onchange='sel()'>
<OPTION value='mms://61.74.69.165/mv2/modern/moden_U/u58.asf'>mms://61.74.69.165/mv2/modern/moden_U/u58.asf</OPTION>
<OPTION value='mms://61.74.69.165/mv2/modern/moden_U/u47.asf'>mms://61.74.69.165/mv2/modern/moden_U/u47.asf</OPTION>
<OPTION value=''></OPTION>
<OPTION value=''></OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
</DIV>
<pre>
MSDXM.OCX파일은 자료실에 등록신청해 놓겠습니다.
</pre>
</BODY>
</HTML>
관련자료
-
링크
-
첨부등록일 2003.09.02 09:02
댓글 0
등록된 댓글이 없습니다.
