빠른 시작: 앱에서 비디오 재생(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
이 항목에서는 HTML5 Video 요소를 사용하여 JavaScript를 사용하는 Windows 런타임 앱에서 동영상을 재생하는 방법을 보여 줍니다.
JavaScript를 사용하는 Windows 런타임 앱에서 오디오 및 비디오를 사용하는 다른 예제는 HTML 미디어 재생 샘플(영문)을 참조하세요.
Windows 런타임 앱에서 지원되는 오디오 및 비디오 미디어 형식에 대한 자세한 내용은 지원되는 오디오 및 비디오 형식을 참조하세요.
사전 요구 사항
이 항목에서는 JavaScript로 작성한 기본 Windows 런타임 앱을 만들 수 있다고 가정합니다. 첫 번째 앱을 만드는 자세한 내용은 JavaScript를 사용하여 첫 번째 Windows 스토어 앱 만들기를 참조하세요.
지침
1. 인터넷 클라이언트 접근 권한 값 선언
응용 프로그램 매니페스트 파일 package.appxmanifest.xml을 열고 Internet (Client) capability를 사용하도록 설정합니다.
- Microsoft Visual Studio의 솔루션 탐색기에서 package.appxmanifest 항목을 두 번 클릭하여 응용 프로그램 매니페스트 디자이너를 엽니다.
- 접근 권한 값을 클릭합니다.
- Internet (Client) 접근 권한 값의 확인란을 선택합니다.
이 접근 권한 값은 응용 프로그램에 인터넷에 대한 아웃바운드 액세스를 부여합니다. 인터넷 URL에서 비디오를 재생하려면 이러한 액세스가 필요합니다.
참고 로컬 비디오 파일을 재생할 때는 이 접근 권한 값이 필요하지 않습니다.
2. 비디오 요소 추가
Default.html이라는 HTML 파일을 열고 문서 본문에 비디오 요소를 추가합니다.
<body>
<video id="mediaVideo" src="https://www.contoso.com/clip.mp4" controls/>
</body>
예제의 "https://www.contoso.com/clip.mp4" URL 대신 실제 URL을 사용해야 합니다.
Video 요소는 사용자가 비디오를 시작 또는 일시 중지하거나 새 위치 찾거나 볼륨을 조정할 수 있는 일련의 재생 컨트롤을 기본 제공합니다. 재생 컨트롤은 기본적으로 표시되지 않으며, 사용하도록 설정하려면 다음과 같이 controls 특성을 추가하면 됩니다. 사용자가 비디오 위로 마우스를 가져가면 컨트롤이 표시됩니다.
3. 너비 및 높이 특성 설정
비디오 크기를 미리 알고 있는 경우 video 요소의 width 및 height 특성을 설정하는 것이 좋습니다. 이 특성은 요소의 레이아웃 크기를 CSS(Cascading Style Sheets) 픽셀로 지정합니다. 페이지가 로드될 때 요소용으로 공간이 예약됩니다. 너비 및 높이 특성을 포함하지 않으면 비디오가 다운로드된 후 페이지가 재배치됩니다.
<body>
<video src="https://www.contoso.com/clip.mp4" controls width=640 height=480/>
</body>
너비와 높이 특성은 항상 CSS 픽셀을 지정하며 단위가 없습니다. 예를 들어 "5cm" 및 "100%"는 잘못되었습니다.
너비와 높이 특성이 비디오의 기본 크기와 일치하지 않으면 비디오 컨트롤에서 비디오를 가로 세로 비율은 유지(필요한 경우 레터박스 사용)한 채로 확대합니다. 그러나 시각적 아티팩트가 생성될 수 있으므로 비디오를 확대하지 않는 것이 좋습니다. 가능하면 비디오를 원하는 보기 크기로 인코드합니다.
요약
이 항목에서는 <video> 태그를 사용하여 URL의 비디오를 재생하는 방법을 보여 주었습니다.
관련 항목
로드맵
JavaScript로 작성한 Windows 런타임 앱용 로드맵
샘플
참조 네임스페이스
다른 리소스