달력

02

« 2012/02 »

  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  •  
  •  
  •  

'mediaelement'에 해당되는 글 2

  1. 2008/08/11 [세티의 실버라이트] 15. 미디어
  2. 2008/06/09 [세티의 실버라이트] 8. 미디어 (2)
2008/08/11 00:21

[세티의 실버라이트] 15. 미디어 Silverlight2008/08/11 00:21

원글출처 : http://silverlight.net/quickstarts/blend_quickstart/part5_working_with_media.aspx 본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.

안녕하세요. ^^
모두 휴가는 잘 다녀오셨는지 궁금합니다.

음... 전 아직 휴가를 갔다오지 못했습니다. 바뻐서 그랬던 것은 아니구요. 휴가 때 밖으로 나가면 꽤 번잡하잖아요? ㅎㅎ 전 그게 싫어서 좀 한가할 때 갈려고 기회를 엿보고 있는 중입니다. ^^

그나저나 날씨가 요즘 너무 더워요..헥헥. 무더운 날씨에 지치지 않을려고 이것저것 막 챙겨먹고는 있는데 그것들이 체력 보강으로 이어지진 않고, 뱃살로 이어지고 있습니다. 이일을 어찌해야 좋을지 막막한 요즘입니다. ^^;

늘어나는 뱃살과 먹는 것의 즐거움을 알아버린 세티지만 무더운 더위에 지치지 않고 글을 쓸수 있는 즐거움도 함께 가져갈려고 노력하고 있습니다.^^*

아무튼 힘내서 이번 시간에는 Blend2.5를 이용한 미디어 플레이어 만들기를 해보겠습니다.

먼저 미디어 플레이어를 만들기 위해서 WMV 동영상 파일이 하나 있어야 합니다.
WMV파일 구하러 검색하는 것도 일인데 그냥 아래의 주소에서 편하게 다운로드 받으시면 됩니다.^^
http://www.microsoft.com/windows/windowsmedia/musicandvideo/hdvideo/contentshowcase.aspx

위에서 다운로드 받은 동영상을 이제 추가해야 합니다. 어디에 추가하냐구요?

미디어 플레이어를 만들기 위해 새로운 프로젝트를 하나 생성할까 합니다.
새로운 미디어 플레이어를 위한 프로젝트의 이름을 MediaPlayer 라고 하겠습니다.

프로젝트를 생성하셨다면 이제 Canvas 가 필요합니다.
Object and Timeline에서 Canvas 객체를 추가합니다.
자. 다 만드셨죠? 그럼 이제 동영상을 추가해 보겠습니다.

동영상은 솔루션 탐색기에 필요한 동영상 리소스를 추가하고, 캔버스 객체에 마우스로 드래그해서 옮겨 놓으면 됩니다. 동영상 파일의 추가는 아래의 그림처럼 마우스로 동영상을 드래그 해서 놓아도 되고, Blend 2.5 상단 메뉴에 있는 Project를 선택한 후 Add Existing Item...이라는 메뉴를 선택해서 등록해도 됩니다.

사용자 삽입 이미지

이것도 귀찮다면 단축키 Ctrl + I 를 이용하면 됩니다.^^

미디어 파일을 추가하고 나면 아래의 이미지 처럼 Project 판넬에 추가된 영상이 표시됩니다.(이미지도 이것과 같은 방법으로 추가할 수 있습니다.)
사용자 삽입 이미지

다음으로 지난 포스트에서 생성했던 버튼 컨트롤을 추가합니다.
Play, Stop, Pause 버튼을 빌드하고 나면 프로젝트가 있는 하위 bin 폴더에 dll 파일이 생성되어 있습니다.
그것을 참조추가하여 버튼 컨트롤을 사용할 수 있습니다.
참조추가 하는 방법은 아래의 그림처럼 하시면 됩니다.
사용자 삽입 이미지
(마우스 우클릭하여 참조추가하기)

사용자 삽입 이미지
(이전 포스트에서 만든 컨트롤을 빌드하면 나오는 dll 파일)


이제 추가된 dll에서 가져올 사용자 컨트롤이 모두 있는지 확인해보겠습니다.
아래의 첨부된 이미지에서 처럼 자산 라이브러리[ >> ]를 클릭하면 모든 사용자 컨트롤이 확인 가능합니다.
사용자 삽입 이미지

확인된 버튼 사용자 컨트롤을 더블 클릭을 하여 모두 추가합니다.
사용자 삽입 이미지

