Cómo usar los controles de transporte multimedia del sistema (HTML)

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

La clase SystemMediaTransportControls permite a tu aplicación usar los controles de transporte multimedia del sistema proporcionados por Windows y actualizar la información multimedia que se muestra.

Para ver esta característica en acción como parte de una muestra de reproducción de multimedia completa, consulta Reproducción de multimedia, de principio a fin.

Introducción

La clase SystemMediaTransportControls introducida en Windows 8.1 sustituye a la antigua clase MediaControl. Deberías usar la nueva clase SystemMediaTransportControls en lugar de MediaControl.

Los controles de transporte del sistema son distintos que los controles de transporte de los objetos audio o video. Los controles de transporte del sistema son los controles que aparecen cuando se presionan teclas multimedia de hardware, como el control de volumen en unos auriculares o los botones multimedia de los teclados. Si el usuario presiona la tecla de pausa en un teclado y tu aplicación admite SystemMediaTransportControls, tu aplicación recibe una notificación y realiza la acción apropiada.

La aplicación también puede actualizar la información multimedia, como el título de la canción y la imagen de miniatura que muestran los SystemMediaTransportControls.

Configurar controles de transporte

Para obtener una instancia de los SystemMediaTransportControls, llama a getForCurrentView.

Para habilitar botones que puede controlar la aplicación, establece la propiedad "is enabled" correspondiente en el objeto isPlayEnabled, isPauseEnabled, isNextEnabled y isPreviousEnabled, en el objeto SystemMediaTransportControls. Consulta la documentación de referencia de SystemMediaTransportControls para ver una lista completa.

Con el siguiente código se crea un objeto video con el controlador de eventos para los eventos paused, playing y ended, y se configuran los SystemMediaTransportControls. Habilita los botones de reproducción y pausa y agrega un controlador de eventos para el evento buttonpressed. Los controladores de eventos de paused, playing y ended se muestran más adelante en este ejemplo.

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

Comunicar con controles de transporte

Hay tres aspectos de comunicación cuando se usan los controles de transporte:

Los SystemMediaTransportControls notifican a la aplicación mediante el evento buttonpressed cuando se presiona uno de los botones habilitados. La aplicación puede controlar el contenido multimedia, como pausar o reproducir, en respuesta al botón que se haya presionado.

La aplicación notifica del cambio de estado de multimedia a los SystemMediaTransportControls mediante la propiedad SystemMediaTransportControls.playbackStatus. Esto permite que los controles de transporte actualicen los estados de los botones para que correspondan con el estado del origen multimedia.

Con el SystemMediaTransportControlsDisplayUpdater puedes actualizar la información multimedia mostrada por los controles de transporte, como el título de la canción o la carátula del álbum.

Controlar pulsaciones de botones

Los controles de transporte del sistema generan el evento buttonpressed cuando se presiona uno de los botones habilitados. Los argumentos de eventos de la propiedad button especifican qué botón se ha presionado.

Con este código se crean métodos auxiliares y un controlador de eventos de buttonpressed para reproducir y pausar el video.

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

Actualizar el estado multimedia

Para notificar a los SystemMediaTransportControls que ha cambiado el estado del contenido multimedia, establece el playbackStatus en el valor MediaPlaybackStatus adecuado.

Este es el código que controla los eventos multimedia y actualiza la propiedad playbackStatus de SystemMediaTransportControls.

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

Actualizar información multimedia y miniaturas

Usa la clase SystemMediaTransportControlsDisplayUpdater actualizar la información multimedia mostrada por los controles de transporte, como el título de la canción o la carátula del álbum.

La propiedad displayUpdater es el SystemMediaTransportControlsDisplayUpdater asociado con SystemMediaTransportControls.

Puedes actualizar los metadatos manualmente configurando las propiedades multimedia en musicProperties, imageProperties o videoProperties. Sin embargo, se recomienda y resulta mucho más sencillo pasar el archivo multimedia al método copyFromFileAsync que extrae automáticamente los metadatos y la imagen de miniatura del archivo.

Cuando hayas establecido toda la información multimedia que se va a mostrar, llama a update. La interfaz de usuario no se actualiza hasta que se llama a update.

Windows.Storage.StorageFile y Windows.Storage.Streams.RandomAccessStreamReference proporcionan métodos estáticos útiles cuando se trabaja con información multimedia.

StorageFile

RandomAccessStreamReference

Windows: Audio en segundo plano

Para reproducir audio en segundo plano en Windows, la aplicación debe habilitar los botones de reproducción y pausa mediante la configuración de isPlayEnabled y isPauseEnabled en true. La aplicación también debe controlar el evento buttonpressed. Para obtener información sobre todos los requisitos para reproducir audio en segundo plano en Windows, consulta Cómo reproducir audio en segundo plano.