미디어 재생
콘텐츠의 테이블 축소
콘텐츠의 테이블 확장
언어: HTML | XAML

미디어 재생 전체 프로세스(XAML)

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

오디오 및 동영상을 재생하는 풍부한 기능을 갖춘 Windows 8.1용 미디어 앱을 만드는 방법을 알아봅니다. 이 앱을 사용하면 배터리 사용 시간이 증가하고 렌더링이 최적화됩니다.

C++, C# 또는 Visual Basic을 사용하여 미디어 기능과 함께 로드되는 Windows 스토어 앱을 만드는 방법의 전체 프로세스를 살펴보겠습니다. Windows 8.1에는 MediaElement 클래스의 새 전송 컨트롤과 같이 이 작업을 간소화하는 많은 향상된 기능이 있습니다. 이러한 컨트롤 외에 여기서 다루는 내용은 다음과 같습니다.

  • 미디어 재생 기본 사항 - MediaElement 만들기, 전송 컨트롤을 사용하도록 설정, 장치 또는 네트워크에서 미디어 파일 로드
  • 미디어 재생 기능 - 화면이 흐리게 표시되지 않도록 방지, 백그라운드에서 오디오 재생, 시스템 미디어 전송 컨트롤 조작, 동영상 크기 조정, 사용자 지정 전송 컨트롤 만들기, 전체 창 렌더링 사용
  • 앱 기본 사항 - 앱 상태 유지, 앱 바에 UI 만들기, 설정 플라이아웃 만들기, UI에 애니메이션 효과 주기

C++, C# 또는 Visual Basic으로 작성한 Windows 스토어 앱을 처음 개발하는 경우 C# 또는 Visual Basic을 사용하여 첫 Windows 스토어 앱 만들기를 살펴보고 필요한 정보를 얻으세요.

아래 각 단계는 예제 및 코드가 포함된 방법 항목으로 연결되므로 추가 정보를 원하는 경우 해당 항목을 살펴보세요.

미디어 재생 전체 프로세스 샘플에는 여기서 설명한 모든 기능이 포함되어 있습니다. 이 도우미 샘플은 자주 참조되며, 특정 기능이 구현된 샘플 위치를 가리킵니다.

미디어 재생 샘플 앱의 스크린샷

미디어 앱 만들기

시작 아이콘

샘플 만들기

이 항목의 단계를 따라 고유한 앱에 미디어 기능을 추가하려는 경우 Microsoft Visual Studio에서 빈 Windows 스토어 앱 프로젝트를 만들고 기본 항목을 추가할 수 있습니다. 기본 항목에는 앱 상태 저장 및 앱 일시 중단 및 일시 중단 취소 처리를 간소화하는 SuspensionManager.cs 등의 유용한 도우미 클래스가 자동으로 포함됩니다. 기본 항목을 추가하려면 Visual Studio에서 프로젝트>새 항목 추가>기본 항목을 선택합니다.

또는 미디어 재생 전체 프로세스 도우미 샘플로 건너뜁니다.

도우미 샘플은 여기에 설명된 모든 단계를 구현하지만 원활한 진행을 위해 코드를 단계별로 수행하지는 않습니다. 각 단계에는 코드를 빠르게 찾을 수 있도록 "샘플에서 찾기" 섹션이 있습니다.

샘플 원본 파일의 구조는 단순한 플랫 구조이므로 원본 파일의 여러 계층을 드릴다운할 필요 없이 코드를 쉽게 찾을 수 있습니다. 그러나 프로젝트를 나누어 다르게 구성할 수도 있습니다.

 

미디어 재생 기본 사항

단계 아이콘

오디오 및 동영상 재생 기본 사항

앱에서 오디오 및 동영상 재생에 대한 기본 사항을 설정합니다. 방법 항목에서는 작업 수행 방법을 자세히 설명하지만, 기본 오디오 및 동영상을 재생하려는 경우 MediaElement 개체를 XAML에 추가하고 Source를 미디어 파일로 설정하면 됩니다.

