네트워크에서 미디어 파일을 여는 방법(HTML)

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

audio 또는 video 요소의 미디어 원본을 네트워크의 미디어 파일로 설정합니다.

사전 요구 사항

이 항목에서는 사용자가 JavaScript를 사용하여 기본 Windows 런타임 앱을 만드는 방법을 알고 있다고 가정합니다. 첫 번째 앱을 만드는 방법에 대한 자세한 내용은 Create your first Windows Runtime app using JavaScript를 참조하세요.

이 항목에서는 HTML audiovideo 요소에 대해 잘 알고 있는 것으로 가정합니다. audiovideo 요소의 사용 방법을 보려면 빠른 시작: 앱에서 동영상 재생을 참조하세요.

지침

단계 1: 소개

audiovideo 요소는 JavaScript로 작성한 Windows 런타임 앱에서 오디오 또는 비디오 미디어를 재생합니다. src 속성은 재생할 미디어 파일을 지정합니다. 대상은 네트워크의 파일, 응용 프로그램에 포함된 파일 또는 로컬 시스템의 파일일 수 있습니다.

네트워크의 파일 또는 앱에 포함된 파일을 재생하려면 src 속성을 파일의 경로로 설정합니다.

로컬 시스템에 있는 파일 또는 Microsoft OneDrive에서 파일을 열려면 FileOpenPicker를 사용하여 파일을 가져올 수 있습니다. 자세한 내용은 FileOpenPicker 컨트롤을 사용하여 로컬 미디어 파일을 여는 방법을 참조하세요.

이 항목에서는 src를 네트워크에 있거나 앱에 포함된 미디어 파일로 설정하는 방법을 살펴봅니다.

Windows 스토어 앱에서 지원되는 오디오 및 비디오 미디어 형식에 대한 자세한 내용은 지원되는 오디오 및 비디오 형식을 참조하세요.

단계 2: 접근 권한 값

인터넷에서 파일을 가져올 경우 프로젝트의 Package.appmanifes 파일에 Internet (Client) 접근 권한 값을 설정해야 합니다. 접근 권한 값을 선언하는 방법에 대한 자세한 내용은 앱 접근 권한 값 선언을 참조하세요.

단계 3: HTML에서 원본을 네트워크에 있는 파일로 설정

다음은 video 요소의 src 속성을 설정하려고 하는 일부 코드입니다.

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

단계 4: JavaScript에서 원본 설정

    var media = document.getElementById("mediaVideo");
    media.src = "https://www.contoso.com/clip2.mp4";

관련 항목

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