오디오 및 비디오 개요

미디어를 페이지에 추가할 때는 MediaElement를 태그에 추가하고 재생할 미디어에 대한 URI(Uniform Resource Identifier)를 제공하기만 하면 됩니다. 다음 예제에서는 MediaElement를 만들고 Source 속성을 비디오 파일의 URI로 설정합니다. MediaElement는 페이지가 로드될 때 재생을 시작합니다.

이 샘플을 실행합니다.

  <MediaElement x:Name="media" Source="xbox.wmv" 
    Width="300" Height="300" />

MediaElement 개체는 기본적으로 MP4, Windows Meida 및 MP3파일을 지원하며 다른 많은 형식의 미디어 파일을 지원하도록 확장할 수 있습니다. 지원되는 형식과 프로토콜의 자세한 목록을 보려면 지원되는 미디어 형식, 프로토콜 및 로그 필드를 참조하십시오.

MediaElement 클래스는 몇 가지 미디어 관련 속성을 제공합니다.

• AutoPlay : MediaElement가 자동으로 재생을 시작할지 여부를 지정합니다. 기본값은 true입니다.

• IsMuted : MediaElement가 음소거되는지 여부를 지정합니다. 값이 true이면 MediaElement가 음소거됩니다. 기본값은 false입니다.

• Stretch : 비디오가 MediaElement 개체를 채우기 위해 늘어나는 방법을 지정합니다. 가능한 값은 None, Uniform, UniformToFill 및 Fill입니다. 기본값은 Fill입니다. 자세한 내용은 Stretch 열거형을 참조하십시오.

• Volume : MediaElement 개체의 오디오 볼륨을 0에서 1까지의 값으로 지정합니다. 1이 가장 큰 볼륨입니다.

MediaElement 에는 미디어 관련 속성 외에도 Opacity 및 Clip과 같은 UIElement의 모든 속성이 있습니다. MediaElement 속성의 전체 목록은 MediaElement 참조 페이지를 참조하십시오.

MediaElement 개체의 Play, Pause 및 Stop 메서드를 사용하여 대화형으로 미디어 재생을 제어할 수 있습니다. 다음 예제에서는 MediaElement 개체와 미디어 재생을 제어하기 위한 몇 가지 단추를 정의합니다.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <MediaElement x:Name="media" Source="xbox.wmv" Width="300" Height="300" 
                  Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" />

    <!-- Stops media playback.-->
    <Button Click="StopMedia" 
     Grid.Column="0" Grid.Row="1" Content="Stop" />

    <!-- Pauses media playback. -->
    <Button Click="PauseMedia" 
     Grid.Column="1" Grid.Row="1" Content="Pause" />

    <!-- Begins media playback. -->
    <Button Click="PlayMedia" 
     Grid.Column="2" Grid.Row="1" Content="Play" />

</Grid>

함께 제공된 코드에서는 몇 가지 이벤트 처리기를 만들고 Stop, Pause 및 Play 메서드를 사용하여 MediaElement를 제어합니다.

이 샘플을 실행합니다.

Private Sub StopMedia(ByVal sender As Object, ByVal e As RoutedEventArgs)
    media.Stop()
End Sub

Private Sub PauseMedia(ByVal sender As Object, ByVal e As RoutedEventArgs)
    media.Pause()
End Sub

Private Sub PlayMedia(ByVal sender As Object, ByVal e As RoutedEventArgs)
    media.Play()
End Sub

private void StopMedia(object sender, RoutedEventArgs e)
{
    media.Stop();
}
private void PauseMedia(object sender, RoutedEventArgs e)
{
    media.Pause();
}
private void PlayMedia(object sender, RoutedEventArgs e)
{
    media.Play();
}

Silverlight 개체의 검색 및 조작에 대한 자세한 내용은 Silverlight 개체 트리를 참조하십시오.

미디어 중지, 일시 중지 또는 재생 외에도 MediaElement 개체의 Position 속성을 설정하여 특정 위치를 검색할 수도 있습니다.

다음 예제에서는 재생 제어, 진행률/탐색 슬라이더, 전체 화면 전환을 비롯하여 비디오 플레이어의 일반적인 기능을 보여 줍니다.

이 샘플을 실행합니다.

이 샘플을 다운로드합니다.