MediaElement 클래스는 동영상과 오디오를 모두 재생합니다.

미디어 재생을 제어하기 위해 Windows 8.1에서는 새로운 기본 제공 전송 컨트롤이 도입되었습니다. AreTransportControlsEnabled 속성을 설정하여 컨트롤을 사용하거나 사용하지 않도록 설정합니다. 전송 컨트롤은 재생 단추 및 볼륨 컨트롤 같은 일반적인 미디어 UI 요소를 제공합니다. 샘플에서 해당 컨트롤의 모양은 다음과 같습니다.

전송 컨트롤이 포함된 MediaElement를 표시하는 샘플 앱의 스크린샷

샘플에서 찾기:MediaElementmedia로 이름이 지정되고 MainPage.xaml 파일에서 XAML로 정의되어 있습니다.

단계 아이콘

지원되는 오디오 및 동영상 형식

C++, C# 또는 Visual Basic으로 작성한 Windows 스토어 앱은 다양한 오디오 및 동영상 형식을 지원합니다. 전체 목록을 보려면 링크를 클릭합니다.

단계 아이콘

FileOpenPicker 컨트롤을 사용하여 미디어 파일을 여는 방법

이제 미디어 재생이 구현되었으므로 앱이 실행되는 동안 미디어 원본을 설정하겠습니다.

FileOpenPicker 컨트롤을 사용하면 사용자가 로컬 파일 시스템 또는 Microsoft OneDrive에서 파일을 선택할 수 있습니다. 이 단계에서는 FileOpenPicker 설정 방법과 MediaElement.Source 속성을 FileOpenPicker에서 반환된 파일로 설정하는 방법을 보여 줍니다.

StorageApplicationPermissions.FutureAccessList를 사용하여 FileOpenPicker로 열린 파일에 대한 권한을 저장합니다. 그러면 종료 상태에서 앱을 복원하는 경우 등 나중에 파일에 액세스할 수 있습니다.

FileOpenPicker의 모양은 다음과 같습니다.

FileOpenPicker 컨트롤의 스크린샷

FileOpenPicker는 앱에서 음악, 동영상, 문서 등의 시스템 폴더에 대한 기능을 선언할 필요가 없습니다. 사용자가 FileOpenPicker 및 열리는 파일을 완전히 제어하기 때문입니다. 보안 및 개인 정보 보호를 위해 앱은 가능한 한 적은 기능을 선언해야 합니다. 그러나 가령 음악 폴더의 모든 앨범 이미지를 표시하기 위해 앱이 사용자 입력 없이 동영상 및 음악 폴더에 액세스할 수 있게 하려는 경우 해당 기능을 선언해야 합니다. 자세한 내용은 앱 기능 선언을 참조하세요.

샘플에서 찾기:MainPage.xaml.cs의 Browse_ClickSetMediaSourceFromFile 메서드와 MainPage.xaml의 appBarTextBoxFilePath TextBlock을 살펴보세요.

단계 아이콘

네트워크에서 미디어 파일을 재생하는 방법

FileOpenPicker 컨트롤은 로컬 시스템에서 파일을 가져오는 경우 잘 작동하지만 미디어 원본을 네트워크의 파일로 설정하는 경우에는 제대로 작동하지 않습니다. 이 작업을 위해 미디어 파일 경로에 대한 Uri 개체를 만들고 MediaElement.Source를 이 개체로 설정합니다.

미디어 원본을 설정하는 코드에서 발생하는 예외를 catch하는 것이 좋습니다.

샘플에서 찾기:MainPage.xaml.cs의 AppBarTextBoxFilePath_KeyUpSetMediaSourceFromPath 메서드를 살펴보세요. 또한 XAML에서 미디어 경로를 입력하는 데 사용되는 MainPage.xaml의 appBarTextBoxFilePath TextBlock을 살펴보세요.

 

미디어 재생 기능

단계 아이콘 오디오 및 동영상 재생 동안 표시 유지 방법

