2008/06/09 09:00
[세티의 실버라이트] 8. 미디어 Silverlight2008/06/09 09:00
원글출처: http://silverlight.net/quickstarts/silverlight10/media.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
이번 시간에는 실버라이트가 제공하는 미디어엘리먼트(MediaElement)에 대해 알아보겠습니다. 실버라이트의 MediaElement 객체는 WMV와 WMA파일, mp3와 같은 타입의 파일을 플레이하기 위해서 사용합니다.
MediaElement에 대해 알아보기 위해 우리는 웹 페이지에 미디어 파일을 추가 하고 유용한 MediaElement 속성과 미디어를 재생하는 컨트롤 방법을 다뤄보고 풀-스크린으로 미디어를 재생해 보고 비디오를 이용한 페인팅을 다뤄보겠습니다.
먼저 학습을 위해 간단한 샘플을 만들겠습니다. 그러기 위해선 하나의 웹 페이지를 생성하고 그 속에 미디어를 삽입하도록 하겠습니다.
작업순서.
1. Canvas 태그에 MediaElement를 추가합니다.
2. Source 속성에 URI 경로를 설정합니다.
아래는 예제 코드 입니다.
와~ 단 한줄의 코드로 미디어를 재생할 수 있다니... 정말 대단합니다.^^
실버라이트 XAML 코드는 앞의 강좌에서 언급했듯이 엘리먼트 하나하나가 속성을 가지고 있고, 또 객체로 되어 있습니다. 그래서 보다 다양한 멀티미디어 효과를 줄 수 있고, 보다 쉽게 그러한 기능들을 추가할 수 있습니다. 앞에 만든 미디어에 동그란 원을 하나 추가 해보겠습니다. 동그란 원을 추가 위해서 Ellipse 엘리먼트를 사용하도록 하겠습니다.
이야~ 렌더링이 잘 되었군요. 요즘 인기 많은 소녀시대의 '채연' 님을 동그란 원안에 넣어봤습니다.^^;
음! 여러 UI엘리먼트를 조합해서 원하는 결과물을 정말 쉽고 편하게 만들어 낼수 있겠군요.
계속 이어서 MediaElement에 대해 조금 더 알아보겠습니다. 다른 엘리먼트들과 마찬가지로 MediaElement도 몇 가지 유용한 속성을 가지고 있습니다.
MediaElement를 위한 유용한 속성값은?
Stretch - MediaElement에 비디오를 채운다. 가능한 값으로는 None, Uniform, UniformToFill 그리고 Fill 이 있으며, 기본값은 Fill 입니다.
그 다음으로는 볼륨과 관련된 속성이며, IsMuted와 Volumn 이 있습니다. 미디어가 소리 조절이 안되면 안되겠죠.^^;
IsMuted - true와 false를 설정할 수 있으며, 기본값은 false 입니다.
Volumn - 0에서 1까지 설정이 가능하며 기본값은 0.5 입니다.
다음으로는 미디어 재생과 관련된 메서드가 있겠는데요~ Play, Pause, Stop 메서드를 사용하여 미디어 재생을 컨트롤 할 수 있습니다. 미디어 재생과 관련된 예제 코드는 아래와 같습니다.
그러나 이러한 미디어를 작은 화면으로 본다는 것은 너무 답답한 일임에 틀림없습니다.^^
따라서 우리는 이 미디어를 풀-스크린 모드로 보기를 원하며, 또 그렇게 되어야 할 것입니다.
미디어 재생에서 실버라이트 플러그-인의 FullScreen 속성을 설정하기 위해서는 ActualWidth와 ActualHeight의 사이즈를 설정해야 합니다.
아래의 코드를 위에 작성한 코드에 추가 합니다. 추가할 코드는 다음과 같습니다.
<!-- 풀 스크린 모드를 위한 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) 입니다.
여기까지는 기본적인 미디어 기능이었습니다. 하지만 요즘처럼 다양한 멀티미디어 콘텐츠가 응용되는 세상에서 단순하게 미디어 재생만 된다면 좀 재미가 없겠죠? 그래서 소개할려는 것이 비디오브러쉬 입니다.
우리는 실버라이트 MediaElement와 VideoBrush 기능을 사용하여 글자의 배경에 미디어를 재생할 수 있습니다.
VideoBrush 기능을 사용하기 위해선 아래와 같은 순서로 작업을 해야 합니다.
1. VideoBrush 엘리먼트를 생성합니다.
2. MediaElement를 생성하고 Name을 할당합니다.
3. MediaElement의 Opacity를 0.0으로 설정합니다.
아래는 예제 코드 입니다.
VideoBrush를 이용해서 MediaElement에 미디어를 정지, 잠시정지, 재생등을 할 수는 있지만 MediaElement의 크기를 변경할 수는 없습니다. 이와 같은 기능을 원한다면 multiple VideoBrush 객체를 이용해야 합니다.
이상으로 실버라이트가 제공하는 미디어 기능에 대해 간단하게 살펴보았습니다.
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
미디어
(Media)
(Media)
이번 시간에는 실버라이트가 제공하는 미디어엘리먼트(MediaElement)에 대해 알아보겠습니다. 실버라이트의 MediaElement 객체는 WMV와 WMA파일, 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"일 때
그 다음으로는 볼륨과 관련된 속성이며, IsMuted와 Volumn 이 있습니다. 미디어가 소리 조절이 안되면 안되겠죠.^^;
IsMuted - true와 false를 설정할 수 있으며, 기본값은 false 입니다.
Volumn - 0에서 1까지 설정이 가능하며 기본값은 0.5 입니다.
다음으로는 미디어 재생과 관련된 메서드가 있겠는데요~ Play, Pause, Stop 메서드를 사용하여 미디어 재생을 컨트롤 할 수 있습니다. 미디어 재생과 관련된 예제 코드는 아래와 같습니다.
그러나 이러한 미디어를 작은 화면으로 본다는 것은 너무 답답한 일임에 틀림없습니다.^^
따라서 우리는 이 미디어를 풀-스크린 모드로 보기를 원하며, 또 그렇게 되어야 할 것입니다.
미디어 재생에서 실버라이트 플러그-인의 FullScreen 속성을 설정하기 위해서는 ActualWidth와 ActualHeight의 사이즈를 설정해야 합니다.
아래의 코드를 위에 작성한 코드에 추가 합니다. 추가할 코드는 다음과 같습니다.
<!-- 풀 스크린 모드를 위한 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) 입니다.
여기까지는 기본적인 미디어 기능이었습니다. 하지만 요즘처럼 다양한 멀티미디어 콘텐츠가 응용되는 세상에서 단순하게 미디어 재생만 된다면 좀 재미가 없겠죠? 그래서 소개할려는 것이 비디오브러쉬 입니다.
우리는 실버라이트 MediaElement와 VideoBrush 기능을 사용하여 글자의 배경에 미디어를 재생할 수 있습니다.
VideoBrush 기능을 사용하기 위해선 아래와 같은 순서로 작업을 해야 합니다.
1. VideoBrush 엘리먼트를 생성합니다.
2. MediaElement를 생성하고 Name을 할당합니다.
3. MediaElement의 Opacity를 0.0으로 설정합니다.
아래는 예제 코드 입니다.
VideoBrush를 이용해서 MediaElement에 미디어를 정지, 잠시정지, 재생등을 할 수는 있지만 MediaElement의 크기를 변경할 수는 없습니다. 이와 같은 기능을 원한다면 multiple VideoBrush 객체를 이용해야 합니다.
이상으로 실버라이트가 제공하는 미디어 기능에 대해 간단하게 살펴보았습니다.
'Silverlight' 카테고리의 다른 글
| [세티의 실버라이트] 10. Expression Blend 2.5 설치하기. (0) | 2008/06/25 |
|---|---|
| [세티의 실버라이트] 9. 애니메이션(animations) (0) | 2008/06/11 |
| [세티의 실버라이트] 8. 미디어 (2) | 2008/06/09 |
| [세티의 실버라이트] 7. 텍스트 (0) | 2008/06/04 |
| [세티의 실버라이트] 6. Images (2) | 2008/06/01 |
| [세티의 실버라이트] 5. 공통 그래픽 속성 (0) | 2008/06/01 |
