So wird’s gemacht: Verwenden der Systemsteuerelemente für den Medientransport (HTML)

[ 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 ]

Die SystemMediaTransportControls-Klasse ermöglicht es Ihrer App, die von Windows bereitgestellten Systemsteuerelemente für den Medientransport zu nutzen und die angezeigten Medieninfos zu aktualisieren.

Unter Medienwiedergabe von A bis Z können Sie dieses Feature als Teil eines kompletten Medienwiedergabebeispiels in Aktion sehen.

Einführung

Die in Windows 8.1 eingeführte SystemMediaTransportControls-Klasse ersetzt die alte MediaControl-Klasse. Verwenden Sie die neue SystemMediaTransportControls-Klasse anstelle von MediaControl.

Die Systemsteuerelemente für den Medientransport unterscheiden sich von den Transportsteuerelementen der Objekte audio und video. Die Systemsteuerelemente für den Medientransport sind die Steuerelemente, die angezeigt werden, wenn Hardwaretasten für Medien betätigt werden (z. B. der Lautstärkeregler an Kopfhörern oder die Medientasten auf Tastaturen). Wenn der Benutzer die PAUSE-Taste auf einer Tastatur drückt und Ihre App die SystemMediaTransportControls unterstützt, wird die App benachrichtigt und kann die entsprechende Aktion durchführen.

Ihre App kann auch die Medieninfos aktualisieren, die von den SystemMediaTransportControls angezeigt werden (z. B. Songtitel und Miniaturansicht).

Einrichten von Transportsteuerelementen

Rufen Sie SystemMediaTransportControls auf, um eine Instanz der getForCurrentView abzurufen.

Um die von Ihrer App behandelten Schaltflächen zu aktivieren, legen Sie die entsprechende IsEnabled-Eigenschaft des SystemMediaTransportControls-Objekts fest, z. B. isPlayEnabled, isPauseEnabled, isNextEnabled und isPreviousEnabled. Eine vollständige Liste finden Sie in der Referenzdokumentation zu SystemMediaTransportControls.

Unten ist Code angegeben, mit dem ein video-Objekt mit Ereignishandler für die Ereignisse paused, playing und ended erstellt und das SystemMediaTransportControls-Element eingerichtet wird. Er aktiviert die Schaltflächen für Wiedergabe und Pause und fügt einen Ereignishandler für das buttonpressed-Ereignis hinzu. Die Ereignishandler für paused, playing und ended zeigen wir weiter unten in diesem Beispiel.

<video id="mediaVideo" 
       controls 
       src="https://www.contoso.com/clip.mp4"
       onpause="mediaPaused(event)"
       onplaying="mediaPlaying(event)"
       onended="mediaEnded(event)" />
var systemMediaControls;

systemMediaControls = Windows.Media.SystemMediaTransportControls.getForCurrentView();

systemMediaControls.addEventListener("buttonpressed", systemMediaControlsButtonPressed, false);

systemMediaControls.isPlayEnabled = true;
systemMediaControls.isPauseEnabled = true;
systemMediaControls.isStopEnabled = true;

systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.closed;

Kommunikation mit Transportsteuerelementen

Bei der Verwendung der Transportsteuerelemente gibt es drei Kommunikationsaspekte:

Die SystemMediaTransportControls benachrichtigen Ihre App über das buttonpressed-Ereignis, wenn eine der aktivierten Schaltflächen betätigt wird. Anschließend kann Ihre App das Medium entsprechend der betätigten Schaltfläche steuern (z. B. anhalten oder wiedergeben).

Ihre App benachrichtigt die SystemMediaTransportControls über die SystemMediaTransportControls.playbackStatus-Eigenschaft, wenn sich der Status des Mediums ändert. Dadurch können die Transportsteuerelemente den Schaltflächenzustand entsprechend dem Status der Medienquelle aktualisieren.

Sie können die von den Transportsteuerelementen angezeigten Medieninfos (z. B. den Songtitel oder das Albumbild) mit dem SystemMediaTransportControlsDisplayUpdater aktualisieren.