일반적으로 Windows 스토어 앱이 특정 기간 내에 사용자 입력을 검색하지 못하면 화면이 흐리게 표시되고 결국 꺼집니다. 대부분의 앱에서 이 동작은 에너지를 절약하고 배터리 사용 시간을 늘리기 때문에 효율적입니다. 그러나 미디어 앱에서는 사용자가 동영상을 보고 있을 수 있으므로 흐리게 표시되면 안 됩니다.

System.Windows.Display.DisplayRequest 클래스를 사용하여 앱의 표시를 항상 켜진 상태로 유지하도록 지시합니다. 그러나 앱이 일시 중단되거나, 미디어 재생이 완료되거나, 미디어가 일시 중지된 경우와 같이 앱에 더 이상 필요하지 않으면 즉시 이 요청을 취소해야 합니다. 이 요청을 취소하지 않으면 배터리 사용 시간이 낭비됩니다.

새로운 MediaElement 전송 컨트롤의 전체 창 단추를 통해 또는 IsFullWindow 속성을 통해 전체 창 렌더링을 사용하도록 설정하면 화면 흐리게 표시 사용 안 함 및 다시 사용 동작이 시스템에서 자동으로 처리됩니다. 따라서 앱이 전체 창 모드에서만 화면 흐리게 표시를 사용하지 않도록 설정해야 하는 경우 직접 DisplayRequest를 관리하지 않아도 됩니다.

샘플에서 찾기:MainPage.xaml.cs의 DisableScreenDimmingUpdateMediaState 메서드를 참조하세요.

단계 아이콘

시스템 미디어 전송 컨트롤을 사용하는 방법

Windows 8.1에서는 시스템 미디어 전송 컨트롤을 조작하는 새 클래스가 도입되었습니다. 이제 기존의 MediaControl 클래스 대신 SystemMediaTransportControls를 사용합니다.

시스템 미디어 전송 컨트롤은 MediaElement 개체의 전송 컨트롤과 다릅니다. 이 컨트롤은 헤드폰의 볼륨 컨트롤, 일부 키보드의 미디어 단추 등 하드웨어 미디어 키를 누를 때 팝업되는 컨트롤입니다. 앱은 이러한 컨트롤을 등록하여 사용할 수 있으며, 컨트롤에서 표시되도록 앨범 이미지, 노래 제목 등의 미디어 메타데이터를 전달할 수 있습니다.

컨트롤의 모양은 다음과 같습니다.

시스템 미디어 전송 컨트롤의 스크린샷

샘플에서 찾기:MainPage 생성자와 MainPage.xaml.cs의 systemControls_ButtonPressedUpdateMediaState 메서드를 참조하세요.

단계 아이콘

백그라운드에서 오디오를 재생하는 방법.

이제 사용자가 다른 앱을 조작하는 동안 앱으로 음악을 들을 수 있도록 백그라운드 오디오 지원을 설정하겠습니다.

사용자가 다른 앱으로 전환하는 경우 등 오디오를 재생하는 앱이 백그라운드로 이동할 때 기본 동작은 오디오가 중지되는 것입니다. 그러나 음악 앱은 오디오가 계속 재생되도록 선택할 수 있습니다.

백그라운드에서 오디오를 재생하려면 앱 매니페스트 Declarations에서 백그라운드 오디오 작업을 설정해야 합니다. 또한 SystemMediaTransportControlsIsPlayEnabledIsPauseEnabled 속성을 사용하도록 설정하고 ButtonPressed 이벤트를 처리해야 합니다. 앱이 활성 앱이 아닐 때 사용자가 오디오를 재생 및 중지할 수 있으려면 이 작업이 필요합니다.

샘플에서 찾기:MainPage 생성자와 MainPage.xaml.cs의 EnableBackGroundAudiosystemControls_ButtonPressed 메서드를 참조하세요. 또한 백그라운드 작업을 사용하도록 설정하려면 Package.appmanifest.xml의 Declarations 섹션을 살펴보세요.

단계 아이콘

