Silverlight-비디오 및 오디오

이 장에서는 Silverlight 시설에서 비디오 및 오디오를 재생하는 방법을 살펴 봅니다. 그만큼MediaElementSilverlight의 모든 비디오 및 오디오의 핵심입니다. 이를 통해 애플리케이션에 오디오와 비디오를 통합 할 수 있습니다. 그만큼MediaElement 클래스는 다음과 같은 방식으로 작동합니다. Image수업. 미디어를 가리 키기 만하면 오디오와 비디오가 렌더링됩니다.

가장 큰 차이점은 움직이는 이미지이지만 MP3와 같이 오디오 만 포함하고 비디오가없는 파일을 가리키면 화면에 아무것도 표시되지 않고 재생됩니다.

UI 요소로서의 MediaElement

MediaElement모든 Silverlight 사용자 인터페이스 요소의 기본 클래스 인 프레임 워크 요소에서 파생됩니다. 즉, 모든 표준 속성을 제공하므로 불투명도를 수정하고 클립을 설정하거나 변형 할 수 있습니다.

다음의 간단한 예를 살펴 보겠습니다. MediaElement.

Visual Studio 용 Microsoft Blend를 열고 새 Silverlight 응용 프로그램 프로젝트를 만듭니다.

이제 비디오 또는 오디오 파일을 Blend 디자인 화면으로 끌어옵니다.

MediaElement를 표면에 추가하고 프로젝트에 비디오 파일의 복사본도 추가합니다. 솔루션 탐색기에서 확인할 수 있습니다.

이동, 크기 변경, 회전 적용 등의 작업을 수행 할 수 있습니다.

이제 관련 XAML이 생성됩니다. MainPage.xaml 아래와 같은 파일.

<UserControl x:Class = "MediaElementDemo.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White">
	
      <MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4"  
         Margin = "51,49,53,53"  
         Source = "/Microsoft Silverlight DEMO.mp4"  
         Stretch = "Fill" RenderTransformOrigin = "0.5,0.5">
			
         <MediaElement.RenderTransform> 
            <CompositeTransform Rotation = "-18.384"/>
         </MediaElement.RenderTransform> 
			
      </MediaElement>  
		
   </Grid> 
	
</UserControl>

위의 응용 프로그램이 컴파일되고 실행되면 웹 페이지에서 비디오가 재생되는 것을 볼 수 있습니다.

통제

그만큼 MediaElement미디어를 제공합니다. 표준 플레이어 컨트롤을 제공하지 않습니다. 자동으로 재생을 시작하고 끝에 도달하면 중지되며 사용자가 일시 중지하거나 제어 할 수있는 작업이 없습니다. 따라서 실제로 대부분의 응용 프로그램은 사용자에게 그보다 더 많은 제어 권한을 제공하려고합니다.

설정하여 자동 재생을 비활성화 할 수 있습니다. AutoPlay ...에 False. 즉, 미디어 플레이어는 사용자가 요청할 때까지 아무것도 재생하지 않습니다.

<MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4" 
   AutoPlay = "False" 
   Margin = "51,49,53,53"  
   Source = "/Microsoft Silverlight DEMO.mp4"  
   Stretch = "Fill" RenderTransformOrigin = "0.5,0.5">

따라서 비디오를 재생하고 싶을 때 MediaElement Play() method. 또한 중지 및 일시 중지 방법을 제공합니다.

동일한 예제를 다시 살펴보고 약간의 제어를 허용하도록 약간 수정 해 보겠습니다. 첨부MouseLeftButtonDown 핸들러 MediaElement 아래 XAML 코드에 표시된대로.

<UserControl x:Class = "MediaElementDemo.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
	
      <MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4" 
         AutoPlay = "False" 
         MouseLeftButtonDown = "Microsoft_Silverlight_DEMO_mp4_MouseLeftButtonDown" 
         Margin = "51,49,53,53"  
         Source = "/Microsoft Silverlight DEMO.mp4"  
         Stretch = "Fill" RenderTransformOrigin = "0.5,0.5"> 
      </MediaElement>  
		
   </Grid> 
	
</UserControl>

다음은 MouseLeftButtonDown 미디어 요소의 현재 상태가 플레이 팅인지 확인하는 이벤트 핸들러입니다. 그러면 비디오가 일시 중지되고 그렇지 않으면 비디오 재생이 시작됩니다.

using System.Windows.Controls; 
using System.Windows.Input; 
using System.Windows.Media;

namespace MediaElementDemo { 

   public partial class MainPage : UserControl {
	
      public MainPage() { 
         InitializeComponent(); 
      }  
		
      private void Microsoft_Silverlight_DEMO_mp4_MouseLeftButtonDown
         (object sender, MouseButtonEventArgs e) {
		
         if (Microsoft_Silverlight_DEMO_mp4.CurrentState == MediaElementState.Playing) { 
            Microsoft_Silverlight_DEMO_mp4.Pause(); 
         } else { 
            Microsoft_Silverlight_DEMO_mp4.Play(); 
         } 
      } 
   } 
}

위의 코드가 컴파일되고 실행되면 빈 웹 페이지가 표시됩니다. AutoPlay 재산 False. 웹 페이지를 클릭하면 동영상이 시작됩니다.

웹 페이지를 다시 클릭하면 비디오가 일시 중지됩니다.