이제 미디어 플레이어를 만들기 위한 기본적인 준비가 완료되었습니다.

여기서 우리가 한가지 알아야 할 것이 있는데요. 현재는 하나의 프로젝트 내에 캔버스, 버튼 사용자 컨트롤, 동영상 파일과 같은 것들이 모두 각각의 객체의 형태로 존재하고 있습니다.

미디어플레이어에서는 이것들을 하나의 유닛으로 만들어야 할 필요가 있습니다.
그래서 캔버스 아래에 모든 객체들을 묶어 놓아야 합니다. 그러기 위해선 이것들을 그룹화 시켜야 합니다.
그룹화 하는 방법은 아래의 그림처럼 Group Into(그룹으로 묶기)로 합니다.

사용자 삽입 이미지

아래의 그림은 그룹화가 잘 되었을 때 보여지는 ArtBoard의 캡쳐 이미지 입니다.
사용자 삽입 이미지

이제 버튼 컨트롤에 따라 영상이 움직이도록 할 차례 입니다.
미디어를 추가하면 자동으로 MediaElement 엘리먼트가 생성됩니다. 그리고 MediaElement는 동영상의 플레이 스타일을 Auto로 가지게 됩니다. 우리는 여기서 버튼을 클릭했을 때 동영상이 플레이되도록 할 것이므로 MediaElement에 하나의 속성을 추가할 것입니다.

아래의 그림에서 처럼 MediaElementLoadedBehavior 속성값으로 Stop을 설정합니다.
사용자 삽입 이미지

원래 원문을 살펴보면 MediaElementAutoPlay의 속성값으로 False를 넣으라고 되어 있는데 Blend 2.5에서 해당 속성을 찾을 수 없었습니다.
사용자 삽입 이미지
(미디어엘리먼트에 설정 가능한 속성들)

자아. 아무튼 계속 진행합니다.
이제 각각의 버튼 사용자 컨트롤에 이벤트를 연결해야 합니다. 마우스의 왼쪽 버튼이 해당 버튼을 클릭하였을 때 동작하는 이벤트의 이름을 MouseLeftButtonDown 속성값에 넣어줍니다. 아래의 그림 처럼 말이지요.

사용자 삽입 이미지

자 이제 C# 파일에 이벤트 메서드를 추가만 해주면 끝나게 됩니다.

사용자 삽입 이미지

이제 미디어 플레이어 실행을 위한 준비가 모두 마무리 되었습니다.
F5키를 클릭하여 미디어의 동작 여부를 확인하는 부분은 각자 개인에게 맡기겠습니다.

이상으로 Blend 2.5를 이용한 실버라이트 애플리케이션 개발에 대해 간략하게 알아보았습니다.
좋은 하루 되십시오.^^
Posted by -세티-
2008/06/09 09:00

[세티의 실버라이트] 8. 미디어 Silverlight2008/06/09 09:00

원글출처: http://silverlight.net/quickstarts/silverlight10/media.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.

미디어
(Media)


이번 시간에는 실버라이트가 제공하는 미디어엘리먼트(MediaElement)에 대해 알아보겠습니다. 실버라이트의 MediaElement 객체는 WMVWMA파일, mp3와 같은 타입의 파일을 플레이하기 위해서 사용합니다.

MediaElement에 대해 알아보기 위해 우리는 웹 페이지에 미디어 파일을 추가 하고 유용한 MediaElement 속성과 미디어를 재생하는 컨트롤 방법을 다뤄보고 풀-스크린으로 미디어를 재생해 보고 비디오를 이용한 페인팅을 다뤄보겠습니다.

먼저 학습을 위해 간단한 샘플을 만들겠습니다. 그러기 위해선 하나의 웹 페이지를 생성하고 그 속에 미디어를 삽입하도록 하겠습니다.

작업순서.
1. Canvas 태그에 MediaElement를 추가합니다.
2. Source 속성에 URI 경로를 설정합니다.


아래는 예제 코드 입니다.
사용자 삽입 이미지
사용자 삽입 이미지

와~ 단 한줄의 코드로 미디어를 재생할 수 있다니... 정말 대단합니다.^^