동영상 크기를 조정하고 확대하는 방법

MediaElement.Stretch 속성은 MediaElement가 해당 컨테이너의 공간을 채우는 방법을 정의합니다. Stretch 상태는 여러 TV 세트의 사진 크기 설정과 비슷합니다. 이 속성을 UI 단추에 연결하고 사용자가 원하는 설정을 선택하도록 할 수 있습니다.

  • None은 원래 크기로 콘텐츠의 기본 해상도를 표시합니다.
  • Uniform은 가로 세로 비율 및 이미지 콘텐츠를 유지하면서 공간을 최대한 채웁니다. 이 경우 동영상 가장자리에 가로 또는 세로의 검은색 막대가 표시될 수 있습니다. 이 상태는 와이드스크린 모드와 비슷합니다.
  • UniformToFill은 가로 세로 비율을 유지하면서 전체 공간을 채웁니다. 이 경우 이미지 일부가 잘릴 수 있습니다. 이 상태는 전체 화면 모드와 비슷합니다.
  • Fill은 전체 공간을 채우지만 가로 세로 비율을 유지하지 않습니다. 이미지가 잘리지는 않지만 늘어짐이 발생할 수 있습니다. 이 상태는 확대 모드와 비슷합니다.

다음은 이러한 늘이기 값이 동영상 렌더링에 미치는 영향의 예제입니다.

각기 다른 늘이기 값이 렌더링되는 방법 예제

샘플에서 찾기:MainPage.xaml.cs의 PictureSize_Click 메서드를 참조하세요.

단계 아이콘

전체 창 렌더링을 사용하도록 설정하는 방법

MediaElement 클래스의 기본 제공 전송 컨트롤에는 전체 창 단추가 있습니다. 그러나 프로그래밍 방식으로 전체 창 렌더링을 사용하거나 사용하지 않도록 설정하려는 경우 새로운 IsFullWindow 속성을 사용합니다.

Windows 8.1 이전에는 전체 창의 범위를 계산하고 다른 UI를 직접 표시하거나 숨겨야 했습니다. 올바른 방법으로 수행하지 않을 경우 일부 렌더링 최적화를 사용할 수 없었습니다. 따라서 전체 창 렌더링을 사용하거나 사용하지 않도록 설정하려면 항상 IsFullWindow 속성을 사용합니다. 그리고 이 방법이 더 용이합니다.

샘플에서 찾기:MainPage.xaml.cs의 ToggleFullWindow 메서드를 참조하세요.

단계 아이콘

사용자 지정 전송 컨트롤을 만드는 방법

MediaElement 전송 컨트롤이 제공하는 기능을 확장해야 하거나 컨트롤을 완전히 바꾸려는 경우 사용자 지정 전송 컨트롤을 만들어야 합니다. 미디어 재생 전체 프로세스 샘플에서는 AppBar에 모든 사용자 지정 전송 컨트롤을 구현하지만 MediaElement에서 기본 제공 전송 컨트롤도 사용되는 상태로 둡니다. 고유한 사용자 지정 전송 컨트롤을 만드는 경우 기본 제공 UI를 고유한 컨트롤로 바꿀 수도 있습니다.

기본 제공 전송 컨트롤을 끄려면 AreTransportControlsEnabledfalse로 설정합니다.

이 방법 항목에서는 재생, 일시 중지, 중지, 빨리 감기, 되감기, 위치 슬라이더, 전체 창, 오디오 섹션, 음소거 및 볼륨에 대한 사용자 지정 전송 컨트롤을 만드는 방법을 설명합니다.

샘플에서 찾기:MainPage.xaml의 <Page.BottomAppBar> 요소를 참조하고, 기능을 구현하는 이벤트 처리기는 MainPage.xaml.cs를 살펴보세요. 타임라인 위치 슬라이더를 구현하는 사용자 지정 컨트롤은 코드의 대부분을 차지하며 모두 MainPage.xaml.cs의 끝에 있습니다.

 

앱 기본 사항

단계 아이콘

앱 바 추가

