2010. 4. 22. 13:44
.NET/WPF

미디어플레이어 (동기화해결)


우선 전에 썼었던 MediaTimeline과 MediaClock 클래스를 사용하지않았다.

Timeline을 셋팅하고 그 상태서 Clock을 생성하고 그 Clock을 MediaElement와 연결했지만

연결을 하게되면 MediaElement로 제어가 되질않고  미디어엘리먼트의 클락의 컨트롤러로 제어를 해야됐다. 그리고  MediaElement에 position을 지정 해줄수 가 없었다. position을 임의로 지정하게 되면

미디어를 지정하는동안 클락을 변경할 수 없다 라는 오류가 난다.

이것을 해결하기위해서 여러 방법을 써봤는데 해결하지 못하였고

결국 MediaTImeline과 MediaClock을 사용하지 않는 방법을 사용하였다.

해결방법은

DispatcherTimer를 이용하였는데  우선 bool 변수를 하나 선언해서

매초마다 이벤트가 발생해서 미디어 -> 슬라이더바가  변경 될때와

슬라이더바가 움직여서 영상이 바뀔때가 겹치지않게 bool로 제어를 해주었다.


아래와같다~!

bool con = false;

//마우스를 떼면 false로 바뀌고 Tick이 다시 계속 실행된다.
private void timebar_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
      con = false;            
}        

//마우스를 클릭하면 true로 바뀌고
private void timebar_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
      con = true;
}

//클릭하면서 true로 바뀌었고  Tick이 발생안한다. 그 때 바를 움직여서 Position을 바꿔놓는다.
private void timebar_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
       if (con)
      {
       int SliderValue = (int)timebar.Value;

       TimeSpan ts = new TimeSpan(0, 0, 0, 0, SliderValue);

       mediaElement1.Position = ts;
       }
}

//초기값이 false이기 때문에 계속 실행된다.
void timer_Tick(object sender, EventArgs e)
{
    if (!con)
    {
        timebar.Value = mediaElement1.Position.TotalMilliseconds;   
              
        TimeSpan ts = new TimeSpan();
        ts = mediaElement1.Position;
                
        textBox1.Text = (string)ts.Seconds;
                
    }
}   


'.NET > WPF' 카테고리의 다른 글

동적으로 컨트롤 생성하기  (0) 2010.07.21
WPF에서 사용자정의컨트롤 쓰기  (0) 2010.04.26
WPF에서 미디어 플레이어 만들기  (1) 2010.04.19
사용자지정과 사용자정의 컨트롤 차이  (0) 2010.04.18
의존속성  (0) 2010.04.16
Posted by 아몰라
2010. 4. 19. 19:57
프로그래밍 기초/기타

OPEN API(MAP 사용편)


네이버 OPEN API 나 DAUM OPEN API나 키 발급받는것은 비슷하기 때문에 올리지 않겠다.

키 발급받을대 주의 사항은 URL을 적는게 있는데 키 발급받은걸 사용하려면 키 발급받을때 적은 URL과 똑같이 만들어서 사용하던가 아니면 해당 URL의 하위폴더로해서 만들면 된다.



네이버


<Script type="text/javascript"
src="http://map.naver.com/js/naverMap.naver?key=발급받은 키">
</script>
 
</head>
<body>

<div id='mapBox' style='width:600px;height:600px'></div> //맵 사이즈 지정
   
<script type ="text/javascript">

    //****************************** Map 생성 ******************************
    var map = new NMap(document.getElementById('mapBox'));
    map.setCenterAndZoom(new NPoint(321198, 529730), 3);

    //****************************** NZoomControl 생성 ******************************
    var zoom = new NZoomControl();
    zoom.setAlign("left");    // 슬라이드바의 좌우 설정
    zoom.setValign("top");  // 슬라이드바의 위,아래 설정
    map.addControl(zoom);
    map.addControl(new NIndexMap());  // 미니맵 생성


    //****************************** 이벤트 리스너******************************
    var regFlag = false;

    function addClick() {  //맵이라는 객체에서 클릭이라는 이벤트가 발생하면 clicked라는 함수를 호출한다.

           NEvent.addListener(map, "click", clicked);
            regFlag = true;
        }
    }

    function removeClick() {   //등록된 이벤트리스너를 해제시킨다.
  NEvent.removeListener(map, "click", clicked);
        regFlag = false;
    }

    function clicked(pos) {
        alert("이곳의 좌표 : " + pos);
    }


    //****************************** 마크생성 ******************************
    var cnt = 0;
    NEvent.addListener(map, "click", clickMap);

    function clickMap(pos) {
        if (cnt >= 20) {
            alert('마커는 20개까지만 추가 가능합니다.');
            return;
        }

        cnt++;
        map.addOverlay(createMarker(pos, cnt, "마커" + cnt));
    }
   
    function createMarker(pos, count, content) {
        var iconUrl = "http://cfs.tistory.com/blog/plugins/tatterDesk/image/ico_tag.gif";
        var marker = new NMark(pos, new NIcon(iconUrl, new NSize(15, 14)));

        NEvent.addListener(marker, "mouseover", function(pos) { //마우스가 마커객체있을시에 정보를보여준다.
      infowin.set(pos,
            "<TABLE style='width:80px;height:50px;border:solid 1px #666666'><TR><TD>" + content + "  "+ pos + "</TD></TR></TABLE>"); infowin.showWindow()
        });

        NEvent.addListener(marker, "mouseout", function() { infowin.hideWindow(); });
//마우스가 나가면 정보를 안보여준다.
return marker;
    }     
   

    var infowin = new NInfoWindow();
    map.addOverlay(infowin);

   