실버라이트 XAML 코드는 앞의 강좌에서 언급했듯이 엘리먼트 하나하나가 속성을 가지고 있고, 또 객체로 되어 있습니다. 그래서 보다 다양한 멀티미디어 효과를 줄 수 있고, 보다 쉽게 그러한 기능들을 추가할 수 있습니다. 앞에 만든 미디어에 동그란 원을 하나 추가 해보겠습니다. 동그란 원을 추가 위해서 Ellipse 엘리먼트를 사용하도록 하겠습니다.
사용자 삽입 이미지
사용자 삽입 이미지

이야~ 렌더링이 잘 되었군요. 요즘 인기 많은 소녀시대의 '채연' 님을 동그란 원안에 넣어봤습니다.^^;
음! 여러 UI엘리먼트를 조합해서 원하는 결과물을 정말 쉽고 편하게 만들어 낼수 있겠군요.

계속 이어서 MediaElement에 대해 조금 더 알아보겠습니다. 다른 엘리먼트들과 마찬가지로 MediaElement도 몇 가지 유용한 속성을 가지고 있습니다.

MediaElement를 위한 유용한 속성값은?
Stretch - MediaElement에 비디오를 채운다. 가능한 값으로는 None, Uniform, UniformToFill 그리고 Fill 이 있으며, 기본값은 Fill 입니다.


사용자 삽입 이미지

Stretch = "none" 일 때


사용자 삽입 이미지

Stretch = "UniformToFill"일 때

그 다음으로는 볼륨과 관련된 속성이며, IsMutedVolumn 이 있습니다. 미디어가 소리 조절이 안되면 안되겠죠.^^;
IsMuted - true와 false를 설정할 수 있으며, 기본값은 false 입니다.
Volumn - 0에서 1까지 설정이 가능하며 기본값은 0.5 입니다.


다음으로는 미디어 재생과 관련된 메서드가 있겠는데요~ Play, Pause, Stop 메서드를 사용하여 미디어 재생을 컨트롤 할 수 있습니다. 미디어 재생과 관련된 예제 코드는 아래와 같습니다.
사용자 삽입 이미지

사용자 삽입 이미지

사용자 삽입 이미지

그러나 이러한 미디어를 작은 화면으로 본다는 것은 너무 답답한 일임에 틀림없습니다.^^
따라서 우리는 이 미디어를 풀-스크린 모드로 보기를 원하며, 또 그렇게 되어야 할 것입니다.
미디어 재생에서 실버라이트 플러그-인의 FullScreen 속성을 설정하기 위해서는 ActualWidthActualHeight의 사이즈를 설정해야 합니다.

아래의 코드를 위에 작성한 코드에 추가 합니다. 추가할 코드는 다음과 같습니다.

<!-- 풀 스크린 모드를 위한 XAML 코드 -->
    <Canvas MouseLeftButtonDown="toggle_fullScreen"
      Canvas.Left="190" Canvas.Top="265">
      <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
         Height="30" Width="85">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="Gray" Offset="0.0" />
            <GradientStop Color="Black" Offset="1.0" />       
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5"
        Foreground="White" >full screen</TextBlock>
    </Canvas> 

풀-스크린 제어와 관련된 메소드는 이미 위의 js 파일에 추가해 놓았으며, 해당 메소드의 이름은 canvas_loaded(Object, Param), toggle_fullscreen(Object, Param), onFullScreenChanged(Object, Param) 입니다.

여기까지는 기본적인 미디어 기능이었습니다. 하지만 요즘처럼 다양한 멀티미디어 콘텐츠가 응용되는 세상에서 단순하게 미디어 재생만 된다면 좀 재미가 없겠죠? 그래서 소개할려는 것이 비디오브러쉬 입니다.
우리는 실버라이트 MediaElementVideoBrush 기능을 사용하여 글자의 배경에 미디어를 재생할 수 있습니다.

VideoBrush 기능을 사용하기 위해선 아래와 같은 순서로 작업을 해야 합니다.
1. VideoBrush 엘리먼트를 생성합니다.
2. MediaElement를 생성하고 Name을 할당합니다.
3. MediaElement의 Opacity를 0.0으로 설정합니다.


아래는 예제 코드 입니다.
사용자 삽입 이미지
사용자 삽입 이미지


VideoBrush를 이용해서 MediaElement에 미디어를 정지, 잠시정지, 재생등을 할 수는 있지만 MediaElement의 크기를 변경할 수는 없습니다. 이와 같은 기능을 원한다면 multiple VideoBrush 객체를 이용해야 합니다.
이상으로 실버라이트가 제공하는 미디어 기능에 대해 간단하게 살펴보았습니다.

Posted by -세티-