Come ritagliare un file video (HTML)

Articolo
02/12/2016

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

I metodi TrimStartTime e TrimStopTime nella classe MediaTranscoder ritagliano un file multimediale.

In questo esempio vengono impostati due punti di modifica, ovvero un punto iniziale e uno finale. Questi punti specificano la parte del video da ritagliare. L'oggetto MediaTranscoder restituisce un file con lo stesso profilo di codifica del file di origine, ma ritaglia il video in corrispondenza dei due punti di modifica.

Questa esercitazione descrive come usare la classe FileOpenPicker per aprire un file video dal sistema, quindi la classe MediaTranscoder per ritagliare il file e infine la classe FileSavePicker per salvare il nuovo file codificato.

Per un altro esempio di codifica intermedia in un'app di Windows Runtime scritta in JavaScript, vedi l'Esempio di codifica intermedia di un file multimediale.

Prerequisiti

Partiamo dal presupposto che tu sappia come creare una semplice app di Windows Store in JavaScript. Se hai bisogno di aiuto per creare la tua prima app, vedi Creare la prima app di Windows Store in JavaScript.

Istruzioni

Passaggio 1: Creare un nuovo progetto

Per iniziare, crea un app di Windows Store vuota in JavaScript.

Passaggio 2: Seleziona un file di origine e crea un file di destinazione

Usa la classe FileOpenPicker per selezionare un file di origine e la classe FileSavePicker per creare il file di destinazione. Imposta le proprietà SuggestedStartLocation e FileTypeFilter in FileOpenPicker. Imposta le proprietà SuggestedStartLocation, DefaultFileExtension, SuggestedFileName e FileTypeChoices per l'oggetto FileSavePicker. Nota che questa funzione chiama una funzione denominata TrimFile. Si tratta di una funzione definita dall'utente che esegue l'operazione di codifica intermedia. Creeremo questa funzione nel prossimo passaggio.

L'app di Windows Phone Store in JavaScript deve usare PickSingleFileAndContinue invece di 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);
        });
};

Passaggio 3: Inizializzare MediaTranscoder

Crea una nuova istanza di MediaTranscoder e imposta le proprietà TrimStartTime e TrimStopTime. In questo esempio, TrimStartTime è 1 secondo e TrimStopTime è 9 secondi.

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;

Passaggio 4: Ritagliare il file

Per ritagliare il file, chiama la funzione asincrona PrepareFileTranscodeAsync, quindi la funzione TranscodeAsync dell'oggettoPrepareTranscodeResult:

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

};

Quando ritagli un file multimediale, non è necessario specificare un profilo di codifica nel metodo PrepareFileTranscodeAsync. Se ometti il profilo, il file di destinazione avrà lo stesso formato del file di input.

Esempio completo

L'esempio di codice seguente mostra la sequenza completa di chiamate per un'operazione di ritaglio.

Prima di tutto, ecco il codice per aprire e salvare il 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);
        });
};

Quindi, ecco il codice per la codifica intermedia del 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
        }
    })

};

Infine, ecco il codice per gestire stato, errori e completamento della codifica intermedia.

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