</script>
    
    <button onclick='map.zoomIn()'>+</button>
    <button onclick='map.setZoom(1)'>1</button>
    <button onclick='map.setZoom(3)'>2</button>
    <button onclick='map.setZoom(5)'>3</button>
    <button onclick='map.setZoom(7)'>4</button>
    <button onclick='map.zoomOut()'>-</button>
   
<button onclick=addClick()>click event 실행</button><button onclick=removeClick()>click event 제거</button>
</body>
</html>



DAUM



<Script type="text/javascript" src="http://apis.daum.net/maps/maps2.js?apikey=발급받은 키script>
</head>
<body>

<div id="map" style="width:600px;height:400px;"></div> 
   
<script type ="text/javascript">      
   
    var cnt;
    //맵 생성
    var map = new DMap("map");
    map.setCenter(new DLatLng(37.529196714213114, 126.92506196011036), 2);
   
   
    //주요 컨트롤 셋팅
    var indexMapControl = new DIndexMapControl();
    var zoomControl = new DZoomControl();
    var mapTypeControl = new DMapTypeControl()
   
    map.addControl(indexMapControl);
    map.addControl(zoomControl);
    map.addControl(mapTypeControl);
   
    indexMapControl.setAlign("left");
    zoomControl.setVAlign("middle");
   
  
   //이벤트리스너 등록
   DEvent.addListener(map, "click", clickMap);
  
   //이벤트발생
   function clickMap(pos) {
        if (cnt >= 20) {
            alert('마커는 20개까지만 추가 가능합니다.');
            return;
        }

        cnt++;
        map.addOverlay(createMarker(pos));
    }
 
    //마커생성
    function createMarker(pos) {
       
        var marker = new DMark(pos);                    
       
        return marker;
   }

</script>
    
 
</body>
</html>


결론은 네이버나 DAUM이나 사용하는 함수나 방법은 거의 똑같다. 단 DAUM은 로드맵이나 더 많은 클래스들과 기능들을 제공해주는 거같다. 개인적으로 DAUM을 더 추천한다.

위에 예제는 그냥 API를 갔다 붙여서 쓰는정도 밖에 안되서 적절한 예제는 아니지만

활용방법 하나 예를 들자면 DB에 어느 특정 지역에대한 정보를 입력해놓고 맵을 마우스로 클릭했을때 마커를 등록시켜 해당 마커의 정보와 DB에 있는 데이터와 비교해서 찍은곳이 같은 곳일시에 DB에 그 해당 지역에 대한 정보들을 등록해놨던것을 보여주는 활용방법이 있겠다.

원래는 실현해볼려고했는데 자바스크립트도 잘모르겠고 뭔가 모르게 잘 안되서...나중에 꼭 다시 해서 API 활용법을 올리도록하겠다!~




Posted by 아몰라
2010. 4. 19. 19:13
.NET/WPF

WPF에서 미디어 플레이어 만들기


주요 클래스

 

 

MediaElement – 오디오 및 비디오를 컨트롤 할 수 있게 해주는 클래스

 

- 미디어를 대화형으로 중지, 일시 중지 및 재생할 수 있으려면 MediaElement의 LoadedBehavior속성을 Manual로 설정해야 합니다

 

 

 

MediaTimeline - MediaTimeline은 해당 영상 Timeline 개체에서 영상을 제어하는 것과 같은 방식으로 미디어 타이밍에 대한 제어를 제공하는 개체

 

- MediaTimeline에는 연결된 Duration 및 BeginTime 속성이 있으며 이 속성을 사용하여 미디어의 시작 시간과 재생 시간을 지정할 수 있다.

 

 

 

MediaClock - 미디어의 타이밍 상태를 유지 관리한다.

 

 

 

 

클래스간의 연동

 

 

- MediaTimeline 개체에서 생성된 Clock개체를 생성해서 MediaClock으로 값을 대입해주고 MediaClock을 MediaElement와 연결 시켜준다.

 

예)

1. MediaClock  mc =  MediaTimeline.CreateClock();

 

2. mediaelement.Clock = mc;

 

