빠른 시작: 앱에서 비디오 재생
언어: HTML | XAML

빠른 시작: 앱에서 비디오 재생(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를 사용하도록 설정합니다.

  1. Microsoft Visual Studio의 솔루션 탐색기에서 package.appxmanifest 항목을 두 번 클릭하여 응용 프로그램 매니페스트 디자이너를 엽니다.
  2. 접근 권한 값을 클릭합니다.
  3. Internet (Client) 접근 권한 값의 확인란을 선택합니다.

이 접근 권한 값은 응용 프로그램에 인터넷에 대한 아웃바운드 액세스를 부여합니다. 인터넷 URL에서 비디오를 재생하려면 이러한 액세스가 필요합니다.

참고  로컬 비디오 파일을 재생할 때는 이 접근 권한 값이 필요하지 않습니다.
 

2. 비디오 요소 추가

Default.html이라는 HTML 파일을 열고 문서 본문에 비디오 요소를 추가합니다.


<body>
  <video id="mediaVideo" src="http://www.contoso.com/clip.mp4" controls/>
</body>


예제의 "http://www.contoso.com/clip.mp4" URL 대신 실제 URL을 사용해야 합니다.

Video 요소는 사용자가 비디오를 시작 또는 일시 중지하거나 새 위치 찾거나 볼륨을 조정할 수 있는 일련의 재생 컨트롤을 기본 제공합니다. 재생 컨트롤은 기본적으로 표시되지 않으며, 사용하도록 설정하려면 다음과 같이 controls 특성을 추가하면 됩니다. 사용자가 비디오 위로 마우스를 가져가면 컨트롤이 표시됩니다.

3. 너비 및 높이 특성 설정

비디오 크기를 미리 알고 있는 경우 video 요소의 widthheight 특성을 설정하는 것이 좋습니다. 이 특성은 요소의 레이아웃 크기를 CSS(Cascading Style Sheets) 픽셀로 지정합니다. 페이지가 로드될 때 요소용으로 공간이 예약됩니다. 너비 및 높이 특성을 포함하지 않으면 비디오가 다운로드된 후 페이지가 재배치됩니다.


<body>
   <video src="http://www.contoso.com/clip.mp4" controls width=640 height=480/>
</body>


너비와 높이 특성은 항상 CSS 픽셀을 지정하며 단위가 없습니다. 예를 들어 "5cm" 및 "100%"는 잘못되었습니다.

너비와 높이 특성이 비디오의 기본 크기와 일치하지 않으면 비디오 컨트롤에서 비디오를 가로 세로 비율은 유지(필요한 경우 레터박스 사용)한 채로 확대합니다. 그러나 시각적 아티팩트가 생성될 수 있으므로 비디오를 확대하지 않는 것이 좋습니다. 가능하면 비디오를 원하는 보기 크기로 인코드합니다.

요약

이 항목에서는 <video> 태그를 사용하여 URL의 비디오를 재생하는 방법을 보여 주었습니다.

관련 항목

로드맵
JavaScript로 작성한 Windows 런타임 앱용 로드맵
앱용 UX 디자인
멀티미디어 추가
샘플
HTML 미디어 재생 샘플
Media Extension 샘플
참조 네임스페이스
Windows.Media
Windows.Media.PlayTo
Windows.Media.Protection
HTML5 오디오 및 비디오
다른 리소스
지원되는 오디오 및 동영상 형식
오디오 및 동영상 성능
오디오/비디오 재생 동안 표시 유지 방법

 

 

표시:
© 2017 Microsoft