본문 바로가기

카테고리 없음

[불펌] 미디어플레이어 제어 버튼 만들기

출처 : http://blog.naver.com/powerlee12/40043008186

검색슬라이더

<DIV id="progressBar" style="Z-INDEX: 6; POSITION: absolute; top:0px; left: 0px;" LANGUAGE="javascript" onmousedown="return progressBar_onmousedown()" onmouseover="this.style.cursor='hand'"><img src="../img/player/vod_player_slider.gif"></DIV>
              <DIV style="Z-INDEX: 5; POSITION: absolute; left: 0px; top: 0px;"><img src="../img/player/vod_player_slider_on.gif" width=1 height=4 name="position_bg"></DIV>


시간 나오는 부분

<span id="CurrentPosition">00:00</span>/<span id="Duration" class='gray02'>00:00</span>


시작및 멈춤

<SPAN id="pause_botton" style="VISIBILITY: hidden; POSITION: absolute;left: 370px; top: 735px;"><img src="../img/player/vod_btn_pause.gif"  border="0"  style="CURSOR: pointer" onClick="playerControl('pause')"></SPAN><SPAN id="play_botton" style="VISIBILITY: hidden; POSITION: absolute;left: 370px; top: 735px;"><img src="../img/player/vod_btn_play.gif"   border="0" style="CURSOR: pointer"  onClick="playerControl('play')"></SPAN>


정지

<a href="#" onClick="playerControl('stop')"><img src="../img/player/vod_btn_stop.gif"></a>



볼륨 제어

<div style="Z-INDEX: 1; POSITION: absolute;left: 0px; top: 0px;">
 
  <img src="../img/player/vod_player_slider_on.gif" width=1 height=4 name="vol_position_bg"></div>


   <div id="VolumeBar" style="Z-INDEX: 2; POSITION: absolute; height: 1px; left: 0px; top: 0px;" language="javascript" onMouseDown="VolumeBar_onmousedown()" onMouseOver="this.style.cursor='hand'">
       
       <img src="../img/player/vod_player_slider.gif" width=15 height=6></div>






5초후 부터 동영상 시작 하는 부분(버퍼링동안 광고처리)

<script language=javascript>
function playstart()
{
setTimeout('playerControl(\'open\')', 5000);
}
</script>



슬라이더를 위한 이벤트 스크립트

<SCRIPT language="javascript" event="Buffering(bStart)" for="MediaPlayer">
    if (bStart)
    {   
        idI = window.setInterval("progressBuffering()",100);
    }else{
        clearTimeout(idI);   
    }
</script>















동영상 제어를 위한 자바스크립트 부분


<SCRIPT language="javascript">
<!--
var oldPos = 0;            //클릭시 마우스좌표
var oldPixel = 0;        //클릭시 슬라이더 좌표
var bDrag = false;            //움직임
var bPlay = false;                //플레이중

/********************************************************************
재생 관련
********************************************************************/
var progressBar_StartPixel =0;        //플레이바 시작위치
var progressBar_Size = 240;        //플레이바 크기
function progressBar_onmousedown() {
    if (!bPlay)
        return ;
       
    if (MediaPlayer.CurrentPosition == -1 )        //Player.FileName이 설정되어 있지 않으면 걍 리턴해 버린다.
        return false;

    oldPos = event.clientX;
    bDrag  = true;
    TrackBar = event.srcElement.parentElement;
    oldPixel = progressBar.style.pixelLeft;
    document.onmousemove = PlayMoveSlider;
    if(document.all)
    {
        document.onmouseup = PlayStopSlider;
    }
}

function PlayMoveSlider() {
    if (bDrag) {
        var XPos = oldPixel + (event.clientX - oldPos);    //최초 마우스다운일때 좌표에서 mousemove한 좌표값
        if((progressBar_StartPixel <= XPos  )
            && (XPos <= progressBar_StartPixel + (progressBar_Size  ) ) )   
        {
       
            //프로그래스바 이동
            document.all.progressBar.style.pixelLeft = XPos;
               
        }//if((XPos >= startVolPos) &&....
        return false;
    }
   
}


function PlayStopSlider() {

    bDrag = false;
       
    MediaPlayer.currentPosition  = Pixel2Pos(progressBar.style.pixelLeft - progressBar_StartPixel)
    if (MediaPlayer.PlayState == 1)    //일시 중지 일때, 즉 스라이더 움직임에 의해 중단되었을 때만, 다시 실행
        MediaPlayer.Play();       
      
    document.onmousemove = null;
    if(document.all);
        document.onmouseup = null;
}   

function Pixel2Pos(nPixel)
{
        return parseInt((nPixel) * MediaPlayer.Duration / progressBar_Size);
}


/*********************************************************************
volume관련
**********************************************************************/
var imgpath = "http://ucc.show.co.kr/img/player";
var volumeMin = -3000;       
var volumeMax = 0;
var volumeValue = 0;
var oldVolume = 0;
var VolumeBar_StartPixel = 0;
var VolumeBar_Size = 34;    //볼륨바 크기

function VolumeBar_onmousedown() {
    if (!bPlay)
        return ;
       
    oldPos = event.clientX;                            //최초 마우스다운일때 좌표
    oldPixel = VolumeBar.style.pixelLeft;                //최초 마우스다운 일때 슬라이더좌표
    oldVolume = MediaPlayer.Volume
    bDrag = true;
    document.onmousemove = VolumeMoveSlider;            //onmousemove캡쳐
    if (document.all)
        document.onmouseup=VolumeStopSlider;        //onmousemove 해제
}

