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

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

FileOpenPicker를 통해 파일에 액세스하고 열어 사용자 컴퓨터에 있는 오디오 또는 동영상 파일을 재생합니다.

지침

JavaScript를 사용하는 Windows 스토어 앱에서는 HTML5 AudioVideo 미디어 요소를 사용하여 오디오 및 동영상 재생을 구현합니다. 오디오 또는 동영상 파일은 src 특성에 URL로 지정합니다.

사용자 컴퓨터에 있는 미디어 파일을 재생할 때도 동일한 방법을 사용합니다. 유일한 차이점은 다음과 같이 로컬 파일의 URL을 직접 만들어야 한다는 것입니다.

  1. FileOpenPicker를 사용하여 미디어 파일을 선택합니다.
  2. URL.createObjectURL을 호출하여 미디어 파일의 개체 URL을 만듭니다.
  3. 미디어 요소의 src 특성을 URL 개체로 설정합니다.
  4. 미디어 요소의 play 메서드를 호출하여 재생을 시작합니다.

접근 권한 값

사용자가 어떤 파일에 액세스할지 완전히 제어하므로 FileOpenPicker에는 사용자의 Music 또는 비디오 폴더 등 로컬 파일 시스템에 있는 파일에 액세스하기 위해 특별한 접근 권한 값이 필요하지 않습니다. 보안 및 개인 정보 보호의 관점에서 볼 때 앱이 사용하는 접근 권한 값 수를 최소화하는 것이 가장 좋습니다.

그러나 Music 또는 비디오 폴더에 대한 사용자의 조작 없이 앱이 액세스가 필요할 경우(예제: 사용자의 컬렉션에 있는 모든 음악 또는 동영상 파일을 열거하고 앱에 표시하려는 경우)에는 Music Library비디오 라이브러리 접근 권한 값을 선언해야 합니다. 접근 권한 값을 선언하는 방법에 대한 자세한 내용은 앱 접근 권한 값 선언을 참조하세요.

다음 예에서는 사용자의 비디오에서 미디어 파일을 가져와 재생하기 위해 FileOpenPicker를 사용합니다.

Windows Phone 스토어 앱은 pickSingleFileAndContinue를 사용해야 합니다.

function playVideo() {
    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
    openPicker.pickSingleFileAsync().then(function (fileItem) {
        if (fileItem) {
            var video = document.getElementById("myVideo");
            video.src = URL.createObjectURL(fileItem);
            video.play();
        }
    });
}

관련 항목

미디어 재생 샘플

Video

Audio