如何剪裁视频文件 (HTML)

2016-02-12

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

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] + "%";
};

通过