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

아티클
12/11/2015

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

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

JavaScript를 사용하여 미디어 기능과 함께 로드되는 Windows 스토어 앱을 만드는 방법의 전체 프로세스를 살펴보겠습니다. Windows 8.1에는 새로운 msRequestFullscreen API와 같이 이 작업을 간소화하는 많은 향상된 기능이 있습니다. 여기서 다루는 내용은 다음과 같습니다.

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

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

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

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

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

미디어 앱 만들기

샘플 만들기

이 항목의 단계를 따라 고유한 앱에 미디어 기능을 추가하려는 경우 플랫 탐색 전체 프로세스 항목 및 관련된 플랫 탐색 패턴 템플릿으로 시작할 수 있습니다. 또는 Microsoft Visual Studio에서 빈 Windows 스토어 앱 프로젝트 또는 탐색 프로젝트를 만들 수 있습니다. 도우미 샘플은 탐색 구조가 단순하지만 빈 템플릿에 포함되지 않은 navigation.js,의 일부 도우미 함수를 사용합니다. 따라서 탐색 템플릿 중 하나로 시작하고 필요 없는 항목을 제거하는 것이 더 쉬울 수도 있습니다.

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

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

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

미디어 재생 기본 사항

	빠른 시작: 앱에서 비디오 재생 앱에서 동영상에 대한 기본 사항을 설정합니다. 이 방법 항목에서는 작업 수행 방법을 자세히 설명하지만, 기본 오디오 및 동영상을 재생하려는 경우 audio 또는 video 요소를 HTML에 추가하고 src 속성을 미디어 파일로 설정하면 됩니다. 미디어 재생을 제어하려면 audio 또는 video 요소에 controls 특성을 추가하여 기본 제공 전송 컨트롤을 사용합니다. controls 속성을 true 또는 false로 설정하여 컨트롤을 사용하거나 사용하지 않도록 설정합니다. 전송 컨트롤은 재생 단추 및 볼륨 컨트롤 같은 일반적인 미디어 UI 요소를 제공합니다. 샘플에서 해당 컨트롤의 모양은 다음과 같습니다. 샘플에서 찾기:video 요소는 mediaVideo로 이름이 지정되고 \pages\mediaPlayer\mediaPlayer.js 파일에서 HTML로 정의되어 있습니다.
	지원되는 오디오 및 동영상 형식 JavaScript로 작성한 Windows 스토어 앱은 다양한 오디오 및 동영상 형식을 지원합니다. 전체 목록을 보려면 링크를 클릭합니다.
	FileOpenPicker 컨트롤을 사용하여 로컬 미디어 파일을 여는 방법 이제 미디어 재생이 구현되었으므로 앱이 실행되는 동안 미디어 원본을 설정하겠습니다. FileOpenPicker 컨트롤을 사용하면 사용자가 로컬 파일 시스템 또는 Microsoft OneDrive에서 파일을 선택할 수 있습니다. 이 단계에서는 FileOpenPicker 설정 방법과 video.src 속성을 FileOpenPicker에서 반환된 파일로 설정하는 방법을 보여 줍니다. StorageApplicationPermissions.futureAccessList를 사용하여 FileOpenPicker로 열린 파일에 대한 권한을 저장합니다. 그러면 종료 상태에서 앱을 복원하는 경우 등 나중에 파일에 액세스할 수 있습니다. FileOpenPicker의 모양은 다음과 같습니다. FileOpenPicker는 앱에서 음악, 동영상, 문서 등의 시스템 폴더에 대한 기능을 선언할 필요가 없습니다. 사용자가 FileOpenPicker 및 열리는 파일을 완전히 제어하기 때문입니다. 보안 및 개인 정보 보호를 위해 앱은 가능한 한 적은 기능을 선언해야 합니다. 그러나 가령 음악 폴더의 모든 앨범 이미지를 표시하기 위해 앱이 사용자 입력 없이 동영상 및 음악 폴더에 액세스할 수 있게 하려는 경우 해당 기능을 선언해야 합니다. 자세한 내용은 앱 기능 선언을 참조하세요. 샘플에서 찾기:\pages\mediaPlayer\mediaPlayer.js의 `setMediaSourceFromFilePicker` 및 `setMediaSourceFromFile` 함수와 \pages\mediaPlayer\mediaPlayer.html의 `browseButton` 앱 바 단추를 살펴보세요.
	네트워크에서 미디어 파일을 여는 방법 FileOpenPicker 컨트롤은 로컬 시스템에서 파일을 가져오는 경우 잘 작동하지만 미디어 원본을 네트워크의 파일로 설정하는 경우에는 제대로 작동하지 않습니다. 이렇게 하려면 네트워크에 있는 미디어 파일의 경로로 src를 설정합니다. 샘플에서 찾기:\pages\mediaPlayer\mediaPlayer.js의 `setMediaSourceFromTextBox` 및 `setMediaSourceFromPath` 함수를 살펴보세요. 또한 미디어 경로를 입력하는 데 사용되는 \pages\mediaPlayer\mediaPlayer.html의 `txtSourceInput` input 요소를 살펴보세요.

