Cómo recortar un archivo de vídeo (HTML)

Artículo
02/16/2016

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Los métodos TrimStartTime y TrimStopTime en MediaTranscoder recortan un archivo multimedia.

En este ejemplo, se establecen dos puntos de edición: un punto de inicio y uno de finalización. Estos especifican la parte del vídeo que se desea recortar. La salida del objeto MediaTranscoder es un archivo con el mismo perfil de codificación que el archivo de origen, pero recorta el vídeo en los dos puntos de edición.

En este tutorial se describe cómo usar la clase FileOpenPicker para abrir un archivo de vídeo del sistema, después la clase MediaTranscoder para recortar el archivo y finalmente la clase FileSavePicker para guardar el archivo recién codificado.

Para obtener otro ejemplo de transcodificación en una aplicación de Windows en tiempo de ejecución con JavaScript, consulta la muestra de transcodificación de multimedia.

Requisitos previos

En este tema se da por hecho que sabes crear una aplicación de la Tienda Windows básica con JavaScript. Si necesitas ayuda para crear tu primera aplicación, consulta Crear la primera aplicación de la Tienda Windows con JavaScript.

Instrucciones

Paso 1: Crear un nuevo proyecto

Comienza por la creación de una aplicación de la Tienda Windows vacía con JavaScript.

Paso 2: Seleccionar un archivo de origen y crear un archivo de destino

Usa la clase FileOpenPicker para seleccionar un archivo de origen y la clase FileSavePicker para crear el archivo de destino. Establece las propiedades SuggestedStartLocation y FileTypeFilter en FileOpenPicker. En el objeto FileSavePicker, establece las propiedades SuggestedStartLocation, DefaultFileExtension, SuggestedFileName y FileTypeChoices. Ten en cuenta que esta función llama a una función denominada TrimFile. Se trata de una función definida por el usuario que realiza la operación de transcodificación. Crearemos esta función en el paso siguiente.

Una aplicación de la Tienda de Windows Phone con JavaScript debe usar PickSingleFileAndContinue en lugar de 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);
        });
};

Paso 3: Inicializar MediaTranscoder

Crea una nueva instancia de MediaTranscoder y configura las propiedades TrimStartTime y TrimStopTime. En este ejemplo, TrimStartTime es 1 segundo y TrimStopTime es 9 segundos.

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;

Paso 4: Recortar el archivo

Para recortar el archivo, llama a la función asincrónica PrepareFileTranscodeAsync y después a la función TranscodeAsync en el objeto PrepareTranscodeResult:

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

};

Al recortar un archivo multimedia, no tienes que especificar un perfil de codificación en el método PrepareFileTranscodeAsync. Si omites el perfil, el archivo de destino tiene el mismo formato que el archivo de entrada.

Ejemplo completo

El siguiente ejemplo de código muestra la secuencia de llamadas completa para una operación de recorte.

Primero, este es el código para abrir y guardar el archivo.

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

Después, este es el código para transcodificar el archivo.

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

};

Finalmente, este es el código para controlar el progreso, los errores y la finalización de la transcodificación.

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