Timeline 마커는 미디어 파일의 특정 지점과 연결된 메타데이터입니다. 이러한 마커는 사전에 만들어 스크립트 스트림 샘플로 미디어 파일 자체에 저장하거나 프로그래밍 방식으로 추가할 수 있습니다. 또한 일반적으로 비디오에서 서로 다른 장면에 이름을 지정하는 데 사용되므로 사용자가 선택한 위치를 검색하거나 UI 스크립팅 큐를 제공할 수 있습니다.

참고:
Windows Phone용 Silverlight Windows Phone OS 7.1 이상을 대상으로 지정하는 응용 프로그램에서 Timeline 마커를 사용할 수 있습니다.

MediaElement 는 재생 중에 Timeline 마커에 도달하면 MarkerReached 이벤트를 발생시킵니다. 코드에서 이 이벤트를 처리하고 Timeline 마커를 사용하여 동작을 트리거할 수 있습니다. MediaElement 개체의 Markers 속성을 사용하면 현재 재생되는 미디어 파일에 저장된 헤더 포함 마커에 액세스할 수 있습니다. 이 속성을 사용하여 새 Timeline 마커를 추가할 수도 있습니다.

Windows 미디어 파일의 경우 MediaElement 개체가 모든 Windows 미디어 기술 마커(마커, 메타데이터 스크립트 명령 및 별도의 스트림 스크립트 명령)를 지원하지만 Markers 속성에서 반환되는 컬렉션은 미디어 파일에 별도의 스트림 스크립트 명령과 같은 별도의 스트림으로 인코딩된 Timeline 마커를 포함하지 않습니다. 파일에 헤더 포함 스크립트 명령과 별도의 스트림 스크립트 명령이 모두 포함되어 있으면 이 컬렉션은 파일 헤더에 포함된 해당 명령만 포함합니다. 별도의 스트림 스크립트 명령은 미디어 재생 중 발견되는 경우 MarkerReached 이벤트를 트리거합니다. 그러나 Markers 속성을 사용하여 이러한 마커에 미리 액세스할 수 없습니다.

MediaElement 는 TimelineMarker 개체를 사용하여 Markers 속성에서 반환하는 마커의 컬렉션을 나타냅니다. TimelineMarker 개체는 시간, 이름 및 값을 설명하는 다음과 같은 속성을 제공합니다.

• Time : 마커에 도달하는 시간을 지정하는 TimeSpan 구조체입니다.

• Type : 마커의 형식을 지정하는 문자열입니다. 이 값은 임의의 사용자 정의 문자열일 수 있습니다.

• Text : 마커의 값을 지정하는 문자열입니다. 이 값은 임의의 사용자 정의 문자열일 수 있습니다.

다음 예제에서는 MediaElement를 만들고 MarkerReached 이벤트에 대해 등록합니다. 또한 몇 가지 TextBlock 개체를 만듭니다.

<StackPanel Margin="40">
  <StackPanel Orientation="Horizontal">
    <TextBlock FontSize="12" Foreground="DarkGray">Time:</TextBlock>
      <TextBlock x:Name="timeTextBlock" FontSize="12" />   
  </StackPanel>
  <StackPanel Orientation="Horizontal">
    <TextBlock FontSize="12" Foreground="DarkGray">Type:</TextBlock>
    <TextBlock x:Name="typeTextBlock" FontSize="12" />
  </StackPanel>
  <StackPanel Orientation="Horizontal">
    <TextBlock FontSize="12" Foreground="DarkGray">Value:</TextBlock>
    <TextBlock x:Name="valueTextBlock" FontSize="12" />
  </StackPanel>

  <!-- The MediaElement has the MarkerReached event attached. -->
  <MediaElement MarkerReached="OnMarkerReached" HorizontalAlignment="Left"
   Source="thebutterflyandthebear.wmv" Width="300" Height="200" />

</StackPanel>

함께 제공된 코드에서는 MarkerReached 이벤트를 처리합니다. 또한 이벤트를 트리거한 Timeline 마커의 Time, Type 및 Text 값을 검색하고 위의 태그에서 선언된 TextBlock 개체에 해당 정보를 표시합니다.

Private Sub OnMarkerReached(ByVal sender As Object, ByVal e As TimelineMarkerRoutedEventArgs)
    timeTextBlock.Text = e.Marker.Time.Seconds.ToString
    typeTextBlock.Text = e.Marker.Type.ToString
    valueTextBlock.Text = e.Marker.Text.ToString