당연히 위에 타임라인에서 클락을 생성할 때 타임라인에는 기본적인 정보들이 들어가 있어야 한다.

 

 

 

 

 

미디어플레이어만들기

 

 

1.     미디어가 정보들이 셋팅되어서 열릴 준비가 되었을 때

 

타임슬라이더바에 전체시간 적용

private void mediaElement1_MediaOpened(object sender, RoutedEventArgs e)

        {           

            timebar.Maximum = mediaElement1.NaturalDuration.TimeSpan.TotalMilliseconds;

}

 

 

 

2.     미디어를 열 때

 

파일을 열고 클락과 엘리먼트를 연동시켜준 후 이벤트를 등록한다.

private void open_Click(object sender, RoutedEventArgs e)

        {           

            ofd = new OpenFileDialog(); 

            ofd.Filter = "Media file (*.*)|*.*"; //파일 필터링

           

            ofd.ShowDialog();  //다이얼로그 박스 띄우기

            try

            {

                volume_slider.Value = 0.5;

                Uri uri = new Uri(ofd.FileName); //선택한 파일 데이터타입 uri로 형변환

                                        

                volume_slider.Value = mediaElement1.Volume * 10;

 

                timeline.Source = uri;

                TimeSpan tp = new TimeSpan(0, 0, 0);

                timeline.BeginTime = tp;

                timeline.Duration = mediaElement1.NaturalDuration;

               

                mc = timeline.CreateClock();                               

                mediaElement1.Clock = mc;

               

                mc.CurrentTimeInvalidated += new EventHandler(_CurrentTimeInvaildated);

               //미디어 타임이벤트 등록

            }

            catch { }

        }

 

 

 

 

 

 

3.     미디어타임 이벤트 발생시

 

시간변경시 타임슬라이더바 값 변경

private void _CurrentTimeInvaildated(object sender, EventArgs e)

        {

           timebar.Value = mediaElement1.Position.TotalMilliseconds;                                

        }

 

 

 

4.     타임슬라이더 위치 수동으로 변화시

 

마우스 끌어서 슬라이더바 특정시간으로 옮기기

private void timebar_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)

        {           

           int SliderValue = (int)timebar.Value;                           

 

           TimeSpan ts = new TimeSpan(0, 0, 0, 0, SliderValue);

 

           try

           {

               mediaElement1.Position = ts;    //위치변화              

           }

           catch { }

 

           mediaElement1.Clock.Controller.Resume();          

        }       

       

        

        private void timebar_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)

        {

            mediaElement1.Clock.Controller.Pause();

        }

사실 위와같이 하면 포지션의 위치가 바껴야되는게 맞지만 클락과 엘리먼트가 연동되있는 상태에서는 이것이 안되는걸 발견하였다.

 

이러한 오류가발생한다.

미디어 플레이어에 클럭이 지정되는 동안 이 작업을 수행할 수 없습니다

그래서 이것을 해결하기위해 미디어를 정지시켜놓고도 해보고  클락을 해제했다가도 해보고 여러가지 방법을 써봤지만 해결을 못하였다.

 

결론은 일단은 클락을 연동안시키고 해결하는 방법밖에 없다. 그러면 슬라이더바만을 특정시간으로 이동시킬수 있다.

 

방법이 있겠지만 아직 해결못하여서 해결되게되면 업데이트 하겠다.

5.     재생, 정지, 잠시멈춤, 다시재생

 

 


private void button1_Click(object sender, RoutedEventArgs e)

        {

            mediaElement1.Clock.Controller.Begin();           

        }

 

        private void stop_Click(object sender, RoutedEventArgs e)

        {

            mediaElement1.Clock.Controller.Stop();

           

            timebar.Value = 0;

           

        }

 

        private void pause_Click(object sender, RoutedEventArgs e)

        {

            mediaElement1.Clock.Controller.Pause();

        }

 

        private void pause_r_Click(object sender, RoutedEventArgs e)

        {

            mediaElement1.Clock.Controller.Resume();

        }

 

 

 

TIP – 위에서는 타임슬라이더 연동하는것만 나왔는데 볼륨슬라이더도 있다. 볼륨슬라이더는 아주 쉬운 방법으로 영상과 연동시켰다.

 

XAML 코드에 바인딩만 추가 하면 된다.

 

Value="{Binding ElementName=mediaElement1 , Path=Position, Mode=TwoWay}"

 

 
시간이 되면 못다한 기능들을 더 추가해야겠다!~! 

 

 

 

'.NET > WPF' 카테고리의 다른 글

동적으로 컨트롤 생성하기  (0) 2010.07.21
WPF에서 사용자정의컨트롤 쓰기  (0) 2010.04.26
미디어플레이어 (동기화해결)  (0) 2010.04.22
사용자지정과 사용자정의 컨트롤 차이  (0) 2010.04.18
의존속성  (0) 2010.04.16
Posted by 아몰라

티스토리툴바