Silverlight 2 Controls Review - MediaElement

MediaElement 컨트롤은 Silverlight 의 가장 큰 장점으로 이야기 하고 있는 멀티미디어 관련 프로그램을 제작하는데 있어 필수 컨트롤입니다.

비디오/오디오의 다양한 코덱을 지원합니다. 실버라이트 지원코덱은 여기(Supported Media Formats and Protocols in Silverlight)에서 확인하시기 바랍니다. 그리고 차후에는 차세대 코덱인 H.264 및 AAC 포맷을 지원한다고 합니다. 관련 내용은 공도님 블로그에 H.264 및 AAC 지원글을 참고하세요.

Xaml에서 MediaElement 컨트롤의 기본 구문입니다.

<MediaElement x:Name="mediaelement"/>

주요프로퍼티를 보면 우선 Source는 재생할 미디어의 경로입니다. AutoPlay는 기본적으로 재생이 지정된 미디어의 자동재생 설정을 지정합니다. Volume는 오디오 소리크기를 설정하고 IsMute는 소리 끄고 키는 설정을 합니다.

<MediaElement x:Name="mediaelement" Source="Silverlight.wmv" AutoPlay="True"

Volume="1.0" IsMuted="True"/>

다음 예제는 재생, 정지, 일시정지 기능을 가진 간단한 동영상 플레이어 입니다. 또 현재 동영상이 플레이되는 위치(Position)를 표시하기 위해 슬라이더와 TextBlock을 이용하였습니다.

Xaml Code

<UserControl x:Class="ControlTest6.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="400" Height="300">

    <Grid x:Name="LayoutRoot" Background="White">

        <MediaElement x:Name="mediaelement" Source="Silverlight.wmv" AutoPlay="False"

                      Volume="1.0" Margin="28.5,16,30.5,66"/>

        <!--Play-->

        <Button Height="30" HorizontalAlignment="Left" Margin="68,0,0,10"

                VerticalAlignment="Bottom" Width="77" Content="Play" x:Name="cboPlay"

                Click="cboPlay_Click"/>

        <!--Pause-->

        <Button Height="30" Margin="168,0,155,10" VerticalAlignment="Bottom"

                Content="Pause" x:Name="cboPause" Click="cboPause_Click"/>

        <!--Stop-->

        <Button Height="30" Margin="0,0,54,11" VerticalAlignment="Bottom" Content="Stop"

                HorizontalAlignment="Right" Width="77" x:Name="cboStop" Click="cboStop_Click"/>

       

        <Slider Height="21" Margin="14,0,51,49.5" VerticalAlignment="Bottom"

                x:Name="sdrPlayState" Maximum="1"/>

       

        <TextBlock Height="21.5" HorizontalAlignment="Right" Margin="0,0,8,45.5"

                   VerticalAlignment="Bottom" Width="36.5" Text="00:00"

                   TextWrapping="Wrap" x:Name="tbPosition"/>

    </Grid>

</UserControl>

C# Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Diagnostics;

using System.Windows.Threading;

 

namespace ControlTest6

{

    public partial class Page : UserControl

    {

        private DispatcherTimer timer;

 

        public Page()

        {

            InitializeComponent();

 

            timer = new DispatcherTimer();

            timer.Interval = TimeSpan.FromMilliseconds(50);

            timer.Tick += new EventHandler(timer_Tick);

 

            mediaelement.CurrentStateChanged +=

                new RoutedEventHandler(mediaelement_CurrentStateChanged);

        }

 

        private void cboPlay_Click(object sender, RoutedEventArgs e)

        {

            mediaelement.Play();

        }

 

        private void cboPause_Click(object sender, RoutedEventArgs e)

        {

            mediaelement.Pause();

        }

 

        private void cboStop_Click(object sender, RoutedEventArgs e)

        {

            mediaelement.Stop();

        }

 

        void timer_Tick(object sender, EventArgs e)

        {

            if (mediaelement.NaturalDuration.TimeSpan.TotalSeconds > 0)

            {

 

                tbPosition.Text = string.Format("{0:00}:{1:00}",

                    mediaelement.Position.Minutes,

                    mediaelement.Position.Seconds);

 

                sdrPlayState.Value = mediaelement.Position.TotalSeconds /

                    mediaelement.NaturalDuration.TimeSpan.TotalSeconds;

            }

        }

 

        void mediaelement_CurrentStateChanged(object sender, RoutedEventArgs e)

        {

            if (mediaelement.CurrentState == MediaElementState.Playing)

            {

                timer.Start();

            }

            else

            {

                timer.Stop();

            }

        }

    }

}

Silverlight 1.x에서 사용했던 HtmlTimer은 없어지고 2008년 3월에 Silverlight 2 beta 1이 출시되면서 새로 DispatherTimer 클래스가 생겼습니다. 그러므로 위 예제에서는 System.Windows.Threading.DispatherTimer 네임스페이스를 선언하고 DispatherTimer를 사용합니다. 사용법은 상현넘님 블로그를 참고하시면 되며, 또 Silverlight 2 이후 변경된 다른 사항까지 보실 수 있슶니다.

timer.Interval은 50초로 지정합니다.

timer_Tick이벤트는 현재 재생되고 있는 동영상의 위치를 슬라이더와 TextBlock에 표시하기 위해 현재 재생되고 있는 시간을 동영상의 전체시간으로 나누어서 슬라이더의 value 프로퍼티에 대입해줍니다. 동영상 재생시간 표시는 string.Format 함수를 사용하여 재생되는 현재 시간을 분과 초로 출력되게 합니다.

mediaelement_CurrentStateChanged 이벤트는 현재 동영상이 재생되는지 체크하여 Timer의 Start(), Stop() 함수를 호출합니다.

invalid-file