Behandeln von Schaltflächenbetätigungen

Das buttonpressed-Ereignis wird von den Systemsteuerelementen für den Medientransport ausgelöst, wenn eine der aktivierten Schaltflächen betätigt wird. Mit den Ereignisargumenten der button-Eigenschaft wird angegeben, welche Schaltfläche betätigt wurde.

Der folgende Code erstellt einen buttonpressed-Ereignishandler und Hilfsmethoden zum Wiedergeben und Anhalten des video-Objekts.

// Event handler for SystemMediaTransportControls' buttonpressed event
function systemMediaControlsButtonPressed(eventIn) {

    var mediaButton = Windows.Media.SystemMediaTransportControlsButton;

    switch (eventIn.button) {
        case mediaButton.play:
            playMedia();
            break;

        case mediaButton.pause:
            pauseMedia();
            break;

        case mediaButton.stop:
            stopMedia();
            break;

        // Insert additional case statements for other buttons you want to handle
    }
}

// Plays the media.
function playMedia() {
    var media = document.getElementById("mediaVideo");
    media.play();
}

// Pauses the media.
function pauseMedia() {
    var media = document.getElementById("mediaVideo");
    media.pause();
}

// Stops the media.
function stopMedia() {
    var media = document.getElementById("mediaVideo");
    media.pause();
    media.currentTime = 0;
}

Aktualisieren des Medienstatus

Um die SystemMediaTransportControls darüber zu benachrichtigen, dass sich der Status des Mediums geändert hat, legen Sie den playbackStatus auf den entsprechenden MediaPlaybackStatus-Wert fest.

Der folgende Code behandelt die Medienereignisse und -aktualisierungen der playbackStatus-Eigenschaft des SystemMediaTransportControls-Objekts.

// The media Play event handler.
function mediaPlaying() {
    // Update the SystemMediaTransportControl state.
    systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.playing;
}

// The media Pause event handler.
function mediaPaused() {
    // Update the SystemMediaTransportControl state.
    systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.paused;
}

// The media Ended event handler.
function mediaEnded() {
    // Update the SystemMediaTransportControl state.
    systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.stopped;
}

Aktualisieren der Medieninfos und der Miniaturansicht

Verwenden Sie die SystemMediaTransportControlsDisplayUpdater-Klasse, um die von den Transportsteuerelementen angezeigten Medieninfos (z. B. den Songtitel oder das Albumbild) zu aktualisieren.

Die displayUpdater-Eigenschaft ist der SystemMediaTransportControlsDisplayUpdater, der dem SystemMediaTransportControls-Objekt zugeordnet ist.

Sie können die Metadaten manuell aktualisieren, indem Sie die Medieneigenschaften für musicProperties, imageProperties oder videoProperties festlegen. Es wird jedoch empfohlen und ist sehr viel einfacher, die Mediendatei an die copyFromFileAsync-Methode zu übergeben. Diese Methode extrahiert die Metadaten und das Miniaturbild automatisch aus der Datei.

Nachdem Sie alle anzuzeigenden Medieninfos festgelegt haben, rufen Sie update auf. Die UI wird erst nach dem Aufruf von update aktualisiert.

Windows.Storage.StorageFile und Windows.Storage.Streams.RandomAccessStreamReference stellen nützliche statische Methoden für die Arbeit mit Medieninfos bereit.

StorageFile

RandomAccessStreamReference

Windows: Audio im Hintergrund

Wenn Sie unter Windows Audio im Hintergrund wiedergeben möchten, muss die App die Schaltflächen für Wiedergabe und Pause aktivieren, indem sie isPlayEnabled und isPauseEnabled auf true festlegt. Außerdem muss die App das buttonpressed-Ereignis behandeln. Informationen zu sämtlichen Anforderungen für die Wiedergabe von Audio im Hintergrund unter Windows finden Sie unter So wird's gemacht: Wiedergeben von Audio im Hintergrund.