Schnellstart: Transcodieren von Videodateien (HTML)

Artikel
02/16/2016

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Mit der Windows.Media.Transcoding-API können Sie Videodateien von einem Format in ein anderes transcodieren.

Beim Transcodieren handelt es sich um die Konvertierung einer digitalen Mediendatei, z. B. einer Video- oder Audiodatei, von einem Format in ein anderes. Dies geschieht in der Regel durch Decodieren und erneutes Codieren der Datei. Beispiel: Sie konvertieren eine Windows Media-Datei in MP4, um sie auf einem Gerät wiederzugeben, das das MP4-Format unterstützt. Oder Sie können eine Videodatei mit hoher Auflösung in eine niedrigere Auflösung konvertieren. In diesem Fall kann die erneut codierte Datei den gleichen Codec wie die Originaldatei verwenden, besitzt jedoch ein anderes Codierungsprofil.

In diesem Lernprogramm wird erläutert, wie eine Videodatei ins MP4-Format konvertiert wird. Es wird beschrieben, wie Sie mit der FileOpenPicker-Klasse eine Videodatei im System öffnen und dann mit der MediaTranscoder-Klasse die Videodatei ins MP4-Format transcodieren. Außerdem erfahren Sie, wie die neu codierte Datei mit der FileSavePicker-Klasse gespeichert wird.

Den vollständigen Code zu diesem Schnellstart finden Sie am Ende dieser Anleitung. Fügen Sie diesen Code der Datei Program.js hinzu.

Ein weiteres Beispiel zum Transcodieren in einer Windows-Runtime-App finden Sie im Beispiel zum Transcodieren von Medien..

Voraussetzungen

In diesem Thema wird vorausgesetzt, dass Sie eine einfache Windows-Runtime-App mit JavaScript erstellen können. Hilfe beim Erstellen Ihrer ersten App erhalten Sie unter Erstellen Ihrer ersten Windows Store-App mit JavaScript.

Anweisungen

1. Erstellen eines neuen Projekts

Erstellen Sie zunächst mit JavaScript eine leere Windows Store-App. Weitere Informationen finden Sie in Erstellen Ihrer ersten Windows Store-App mit JavaScript.

2. Auswählen einer Quelldatei und Erstellen einer Zieldatei

Wählen Sie mit der FileOpenPicker-Klasse eine Quelldatei aus, und erstellen Sie mit der FileSavePicker-Klasse eine Zieldatei. Legen Sie die Eigenschaften SuggestedStartLocation und FileTypeFilter für FileOpenPicker fest Legen Sie für das FileSavePicker-Objekt die Eigenschaften SuggestedStartLocation, DefaultFileExtension, SuggestedFileName und FileTypeChoices fest. Beachten Sie, dass mit dieser Funktion die Funktion TranscodeFile aufgerufen wird. Dabei handelt es sich um eine benutzerdefinierte Funktion, mit der der Transcodierungsvorgang ausgeführt wird. Diese Funktion wird im nächsten Schritt erstellt.

Windows Phone Store-Apps mit JavaScript müssen PickSingleFileAndContinue anstelle von PickSingleFileAsync verwenden.

function transcodeVideoFile() {
    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;

            TranscodeFile(source, destination);
        });
};

3. Erstellen eines Codierungsprofils

Das Codierungsprofil enthält die Einstellungen, die die Codierungsart der Zieldatei festlegen. Hier stehen die meisten Optionen zum Transcodieren einer Datei zur Verfügung.

Der Windows.Media.MediaProperties-Namespace stellt einen Satz vordefinierter Codierungsprofile bereit:

AAC-Audio (M4A)
MP3-Audio
Windows Media Audio (WMA)
MP4-Video (H.264-Video und AAC-Audio)
Windows Media Video (WMV)

Die ersten drei Profile in der Liste enthalten nur Audio. Die anderen zwei Profile enthalten Video und Audio.

Der folgende Code erstellt ein Profil für MP4-Video.

var profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
        Windows.Media.MediaProperties.VideoEncodingQuality.hd720p);

Die statische CreateMp4-Methode erstellt ein MP4-Codierungsprofil. Der Parameter für diese Methode gibt die Zielauflösung für das Video an. In diesem Fall bedeutet VideoEncodingQuality.hd720p 1280 x 720 Pixel mit 30 Bildern pro Sekunde. ("720p" steht für 720 progressive Scanlinien pro Frame.) Die anderen Methoden für das Erstellen vordefinierter Profile folgen diesem Muster.

Alternativ können Sie mit der Windows.Media.MediaProperties.MediaEncodingProfile.CreateFromFileAsync-Methode ein Profil erstellen, das einer vorhandenen Mediendatei entspricht. Wenn Sie die genauen gewünschten Codierungseinstellungen kennen, können Sie auch ein neues Windows.Media.MediaProperties.MediaEncodingProfile-Objekt erstellen und die Profildetails ausfüllen.

4. Transcodieren der Datei

Erstellen Sie zum Transcodieren der Datei ein neues MediaTranscoder-Objekt, und rufen Sie die MediaTranscoder.PrepareFileTranscodeAsync-Methode auf. Geben Sie die Quelldatei, die Zieldatei und das Codierungsprofil ein. Rufen Sie dann die TranscodeAsync-Funktion für das PrepareTranscodeResult-Objekt auf, das mit dem asynchronen Transcodierungsvorgang zurückgegeben wurde. Sie können auch Funktionen erstellen, mit denen Fehler, der Fortschritt und der Abschluss des asynchronen Vorgangs behandelt werden.

/// <param name="srcFile" type="IStorageFile"/>
/// <param name="destFile" type="IStorageFile"/>
function TranscodeFile(srcFile, destFile) {

    var profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
            Windows.Media.MediaProperties.VideoEncodingQuality.hd720p);

    var transcoder = new Windows.Media.Transcoding.MediaTranscoder();

    transcoder.prepareFileTranscodeAsync(srcFile, destFile, profile).then(function (result) {
        if (result.canTranscode) {
            result.transcodeAsync().then(transcodeComplete, transcoderErrorHandler, transcodeProgress);
        } else {
            // Handle error condition. result.failureReason
        }
    });
};

Die PrepareFileTranscodeAsync-Methode ist asynchron. Dadurch kann die Transcodierung im Hintergrund ausgeführt werden, während die UI reaktionsfähig bleibt.

Außerdem müssen Sie die UI aktualisieren und mögliche Fehler beheben.

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

Zusammenfassung

Im folgenden Codebeispiel wird die vollständige Sequenz der Aufrufe für den Transcodierungsvorgang angezeigt.

Zuerst ist der Code zum Öffnen und Speichern der Datei aufgeführt.

function transcodeVideoFile() {
    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;

            TranscodeFile(source, destination);
        });
};

Dann folgt der Code zum Transcodieren der Datei.

/// <param name="srcFile" type="IStorageFile"/>
/// <param name="destFile" type="IStorageFile"/>
function TranscodeFile(srcFile, destFile) {

    var profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
            Windows.Media.MediaProperties.VideoEncodingQuality.hd720p);

    var transcoder = new Windows.Media.Transcoding.MediaTranscoder();

    transcoder.prepareFileTranscodeAsync(srcFile, destFile, profile).then(function (result) {
        if (result.canTranscode) {
            result.transcodeAsync().then(transcodeComplete, transcoderErrorHandler, transcodeProgress);
        } else {
            // Handle error condition. result.failureReason
        }
    });
};

Abschließend folgt der Code zum Behandeln von Fehlern, des Fortschritts und des Abschlusses des Transcodiervorgangs.

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

Freigeben über