End Sub

private void OnMarkerReached(object sender, TimelineMarkerRoutedEventArgs e)
{
    timeTextBlock.Text = e.Marker.Time.Seconds.ToString();
    typeTextBlock.Text = e.Marker.Type.ToString();
    valueTextBlock.Text = e.Marker.Text.ToString();
}

미디어 마커 정의

Silverlight에 사용할 수 있는 SSPL(서버측 재생 목록)은 사용자가 보는 스트리밍 미디어의 시퀀스 및 기타 동작을 서버 관리자가 제어할 수 있도록 하는 미디어 요소(오디오 또는 비디오)의 시퀀스입니다. 이 재생 목록은 정적으로나 동적으로 만들 수 있습니다. 서버측 재생 목록을 사용하여 주문형 또는 브로드캐스트 스트림에 대한 미디어를 처리할 수 있습니다. 자세한 내용은 서버측 재생 목록를 참조하십시오.

많은 회사에서 스트리밍 미디어는 수익의 원천입니다. 이러한 회사의 고객은 주문형 콘텐츠와 라이브 브로드캐스트를 유료로 스트리밍합니다. 이러한 회사는 기록된 정보를 사용하여 고객이 콘텐츠를 봤는지 여부뿐만 아니라 콘텐츠를 본 기간과 품질도 확인합니다. 서버에서 로그에 액세스하여 이 정보를 얻을 수 있지만 이러한 로그의 정보는 Silverlight 클라이언트가 서버에 보내는 정보로 결정됩니다. Silverlight에서 사용할 수 있는 서버 로그 필드에 대한 자세한 내용은 지원되는 미디어 형식, 프로토콜 및 로그 필드를 참조하십시오.

MediaStreamSource 는 개발자에게 인코딩된 기본 오디오 및 비디오 스트림을 조작하는 API에 직접 액세스할 수 있도록 하여 미디어 파일 컨테이너로 인한 영향을 제거하는 Silverlight 런타임입니다.

컨테이너를 제거하려는 이유 중 하나는 개발자가 기본 스트림에 액세스할 수 있으면 다른 솔루션에서는 아직까지 제공하지 않는 시나리오를 구현할 수 있기 때문입니다.

또 다른 이유는 개발자가 기본 스트림에 액세스할 수 있으면 Silverlight 런타임에서 구현하지 않은 시나리오를 구현할 수 있기 때문입니다. 예를 들어 RTSP:T 프로토콜 지원, SHOUTcast 프로토콜 지원, 원활한 오디오 반복, ID3 v1 및 ID3 v2 메타데이터 지원 등 다양한 시나리오를 구현할 수 있습니다.

이 MediaStreamSource sample에서 MediaStreamSource 사용을 시작해 봅니다.

디지털 권한 관리를 Silverlight 응용 프로그램에 통합하면 플랫폼 간 재생 시 스트리밍 또는 프로그레시브 다운로드 콘텐츠를 보호하고 안전하게 전송할 수 있습니다. Silverlight 4는 MediaElement 또는 MediaStreamSource 클래스를 통해 PlayReady 보호 WMA 및 WMV를 지원하고 MediaStreamSource 클래스를 통해 PlayReady 보호 H264 및 AAC를 지원합니다. Silverlight 4는 PlayReady 라이선스 서버를 사용하여 기존 WM-DRM 콘텐츠 라이브러리의 사용도 지원합니다. 자세한 내용은 DRM(디지털 권한 관리)을 참조하십시오.

• 동시에 응용 프로그램에 포함할 MediaElement 개체 수를 제한하십시오. 응용 프로그램 트리에 있는 MediaElement 개체 수가 100개를 초과하면 동시 재생 여부에 관계없이 MediaFailed 이벤트가 발생할 수 있습니다. 이 문제를 해결하는 방법은 필요할 때 MediaElement 개체를 트리에 추가한 다음 필요하지 않을 경우 제거하는 것입니다.

• 성능 향상을 위해 클라이언트에 필요한 비디오 해상도만 보내려고 시도합니다. 예를 들어, 200x200의 축소 버전만 필요로 하는 경우 클라이언트에 720p 콘텐츠를 전송하려고 시도하지 마십시오.

참조

개념

기타 리소스