Language: HTML | XAML

How to trim a video file (HTML)

TrimStartTime and TrimStopTime methods on the MediaTranscoder trim a media file.

In this example, two edit points are set, a start point and an end point. These specify the portion of the video to trim. The MediaTranscoder object outputs a file with the same encoding profile as the source file, but trims the video at the two edit points.

This tutorial describes how to use the FileOpenPicker class to open a video file from the system, then the MediaTranscoder class to trim the file, and finally the FileSavePicker class to save the newly encoded file.

For another example of transcoding in a Windows Runtime app using JavaScript, see the Transcoding media sample.

Prerequisites

This topic assumes that you can create a basic Windows Store app using JavaScript. For help creating your first app, see Create your first Windows Store app using JavaScript.

Instructions

Step 1: Create new project

Start by creating a blank Windows Store app using JavaScript.

Step 2: Select a source file and create a destination file

Use the FileOpenPicker class to select a source file and the FileSavePicker class to create the destination file. Set the SuggestedStartLocation and FileTypeFilter properties on the FileOpenPicker. On the FileSavePicker object, set the SuggestedStartLocation, DefaultFileExtension, SuggestedFileName, and FileTypeChoices properties. Note, this function calls a function called TrimFile. This is a user defined function that performs the transcode operation. We will create this function in the next step.

Windows Phone Store app using JavaScript must use PickSingleFileAndContinue instead of 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);
        });
};


Step 3: Initialize the MediaTranscoder

Create a new instance of the MediaTranscoder and set the TrimStartTime and TrimStopTime properties. In this example, TrimStartTime is 1 second and TrimStopTime is 9 seconds.


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;


Step 4: Trim the File

To trim the file, call the aysnc function PrepareFileTranscodeAsync and then call the TranscodeAsync function on the PrepareTranscodeResult object:


/// <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
        }
    })

};


When you trim a media file, you don't have to specify an encoding profile in the PrepareFileTranscodeAsync method. If you omit the profile, the destination file has the same format as the input file.

Complete example

The following code sample shows the complete sequence of calls for a trimming operation.

First, here is the code to open and save the file.


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);
        });
};


Next, here is the code to transcode the file.


/// <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
        }
    })

};


Finally, here is the code to handle the transcode progress, error, and completion.


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


Related topics

Roadmaps
Roadmap for Windows Store apps using JavaScript
Designing UX for apps
Adding multimedia
Samples
Transcoding media sample
Media extension sample
Real-Time communication sample
Tasks
Quickstart: transcoding
Reference
Windows.Media
Windows.Media.MediaProperties
Windows.Media.Transcoding
MediaTranscoder
TrimStartTime
TrimStopTime
PrepareTranscodeResult
TranscodeAsync

 

 

Show:
© 2015 Microsoft