앱을 조작하는 UI와 MediaElementAppBar에 배치합니다. AppBarButtonAppBarToggleButton 컨트롤은 AppBar용으로 특별히 빌드되었으며 매끄럽게 작동합니다.

Symbol 클래스에는 AppBarButton.Icon에 사용할 수 있는 많은 기호가 포함되어 있습니다. 고유한 아이콘을 제공하거나 Segoe UI Symbol 아이콘 목록의 아이콘을 사용할 수도 있습니다. 도우미 샘플의 모든 단추는 Symbol의 아이콘을 사용합니다.

도우미 샘플에서 아래쪽 AppBar의 모양은 다음과 같습니다.

AppBarButtons가 포함된 AppBar를 표시합니다.

도우미 샘플에서는 이미지 및 오디오 단추와 같은 관련된 일부 기능을 Flyout에 그룹화합니다. 이렇게 하면 공간을 절약하는 데 도움이 됩니다.

AppBar 사용 및 앱 디자인에 대한 자세한 내용은 앱 바에 대한 지침을 참조하세요.

샘플에서 찾기:MainPage.xaml과 <Page.TopAppBar><Page.BottomAppBar>를 참조하세요. 특정 컨트롤과 기능이 구현된 방법을 확인하려면 MainPage.xaml.cs에서 앱 바 단추에 대한 이벤트 처리기를 살펴보세요.

단계 아이콘

UI에 애니메이션 효과 주기

애니메이션은 앱에 활기를 불어넣을 수 있습니다. 사소한 애니메이션만 추가해도 앱이 확연히 달라집니다. 기본 애니메이션은 간단하게 만들 수 있으며, 시스템에서 다양한 기본 제공 전환 애니메이션을 제공합니다.

미디어 재생 전체 프로세스 샘플에서는 문자 메시지에 대한 간단한 투명 애니메이션을 만듭니다. TextBlockOpacity 속성에 StoryboardDoubleAnimation을 사용합니다. 이렇게 하면 텍스트가 몇 초 후에 사라집니다.

EntranceThemeTransition 등의 전환 애니메이션은 앱 상태가 변경되었다는 시각 신호를 제공할 수 있습니다. 도우미 앱은 일부 AppBarButton 개체에 EntranceThemeTransition을 사용하여 앱 바를 열 때 약간의 동작을 제공합니다.

성능 참고 사항: 실제 MediaElement 개체에는 애니메이션 효과를 주지 마세요. 성능이 저하될 수 있습니다.

샘플에서 찾기:MainPage.xaml의 <Page.Resources> 및 MainPage.xaml.cs의 DisplayMessage 메서드를 참조하세요.

단계 아이콘

앱 수명 주기 및 상태 관리

Windows 스토어 앱에서는 언제든지 앱이 백그라운드로 일시 중단되고 시스템이 앱을 종료할 수 있으므로 앱 상태를 저장하는 것이 중요합니다. 앱이 다시 시작될 때 사용자는 미디어가 이전과 동일한 위치에 있고 모든 앱 설정이 그대로 유지될 것을 기대합니다.

장치의 격리된 저장소나 로밍 저장소에 앱 상태를 저장할 수 있습니다. 로밍 저장소는 사용자가 여러 장치에서 앱을 실행할 수 있고 모든 앱 간에 상태가 공유되기 때문에 유용합니다.

저장할 중요한 MediaElement 상태는 Source, Position, Stretch, IsLooping, CurrentState, AutoPlayAudioStreamIndex입니다.

SuspensionManager.cs 및 NavigationHelper.cs는 Visual Studio 템플릿에 포함된 도우미 클래스입니다. 빈 템플릿을 제외한 모든 템플릿에 포함되어 있습니다. 빈 템플릿을 만드는 경우 새 기본 항목을 프로젝트에 추가하면 Visual Studio에서 이러한 파일을 자동으로 추가합니다. 이러한 도우미 클래스는 일시 중단, 다시 시작 및 종료에서 다시 시작의 처리를 간소화합니다. NavigationHelper.cs의 LoadStateSaveState 메서드를 참조하세요.

