Comment découper un fichier vidéo (HTML)

Article
02/12/2016

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Les méthodes TrimStartTime et TrimStopTime permettent de découper un fichier multimédia dans l’objet MediaTranscoder.

Dans cet exemple, deux points de montage sont définis : un point de départ et un point d’arrivée. Ceux-ci indiquent la partie de la vidéo à découper. L’objet MediaTranscoder génère un fichier de même profil d’encodage que le fichier source, mais découpe la vidéo aux deux points de montage.

Ce didacticiel explique comment utiliser la classe FileOpenPicker pour ouvrir un fichier vidéo à partir du système, puis la classe MediaTranscoder pour découper le fichier et enfin la classe FileSavePicker pour enregistrer le fichier nouvellement encodé.

Pour obtenir un autre exemple de transcodage dans une application Windows Runtime en JavaScript, voir Exemple de transcodage d’éléments multimédias.

Prérequis

Dans cette rubrique, nous partons du principe que vous savez créer une application du Windows Store en JavaScript. Pour obtenir de l’aide lors de la création de votre première application, voir Créer votre première application du Windows Store en JavaScript.

Instructions

Étape 1: Créer un projet

Commencez par créer une application du Windows Store vide en JavaScript.

Étape 2: Sélectionner un fichier source et créer un fichier de destination

Utilisez la classe FileOpenPicker pour sélectionner un fichier source et la classe FileSavePicker pour créer le fichier de destination. Définissez les propriétés SuggestedStartLocation et FileTypeFilter de l’objet FileOpenPicker. Sur l’objet FileSavePicker, définissez les propriétés SuggestedStartLocation, DefaultFileExtension, SuggestedFileName et FileTypeChoices. Notez que cette fonction en appelle une autre appelée TrimFile. Celle-ci est définie par l’utilisateur et se charge de l’opération de transcodage. Nous allons créer cette fonction à l’étape suivante.

Une application du Windows Phone Store en JavaScript doit utiliser PickSingleFileAndContinue au lieu 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);
        });
};

Étape 3: Initialiser le MediaTranscoder

Créez une instance de MediaTranscoder et définissez ses propriétés TrimStartTime et TrimStopTime. Dans cet exemple, TrimStartTime correspond à 1 seconde et TrimStopTime a la valeur de 9 secondes.

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;

Étape 4: Découper le fichier

Pour découper le fichier, appelez la fonction asynchrone PrepareFileTranscodeAsync puis appelez la fonction TranscodeAsync sur l’objet 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
        }
    })

};

Si vous comptez découper un fichier multimédia, sachez que vous n’avez pas à préciser de profil d’encodage dans la méthode PrepareFileTranscodeAsync. Si vous omettez le profil, le fichier de destination conserve le même format que le fichier en entrée.

Terminer l’exemple

L’exemple de code suivant reprend la séquence complète des appels pour une opération de découpage.

Voici tout d’abord le code pour ouvrir et enregistrer le fichier.

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

Le code suivant permet ensuite de transcoder le fichier.

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

};

Enfin, voici le code pour gérer la progression, les erreurs et la finalisation du transcodage.

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