비디오 파일을 자르는 방법(HTML)

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

MediaTranscoderTrimStartTimeTrimStopTime 메서드는 미디어 파일을 자릅니다.

이 예에서는 두 개의 편집 지점(시작점과 끝점)이 설정됩니다. 두 지점은 자를 비디오 부분을 지정합니다. MediaTranscoder 개체는 원본 파일과 동일한 인코딩 프로필을 사용하여 파일을 출력하지만 두 개의 편집 지점에서 비디오를 자릅니다.

이 자습서에서는 FileOpenPicker 클래스를 사용하여 시스템에서 비디오 파일을 열고, MediaTranscoder 클래스를 사용하여 파일을 자르고, 마지막으로 FileSavePicker 클래스를 사용하여 새로 인코딩된 파일을 저장하는 방법에 대해 설명합니다.

JavaScript를 사용하는 Windows 런타임 앱에서 코드 변환하는 다른 예는 미디어 코드 변환 샘플(영문)을 참조하세요.

사전 요구 사항

이 항목에서는 JavaScript로 작성한 기본 Windows 스토어 앱을 만들 수 있다고 가정합니다. 첫 번째 앱을 만드는 자세한 내용은 JavaScript를 사용하여 첫 번째 Windows 스토어 앱 만들기를 참조하세요.

지침

단계 1: 새 프로젝트 만들기

먼저 JavaScript를 사용하여 빈 Windows 스토어 앱을 만듭니다.

단계 2: 원본 파일 선택 및 대상 파일 만들기

FileOpenPicker 클래스를 사용하여 원본 파일을 선택하고 FileSavePicker 클래스를 사용하여 대상 파일을 만듭니다. FileOpenPicker에서 SuggestedStartLocationFileTypeFilter 속성을 설정합니다. FileSavePicker 개체에서SuggestedStartLocation, DefaultFileExtension, SuggestedFileNameFileTypeChoices 속성을 설정합니다. 이 함수는 TrimFile이라는 함수를 호출합니다. 이 함수는 코드 변환 작업을 수행하는 사용자 정의 함수입니다. 다음 단계에서는 이 함수를 만듭니다.

JavaScript로 작성한 Windows Phone 스토어 앱은 PickSingleFileAsync가 아닌 PickSingleFileAndContinue를 사용해야 합니다.

function trimVideoFile() {

    var source;
    var destination
    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();

    openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.videosLibrary;
    openPicker.fileTypeFilter.replaceAll([".wmv", ".mp4"]);

    openPicker.pickSingleFileAsync().then(
        function (file) {
            source = file;

            var savePicker = new Windows.Storage.Pickers.FileSavePicker();

            savePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.videosLibrary;
            savePicker.defaultFileExtension = ".mp4";
            savePicker.suggestedFileName = "New Video";
            savePicker.fileTypeChoices.insert("MPEG4", [".mp4"]);

            return savePicker.pickSaveFileAsync();
        }).then(
        function (file) {
            destination = file;

            // Custom function that performs the transcoding.
            TrimFile(source, destination);
        });
};

단계 3: MediaTranscoder 초기화

MediaTranscoder의 새 인스턴스를 만들고 TrimStartTimeTrimStopTime 속성을 설정합니다. 이 예에서 TrimStartTime은 1초이고 TrimStopTime은 9초입니다.

var profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
    Windows.Media.MediaProperties.VideoEncodingQuality.hd720p);

var transcoder = new Windows.Media.Transcoding.MediaTranscoder();

// Set the start of the trim.
transcoder.trimStartTime = 1000;

// Set the end of trim.
transcoder.trimStopTime = 9000;

단계 4: 파일 자르기

파일을 자르려면 비동기 함수 PrepareFileTranscodeAsync를 호출한 다음 PrepareTranscodeResult 개체의 TranscodeAsync 함수를 호출합니다.

/// <param name="srcFile" type="IStorageFile"/>
/// <param name="destFile" type="IStorageFile"/>
function TrimFile(srcFile, destFile) {

    var profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
        Windows.Media.MediaProperties.VideoEncodingQuality.hd720p);

    var transcoder = new Windows.Media.Transcoding.MediaTranscoder();

    // Set the start of the trim.
    transcoder.trimStartTime = 1000;

    // Set the end of trim.
    transcoder.trimStopTime = 9000;

    transcoder.prepareFileTranscodeAsync(srcFile, destFile, profile).then(function (result) {
        if (result.canTranscode) {
            result.transcodeAsync().then(transcodeComplete, transcoderErrorHandler, transcodeProgress);
        } else {
            // Handle error condition. result.failureReason
        }
    })

};

미디어 파일을 자를 때는 PrepareFileTranscodeAsync 메서드에 인코딩 프로필을 지정하지 않아도 됩니다. 프로필을 생략하면 대상 파일이 입력 파일과 동일한 형식을 사용합니다.

전체 예제

다음 코드 샘플에서는 자르기 작업의 전체 호출 시퀀스를 보여 줍니다.

다음은 파일을 열고 저장하는 코드입니다.

function trimVideoFile() {

    var source;
    var destination
    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();

    openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.videosLibrary;
    openPicker.fileTypeFilter.replaceAll([".wmv", ".mp4"]);

    openPicker.pickSingleFileAsync().then(
        function (file) {
            source = file;

            var savePicker = new Windows.Storage.Pickers.FileSavePicker();

            savePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.videosLibrary;
            savePicker.defaultFileExtension = ".mp4";
            savePicker.suggestedFileName = "New Video";
            savePicker.fileTypeChoices.insert("MPEG4", [".mp4"]);

            return savePicker.pickSaveFileAsync();
        }).then(
        function (file) {
            destination = file;

            // Custom function that performs the transcoding.
            TrimFile(source, destination);
        });
};

다음은 파일을 트랜스코딩하는 코드입니다.

/// <param name="srcFile" type="IStorageFile"/>
/// <param name="destFile" type="IStorageFile"/>
function TrimFile(srcFile, destFile) {

    var profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
        Windows.Media.MediaProperties.VideoEncodingQuality.hd720p);

    var transcoder = new Windows.Media.Transcoding.MediaTranscoder();

    // Set the start of the trim.
    transcoder.trimStartTime = 1000;

    // Set the end of trim.
    transcoder.trimStopTime = 9000;

    transcoder.prepareFileTranscodeAsync(srcFile, destFile, profile).then(function (result) {
        if (result.canTranscode) {
            result.transcodeAsync().then(transcodeComplete, transcoderErrorHandler, transcodeProgress);
        } else {
            // Handle error condition. result.failureReason
        }
    })

};

마지막으로 다음은 코드 변환 진행률, 오류 및 완료를 처리하는 코드입니다.

function transcodeComplete(result) {
    // handle completion.

    // This snippet writes to an HTML control which is defined external to this snippet.
    OutputText.innerHTML = "Transcode Complete";
};

function transcoderErrorHandler(error) {
    // handle error condition
};

function transcodeProgress(percent) {

    // handle progress.
    // This snippet writes to an HTML control which is defined external to this snippet.
    ProgressText.innerHTML = "Transcode Progress: " + percent.toString().split(".")[0] + "%";
};

관련 항목

로드맵

JavaScript를 사용하는 Windows 스토어 앱용 로드맵

앱용 UX 디자인

멀티미디어 추가

샘플

미디어 코드 변환 샘플

Media Extension 샘플

실시간 통신 샘플

작업

빠른 시작: 코드 변환

참조

Windows.Media

Windows.Media.MediaProperties

Windows.Media.Transcoding

MediaTranscoder

TrimStartTime

TrimStopTime

PrepareTranscodeResult

TranscodeAsync