일부 MediaElement 상태는 MediaElement.Position 등의 MediaOpen 이벤트 처리기에서 복원해야 합니다. 이러한 속성을 설정하려면 미디어를 로드해야 하기 때문입니다. 예를 들어 NaturalDuration은 미디어가 로드된 후에 설정되고 Position 속성은 NaturalDuration보다 클 수 없기 때문에 NaturalDuration이 설정된 후에 Position을 설정해야 합니다.

샘플에서 찾기:MainPage.xaml.cs의 navigationHelper_LoadState, navigationHelper_SaveState, Media_MediaOpenedRestoreMediaSourceState 메서드를 참조하세요. SuspensionManager 설정 및 일시 중단 코드는 App.xaml.cs의 App 생성자, OnLaunchedOnSuspending을 살펴보세요.

단계 아이콘

앱 설정에 대한 지침

Windows 8.1에서는 C++, C# 또는 Visual Basic으로 작성한 Windows 스토어 앱용 SettingsFlyout 컨트롤이 도입되었습니다. SettingsFlyout은 설정 페이지 생성을 간소화합니다.

설정은 앱의 전체 동작에 영향을 주고 가끔씩만 조정되는 구성 옵션에 사용됩니다. 미디어 재생 전체 프로세스 샘플에서는 앱 설정을 저장하는 데 사용할 수 있는 오디오 설정 및 동영상 설정 플라이아웃을 만듭니다.

샘플에서 찾기: 설정은 App.xaml.cs의 OnLaunchedOnCommandsRequested 메서드를 살펴보세요. 또한 각 설정 플라이아웃에는 App.xaml.cs의 해당 Show 메서드(예: ShowAudioSettingsFlyout)가 있습니다. AudioSettings.xaml, VideoSettings.xaml, HelpSettings.xaml 및 PrivacySettings.xaml 플라이아웃은 Settings 하위 폴더에 있습니다.

 

마무리

스토어 요구 사항 아이콘

Windows 앱 인증 키트 사용

권장. Windows 앱 인증 키트를 실행하면 앱이 Windows 스토어 요구 사항을 충족하는지 확인하는 데 도움이 됩니다. 앱에 주요 기능을 추가할 때마다 Windows 앱 인증 키트를 실행하는 것이 좋습니다.

중지 아이콘

완료되었습니다. 앱의 다양한 미디어 재생 기능을 살펴보았으므로 이제 미디어 재생 전체 프로세스 샘플과 같은 앱을 만들 준비가 되었습니다.

 

더 자세히 알고 싶으세요?

Windows 스토어 앱 UI 전체 프로세스(XAML)

Windows 스토어 앱 UI 디자인에 대해 자세히 알아봅니다.

사용자 조작 전체 프로세스(XAML)사용자 조작 사용자 지정 전체 프로세스(XAML)

Windows 스토어 앱에 터치식 입력을 추가하는 방법에 대해 자세히 알아봅니다.

C# 및 Visual Basic으로 작성한 Windows 런타임 앱용 로드맵C++로 작성한 Windows 런타임 앱용 로드맵

일반적으로 앱을 만드는 방법에 대해 자세히 알아봅니다.

앱용 UX 디자인

뛰어난 사용자 환경 디자인에 대해 자세히 알아봅니다.

지원되는 오디오 및 동영상 형식

C++, C# 또는 Visual Basic으로 작성한 Windows 스토어 앱에서 지원되는 오디오 및 동영상 형식에 대해 자세히 알아봅니다.

미디어 리소스 최적화

미디어 앱의 성능 고려 사항에 대해 자세히 알아봅니다.

빠른 시작: 컨트롤 추가 및 이벤트 처리

C++, C# 또는 Visual Basic으로 작성한 Windows 스토어 앱의 컨트롤 및 이벤트에 대해 자세히 알아봅니다.

관련 샘플

 

 

표시:
© 2016 Microsoft