미디어 재생 기능

	오디오 및 동영상 재생 동안 표시 유지 방법 일반적으로 Windows 스토어 앱이 특정 기간 내에 사용자 입력을 검색하지 못하면 화면이 흐리게 표시되고 결국 꺼집니다. 대부분의 앱에서 이 동작은 에너지를 절약하고 배터리 사용 시간을 늘리기 때문에 효율적입니다. 그러나 미디어 앱에서는 사용자가 동영상을 보고 있을 수 있으므로 흐리게 표시되면 안 됩니다. System.Windows.Display.DisplayRequest 클래스를 사용하여 앱의 표시를 항상 켜진 상태로 유지하도록 지시합니다. 그러나 앱이 일시 중단되거나, 미디어 재생이 완료되거나, 미디어가 일시 중지된 경우와 같이 앱에 더 이상 필요하지 않으면 즉시 이 요청을 취소해야 합니다. 이 요청을 취소하지 않으면 배터리 사용 시간이 낭비됩니다. 기본 제공 전송 컨트롤의 전체 창 단추를 통해 또는 msRequestFullscreen 함수를 통해 전체 창 렌더링을 사용하도록 설정하면 화면 흐리게 표시 사용 안 함 및 다시 사용 동작이 시스템에서 자동으로 처리됩니다. 따라서 앱이 전체 창 모드에서만 화면 흐리게 표시를 사용하지 않도록 설정해야 하는 경우 직접 DisplayRequest를 관리하지 않아도 됩니다. 샘플에서 찾기:\pages\mediaPlayer\mediaPlayer.js의 `setScreenDimming` 함수를 참조하세요.
	시스템 미디어 전송 컨트롤을 사용하는 방법 Windows 8.1에서는 시스템 미디어 전송 컨트롤을 조작하는 새 클래스가 도입되었습니다. 이제 기존의 MediaControl 클래스 대신 SystemMediaTransportControls를 사용합니다. 시스템 미디어 전송 컨트롤은 HTML 미디어 개체의 전송 컨트롤과 다릅니다. 이 컨트롤은 헤드폰의 볼륨 컨트롤, 일부 키보드의 미디어 단추 등 하드웨어 미디어 키를 누를 때 팝업되는 컨트롤입니다. 앱은 이러한 컨트롤을 등록하여 사용할 수 있으며, 컨트롤에서 표시되도록 앨범 이미지, 노래 제목 등의 미디어 메타데이터를 전달할 수 있습니다. 컨트롤의 모양은 다음과 같습니다. 샘플에서 찾기:\pages\mediaPlayer\mediaPlayer.js의 `WinJS.UI.Pages.define`, `setupSystemMediaTransportControls` 및 `systemMediaControlsButtonPressed` 함수를 참조하세요. 또한 \pages\mediaPlayer\mediaPlayer.js의 `mediaPlaying`, `mediaPaused` 및 `mediaEnded` 이벤트 처리기를 참조하세요.
	백그라운드에서 오디오를 재생하는 방법. 이제 사용자가 다른 앱을 조작하는 동안 앱으로 음악을 들을 수 있도록 백그라운드 오디오 지원을 설정하겠습니다. 사용자가 다른 앱으로 전환하는 경우 등 오디오를 재생하는 앱이 백그라운드로 이동할 때 기본 동작은 오디오가 중지되는 것입니다. 그러나 음악 앱은 오디오가 계속 재생되도록 선택할 수 있습니다. 백그라운드에서 오디오를 재생하려면 앱 매니페스트 Declarations 섹션에서 백그라운드 오디오 작업을 설정해야 합니다. 또한 SystemMediaTransportControls의 isPlayEnabled 및 isPauseEnabled 속성을 사용하도록 설정하고 buttonpressed 이벤트를 처리해야 합니다. 앱이 활성 앱이 아닐 때 사용자가 오디오를 재생 및 중지할 수 있으려면 이 작업이 필요합니다. 샘플에서 찾기:\pages\mediaPlayer\mediaPlayer.html의 video 요소와 \pages\mediaPlayer\mediaPlayer.html의 `setupSystemMediaTransportControls` 함수를 참조하고 백그라운드 작업을 사용하도록 설정하는 package.appmanifest.xml의 Declarations 섹션을 살펴보세요.
	전체 창 렌더링을 사용하도록 설정하는 방법 audio 및 video 개체의 기본 제공 전송 컨트롤에는 전체 창 단추가 있습니다. 그러나 프로그래밍 방식으로 전체 창 렌더링을 사용하거나 사용하지 않도록 설정하려는 경우 msRequestFullscreen 함수를 사용합니다. Windows 8.1 이전에는 전체 창의 범위를 계산하고 다른 UI를 직접 표시하거나 숨겨야 했습니다. 올바른 방법으로 수행하지 않을 경우 일부 렌더링 최적화를 사용할 수 없었습니다. 따라서 전체 창 렌더링을 사용하거나 사용하지 않도록 설정하려면 항상 msRequestFullscreen 함수를 사용합니다. 그리고 이 방법이 더 용이합니다. 샘플에서 찾기:\pages\mediaPlayer\mediaPlayer.js의 `fullScreenMedia` 함수를 참조하세요.
	사용자 지정 전송 컨트롤을 만드는 방법 audio 및 video 전송 컨트롤이 제공하는 기능을 확장해야 하거나 컨트롤을 완전히 바꾸려는 경우 사용자 지정 전송 컨트롤을 만들어야 합니다. 미디어 재생 전체 프로세스 샘플에서는 AppBar에 모든 사용자 지정 전송 컨트롤을 구현하지만 기본 제공 전송 컨트롤도 사용되는 상태로 둡니다. 고유한 사용자 지정 전송 컨트롤을 만드는 경우 기본 제공 UI를 고유한 컨트롤로 바꿀 수도 있습니다. 기본 제공 전송 컨트롤을 끄려면 controls를 false로 설정합니다. 이 방법 항목에서는 재생, 일시 중지, 중지, 빨리 감기, 되감기, 위치 슬라이더, 전체 창, 오디오 섹션, 음소거 및 볼륨에 대한 사용자 지정 전송 컨트롤을 만드는 방법을 설명합니다. 샘플에서 찾기:\pages\mediaPlayer\mediaPlayer.html의 AppBar 요소를 참조하고, 기능을 구현하는 이벤트 처리기는 \pages\mediaPlayer\mediaPlayer.js를 살펴보세요.