function VolumeMoveSlider() {
    if (bDrag) {
        var XPos = oldPixel + event.clientX - oldPos;    //최초 마우스다운일때 좌표에서 mousemove한 좌표값
       
        if((VolumeBar_StartPixel <= XPos  )
            && (XPos <= VolumeBar_StartPixel + VolumeBar_Size ) )   
        {
           
            VolumeBar.style.pixelLeft = XPos;    //마우스 이동한 만큼 슬라이더 이동
            vol_position_bg.style.width = VolumeBar.style.pixelLeft - VolumeBar_StartPixel;
            var mouseMove = XPos - oldPixel;    //마우스이동값
            var currentVolumeValue = oldVolume - parseInt(mouseMove * volumeMin / VolumeBar_Size );
           
            if( currentVolumeValue <= -4929)
                MediaPlayer.Volume = volumeMin;
            else if (currentVolumeValue >= volumeMax)
                MediaPlayer.Volume = volumeMax;
            else
                MediaPlayer.Volume = currentVolumeValue;   
   

        }
        return false;
    }//if (bDrag)
}

function VolumeStopSlider() {
    bDrag = false;
}

function VolumeInit() {

    //볼륨초기화
    VolumeBar.style.pixelLeft = VolumeBar_StartPixel + VolumeBar_Size /2  ;
    vol_position_bg.style.width = VolumeBar.style.pixelLeft - VolumeBar_StartPixel;
    MediaPlayer.Volume =  volumeMin / 2;
}


function playerControl(action)
{
    try {
        if (action == "play")
        {   
            MediaPlayer.Play();
   movie_rap.style.visibility = "hidden";
   play_botton.style.visibility = "hidden";
            pause_botton.style.visibility = "visible";
  
           
        }
        else if (action == "pause")
        {       
            if (MediaPlayer.PlayState ==2)
                MediaPlayer.Pause();
    movie_rap.style.visibility = "hidden";
     play_botton.style.visibility = "visible";
            pause_botton.style.visibility = "hidden";
     
           
        }
        else if (action == "open")
        {
            try{
                MediaPlayer.open("<%=filename_url%><%=filename_m%>");  //동영상 경로 설정
                movie_rap.style.visibility = "hidden";
     play_botton.style.visibility = "hidden";
                pause_botton.style.visibility = "visible";
   
            }catch(e){}
           
            //볼륨셋팅   
            VolumeInit();
        }
       
        else if (action == "stop")
        {   
          
            MediaPlayer.Stop();
   play_botton.style.visibility = "visible";
            pause_botton.style.visibility = "hidden";
            //볼륨셋팅   
            VolumeInit();
        }
    }catch(e){
        alert("재생되지 않는 동영상 파일이거나\nMicrosoft Widows Media Player6.4 이상이 설치되어 있지않습니다.");
    }
}


//플레이 트랙바 자동이동-----------------------------------------------------------------------------------
function ScrollBarState() {

    CurrentPosition.innerHTML = TimeFormat(MediaPlayer.CurrentPosition);
    Duration.innerHTML = TimeFormat(MediaPlayer.duration);
   
    if(bDrag == false)
    {
        progressBar.style.pixelLeft = progressBar_StartPixel + parseInt(MediaPlayer.CurrentPosition*progressBar_Size/MediaPlayer.duration);
    }
        position_bg.width =parseInt(MediaPlayer.CurrentPosition*progressBar_Size/MediaPlayer.duration);
   
}


function TimeFormat(totalsecond)
{
   
    var second = parseInt(totalsecond) % 60;
    var minute = parseInt(totalsecond / 60);   
    return ((minute < 10)?"0":"")+minute+":" + ((second < 10)?"0":"")+second;
}

function progressBuffering(bPlay)
{
    if(bPlay)
    {
     
    }
    else
    {
 
    }
       
}
function onFullScreen()
{
    MediaPlayer.DisplaySize = 3;
}
function onView(width,height)
{
    document.all["MediaPlayer"].style.width = width;
    document.all["MediaPlayer"].style.height = height;

}
//-->
</SCRIPT>
<SCRIPT language="javascript" event="PlayStateChange(OldState,NewState)" for="MediaPlayer">
    switch (NewState){
   
        case 0:       
            play_botton.style.visibility = "visible";
            pause_botton.style.visibility = "hidden";
            try{clearTimeout(MediaTimer);    }catch(e){return;}
            bPlay = true;
            progressBuffering(false);
            break;
        case 1:       
            play_botton.style.visibility = "visible";
            pause_botton.style.visibility = "hidden";
            try{clearTimeout(MediaTimer);    }catch(e){return;}
            bPlay = true;
            break;
        case 2:        //플레이중  
      play_botton.style.visibility = "hidden";
            pause_botton.style.visibility = "visible";
            MediaTimer=window.setInterval("ScrollBarState()",500);           
            bPlay = true;
            progressBuffering(false);
            break;
        case 3:        //버퍼링중..
            progressBuffering(true);
            break;
        case 6:        //버퍼링중..       
            progressBuffering(true);
            break;
        default:
   
    }
</SCRIPT>