如何修剪視訊檔案 (HTML)

發行項
02/12/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

MediaTranscoder 上的 TrimStartTime 和 TrimStopTime 方法可修剪媒體檔案。

在這個範例中，設定了兩個編輯點、一個是起點，另一個是終點。這些點會指定視訊要修剪的部分。MediaTranscoder 物件在輸出檔案時會使用和來源檔案一樣的編碼設定檔，但是會在兩個編輯點修剪視訊。

這個教學課程描述如何使用 FileOpenPicker 類別從系統開啟視訊檔案，然後使用 MediaTranscoder 類別修剪該檔案，最後使用 FileSavePicker 類別儲存剛才編碼的檔案。

如需使用 JavaScript 的 Windows 執行階段應用程式中的其他轉碼範例，請參閱轉碼媒體範例。

先決條件

這個主題假設您可以使用 JavaScript 建立基本的 Windows 市集應用程式。如果建立您的第一個應用程式時需要協助，請參閱使用 JavaScript 建立您的第一個 Windows 市集應用程式。

指示

步驟 1: 建立新專案

從使用 JavaScript 建立空白的 Windows 市集應用程式開始。

步驟 2: 選取來源檔案並建立目的地檔案

使用 FileOpenPicker 類別來選取來源檔案，然後使用 FileSavePicker 類別來建立目的地檔案。在 FileOpenPicker 上設定 SuggestedStartLocation 和 FileTypeFilter 屬性。在 FileSavePicker 物件上，設定 SuggestedStartLocation、DefaultFileExtension、SuggestedFileName 及 FileTypeChoices 屬性。請注意，這個函式會呼叫名為 TrimFile 的函式。這是一個由使用者定義用來執行轉碼作業的函式。我們會在下一個步驟中建立這個函式。

使用 JavaScript 的 Windows Phone 市集應用程式必須使用 PickSingleFileAndContinue 而不使用 PickSingleFileAsync。

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 的新執行個體以及設定 TrimStartTime 和 TrimStopTime 屬性。在這個範例中，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] + "%";
};

共用方式為