앱 기본 사항

앱 바 추가

WinJS.UI.AppBar를 사용하여 앱을 조작하는 UI와 audio 및 video 개체를 앱 바에 배치합니다. WinJS.UI.AppBarCommand 컨트롤은 AppBar용으로 특별히 빌드되었으며 매끄럽게 작동합니다. "단추", "토글", "플라이아웃", "구분 기호", "콘텐츠" 등의 컨트롤 유형을 사용할 수 있습니다.

WinJS.UI.AppBarIcon 열거형에는 AppBarCommand.icon에 사용할 수 있는 많은 기호가 포함되어 있습니다. 고유한 사용자 지정 PNG(이동식 네트워크 그래픽) 파일을 제공할 수도 있습니다.

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

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

도우미 샘플에서는 오디오 트랙 선택 컨트롤과 볼륨 컨트롤에 플라이아웃을 사용합니다. 이렇게 하면 공간을 절약하는 데 도움이 됩니다.

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

샘플에서 찾기:\pages\mediaPlayer\mediaPlayer.html의 <div id="appBarTop" 및 <div id="appBarBottom" 요소를 참조하세요. 특정 컨트롤과 기능이 구현된 방법을 확인하려면 \pages\mediaPlayer\mediaPlayer.js에서 앱 바 단추에 대한 이벤트 처리기를 살펴보세요.

앱 수명 주기 및 상태 관리

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

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

저장할 중요한 video 상태는 src, currentTime, loop, paused, ended, autoplay 및 선택한 모든 audioTracks입니다.

navigation.js는 Visual Studio 템플릿에 포함된 도우미 함수입니다. 빈 템플릿을 제외한 모든 템플릿에 포함되어 있습니다. 이러한 도우미 함수는 일시 중단, 다시 시작 및 종료에서 다시 시작의 처리를 간소화합니다.

일부 미디어 상태는 미디어가 로드된 후에 복원해야 합니다(예: currentTime).

샘플에서 찾기:\pages\mediaPlayer\mediaPlayer.js의 app.oncheckpoint, navigationHelper_SaveState, restoreMediaState, mediaLoaded 및 appResumingFromSuspend 함수를 살펴보세요. \js\default.js의 app.onactivated를 확인합니다.

앱 설정에 대한 지침

JavaScript로 작성한 Windows 스토어 앱에는 WinJS.UI.SettingsFlyout 컨트롤을 사용합니다.

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

샘플에서 찾기:\js\default.js의 app.onactivated를 살펴보세요. audio.html, video.html, help.html 및 privacy.html 설정 페이지는 \settings 하위 폴더에 있습니다.