Reproductores multimedia

La reproducción multimedia implica la visualización y la escucha de vídeo y audio a través de experiencias de pantalla completa en línea (incrustadas en una página o con un grupo de controles diferentes) o dedicadas.

Los usuarios esperan un conjunto de controles básico, como reproducir/pausar, saltar hacia atrás, saltar hacia adelante, que puede modificar según sea necesario (incluidos los botones del reproductor multimedia, el fondo de la barra de control y la disposición o diseño de los controles).

¿Es este el control adecuado?

Usa un media player cuando quieras reproducir audio o vídeo en la aplicación. Para mostrar una colección de imágenes, use una vista giratoria.

Recommendations

El media player admite temas claros y oscuros, pero el tema oscuro proporciona una mejor experiencia para la mayoría de los escenarios de entretenimiento. El fondo oscuro proporciona un mejor contraste, en particular para condiciones de poca luz, y limita que la barra de control interfiera en la experiencia de visualización.

Al reproducir contenido de vídeo, fomenta una experiencia de visualización dedicada promoviendo el modo de pantalla completa en lugar del modo insertado. La experiencia de visualización en pantalla completa es óptima y las opciones están restringidas en el modo en línea.

Si tiene el espacio de pantalla, opte por el diseño de doble fila. Proporciona más espacio para los controles que el diseño compacto de una sola fila y puede ser más fácil navegar mediante una variedad de entradas.

Los controles predeterminados se han optimizado para la reproducción multimedia, pero tienes la capacidad de agregar opciones personalizadas que necesitas al media player para proporcionar la mejor experiencia para tu aplicación. Visite Creación de controles de transporte personalizados para obtener más información sobre cómo agregar controles personalizados.

Creación de un media player

La aplicación Galería de WinUI 3 incluye ejemplos interactivos de características y controles winUI. Obtenga la aplicación del Microsoft Store o examine el código fuente en GitHub.

Agrega elementos multimedia a tu aplicación al crear un objeto MediaPlayerElement en XAML y establece el valor de Source en una clase MediaSource que apunte a un archivo de audio o vídeo.

Este lenguaje XAML crea un objeto MediaPlayerElement y establece su propiedad Source en el URI de un archivo de vídeo que es local para la aplicación. MediaPlayerElement comienza a reproducirse cuando se carga la página. Para suprimir los medios desde el principio de inmediato, puede establecer la propiedad AutoPlay en false.

<MediaPlayerElement x:Name="mediaPlayerElement"
                    Source="ms-appx:///Videos/video1.mp4"
                    Width="400" AutoPlay="True"/>

Este XAML crea un objeto MediaPlayerElement con los controles de transporte integrados habilitados y la propiedad Reproducción automática establecida en false.

<MediaPlayerElement x:Name="mediaPlayerElement"
                    Source="ms-appx:///Videos/video1.mp4"
                    Width="400"
                    AutoPlay="False"
                    AreTransportControlsEnabled="True"/>

Controles de transporte multimedia

MediaPlayerElement tiene controles de transporte integrados para reproducir, detener, pausar, cambiar el volumen, silenciar, realizar búsquedas/comprobar el progreso, subtítulos y elegir una pista de audio. Para habilitar estos controles, establezca AreTransportControlsEnabled en true. Para deshabilitarlos, establezca AreTransportControlsEnabled en false. Los controles de transporte se representan mediante la clase MediaTransportControls. Puede usar los controles de transporte tal como están o personalizarlos de varias maneras. Para obtener más información, consulta la referencia de la clase MediaTransportControls y el artículo Crear controles de transporte personalizados.

Los controles de transporte admiten diseños de una y dos filas. El primer ejemplo aquí es un diseño de una sola fila, con el botón reproducir/pausa situado a la izquierda de la escala de tiempo multimedia. Este diseño está mejor reservado para la reproducción multimedia insertada y las pantallas compactas.

Se recomienda el diseño de controles de doble fila (a continuación) para la mayoría de los escenarios de uso, especialmente en pantallas más grandes. Este diseño proporciona más espacio para los controles y hace que la línea de tiempo sea más fácil de manejar para el usuario.

Controles de transporte de contenido multimedia del sistema

MediaPlayerElement se integra automáticamente con los controles de transporte de contenido multimedia del sistema. Los controles de transporte multimedia del sistema son los controles que se muestran cuando se presionan las teclas multimedia de hardware, como los botones multimedia en los teclados. Para obtener más información, consulta SystemMediaTransportControls.

Establecimiento del origen multimedia

Para reproducir archivos de la red o archivos insertados en la aplicación, establece la propiedad Source en MediaSource con la ruta de acceso del archivo.

En este código se intenta establecer la propiedad Source de la clase MediaPlayerElement definida en XAML en la ruta de acceso de un archivo especificado en una clase TextBox.

<TextBox x:Name="txtFilePath" Width="400"
         FontSize="20"
         KeyUp="TxtFilePath_KeyUp"
         Header="File path"
         PlaceholderText="Enter file path"/>

private void TxtFilePath_KeyUp(object sender, KeyRoutedEventArgs e)
{
    if (e.Key == Windows.System.VirtualKey.Enter)
    {
        TextBox tbPath = sender as TextBox;

        if (tbPath != null)
        {
            LoadMediaFromString(tbPath.Text);
        }
    }
}

private void LoadMediaFromString(string path)
{
    try
    {
        Uri pathUri = new Uri(path);
        mediaPlayerElement.Source = MediaSource.CreateFromUri(pathUri);
    }
    catch (Exception ex)
    {
        if (ex is FormatException)
        {
            // handle exception.
            // For example: Log error or notify user problem with file
        }
    }
}

Para establecer el origen multimedia en un archivo multimedia incrustado en la aplicación, inicialice un Uri con el prefijo de ruta de acceso con ms-appx:///, cree un MediaSource con el Uri y, a continuación, establezca el Origen en el Uri. Por ejemplo, para un archivo denominado video1.mp4 que se encuentra en una subcarpeta Vídeos , la ruta de acceso tendría el siguiente aspecto: ms-appx:///Videos/video1.mp4

Este código establece la propiedad Source del objeto MediaPlayerElement definido anteriormente en XAML a ms-appx:///Videos/video1.mp4.

private void LoadEmbeddedAppFile()
{
    try
    {
        Uri pathUri = new Uri("ms-appx:///Videos/video1.mp4");
        mediaPlayerElement.Source = MediaSource.CreateFromUri(pathUri);
    }
    catch (Exception ex)
    {
        if (ex is FormatException)
        {
            // handle exception.
            // For example: Log error or notify user problem with file
        }
    }
}

Abrir archivos multimedia locales

Para abrir archivos en el sistema local o desde OneDrive, puede usar el FileOpenPicker para obtener el archivo y Source para establecer el origen multimedia o puede acceder mediante programación a las carpetas multimedia del usuario.

Si la aplicación necesita acceso sin interacción por parte del usuario a las carpetas Music o Video, por ejemplo, si enumeras todos los archivos de música o vídeo de la colección del usuario y los muestras en la aplicación, debes declarar las capacidades Music Library y Video Library. Para obtener más información, consulta Archivos y carpetas en las bibliotecas de música, imágenes y vídeos.

El FileOpenPicker no requiere funcionalidades especiales para acceder a archivos en el sistema de archivos local, como las carpetas Música o Video, ya que el usuario tiene control completo sobre a qué archivo se accede. Desde el punto de vista de la seguridad y la privacidad, es mejor minimizar el número de funcionalidades que usa la aplicación.

Para abrir contenido multimedia local con FileOpenPicker

1. Llame a FileOpenPicker para permitir al usuario elegir un archivo multimedia.

   Usa la clase FileOpenPicker para seleccionar un archivo multimedia. Establezca FileTypeFilter para especificar qué tipos de archivo muestra el FileOpenPicker. Llame a PickSingleFileAsync para iniciar el selector de archivos y obtener el archivo.

2. Usa una clase MediaSource para establecer el archivo multimedia elegido como la propiedad MediaPlayerElement.Source.

   Para usar el StorageFile devuelto desde el FileOpenPicker, debe llamar al CreateFromStorageFile método en MediaSource y establézcalo como Source de la MediaPlayerElement. Después, llama a Play en MediaPlayerElement.MediaPlayer para iniciar el archivo multimedia.

En este ejemplo se muestra cómo usar el FileOpenPicker para elegir un archivo y establecer el archivo como Source de un MediaPlayerElement.

<MediaPlayerElement x:Name="mediaPlayerElement"/>
...
<Button Content="Choose file" Click="Button_Click"/>

private async void Button_Click(object sender, RoutedEventArgs e)
{
    await SetLocalMedia();
}

async private System.Threading.Tasks.Task SetLocalMedia()
{
    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
    WinRT.Interop.InitializeWithWindow.Initialize(openPicker, WinRT.Interop.WindowNative.GetWindowHandle(this));

    openPicker.FileTypeFilter.Add(".wmv");
    openPicker.FileTypeFilter.Add(".mp4");
    openPicker.FileTypeFilter.Add(".wma");
    openPicker.FileTypeFilter.Add(".mp3");

    var file = await openPicker.PickSingleFileAsync();

    // mediaPlayerElement is a MediaPlayerElement control defined in XAML
    if (file != null)
    {
        mediaPlayerElement.Source = MediaSource.CreateFromStorageFile(file);

        mediaPlayerElement.MediaPlayer.Play();
    }
}

Establecer el origen del póster

Puedes usar la propiedad PosterSource para proporcionar a la clase MediaPlayerElement una representación visual antes de cargar el contenido multimedia. Una PosterSource es una imagen, como una captura de pantalla, un póster de película o una carátula de álbum, que se muestra en lugar del contenido multimedia. PosterSource Se muestra en las situaciones siguientes:

• Cuando no se establece un origen válido. Por ejemplo, source no está configurado, Source se configuró a null, o el recurso es inválido (como ocurre cuando se produce un evento MediaFailed).
• Mientras se cargan los archivos multimedia. Por ejemplo, se estableció un origen válido, pero aún no se desencadenó el evento MediaOpened.
• Cuando el contenido multimedia se transmite a otro dispositivo.
• Cuando el medio es solo audio.

Esta es un MediaPlayerElement con su Source configurado en una pista de álbum y su PosterSource configurado en una imagen de la portada del álbum.

<MediaPlayerElement Source="ms-appx:///Media/Track1.mp4" PosterSource="ms-appx:///Media/AlbumCover.png"/>

Mantener la pantalla del dispositivo activa

Normalmente, un dispositivo atenua la pantalla (y finalmente la desactiva) para ahorrar duración de la batería cuando el usuario está fuera, pero las aplicaciones de vídeo deben mantener la pantalla activada para que el usuario pueda ver el vídeo. Para evitar que se desactive la pantalla cuando no se detecte ninguna acción del usuario (por ejemplo, cuando una aplicación reproduce un vídeo), puedes llamar al método DisplayRequest.RequestActive. La clase DisplayRequest le permite indicar a Windows que mantenga activada la pantalla para que el usuario pueda ver el vídeo.

Para ahorrar energía y duración de la batería, debes llamar a DisplayRequest.RequestRelease para liberar la solicitud de pantalla cuando ya no sea necesaria. Windows desactiva automáticamente las solicitudes de visualización activas de la aplicación cuando la aplicación se mueve fuera de la pantalla y las vuelve a activar cuando la aplicación vuelve al primer plano.

Estas son algunas situaciones en las que debes liberar la solicitud de pantalla:

• La reproducción de vídeo se pausa, por ejemplo, mediante la acción del usuario, el almacenamiento en búfer o el ajuste debido a un ancho de banda limitado.
• La reproducción se detiene. Por ejemplo, se terminó de reproducir el vídeo o finalizó la presentación.
• Error de reproducción. Por ejemplo, problemas de conectividad de red o un archivo dañado.

Para mantener la pantalla activa

1. Crea una variable DisplayRequest global. Inicialícelo en null.

   private DisplayRequest appDisplayRequest = null;
   

2. Llame a RequestActive para notificar a Windows que la aplicación requiere que la pantalla permanezca activada.

3. Llama a RequestRelease para liberar la solicitud de pantalla siempre que la reproducción de vídeo se detenga, ponga en pausa o se interrumpa por un error de reproducción. Cuando la aplicación ya no tiene ninguna solicitud de visualización activa, Windows ahorra duración de la batería al atenuar la pantalla (y, finalmente, desactivarla) cuando el dispositivo no se usa.

Cada propiedad MediaPlayerElement.MediaPlayer tiene una propiedad PlaybackSession de tipo MediaPlaybackSession que controla diversos aspectos de la reproducción de contenido multimedia como PlaybackRate, PlaybackState y Position. En este ejemplo se usa el evento PlaybackStateChanged en MediaPlayer.PlaybackSession para detectar situaciones en las que debes liberar la solicitud de pantalla. Por lo tanto, usa la propiedad NaturalVideoHeight para determinar si hay un archivo de audio o vídeo en reproducción y mantener la pantalla activa solo si el vídeo se está reproduciendo.

<MediaPlayerElement x:Name="mediaPlayerElement" Source="ms-appx:///Videos/video1.mp4"/>

public sealed partial class MainWindow : Window
{
    public DisplayRequest appDisplayRequest = null;
    // using Microsoft.UI.Dispatching;
    private DispatcherQueue dispatcherQueue = DispatcherQueue.GetForCurrentThread();

    public MainWindow()
    {
        this.InitializeComponent();
        mediaPlayerElement.MediaPlayer.PlaybackSession.PlaybackStateChanged += 
            PlaybackSession_PlaybackStateChanged;
    }

    private void PlaybackSession_PlaybackStateChanged(MediaPlaybackSession sender, object args)
    {
        MediaPlaybackSession playbackSession = sender as MediaPlaybackSession;
        if (playbackSession != null && playbackSession.NaturalVideoHeight != 0)
        {
            if (playbackSession.PlaybackState == MediaPlaybackState.Playing)
            {
                if (appDisplayRequest is null)
                {
                    dispatcherQueue.TryEnqueue(DispatcherQueuePriority.Normal, () =>
                    {
                        appDisplayRequest = new DisplayRequest();
                        appDisplayRequest.RequestActive();
                    });
                }
            }
            else // PlaybackState is Buffering, None, Opening, or Paused.
            {
                if (appDisplayRequest is not null)
                {
                    appDisplayRequest.RequestRelease();
                    appDisplayRequest = null;
                }
            }
        }
    }
}

Controlar el media player mediante programación

MediaPlayerElement proporciona gran cantidad de propiedades, métodos y eventos para controlar la reproducción de audio y vídeo a través de la propiedad MediaPlayerElement.MediaPlayer. Para obtener una lista completa de propiedades, métodos y eventos, consulta la página de referencia de MediaPlayer.

Escenarios avanzados de reproducción multimedia

Para escenarios de reproducción multimedia más complejos, como reproducir una lista de reproducción, cambiar entre lenguajes de audio o crear pistas de metadatos personalizadas, establezca MediaPlayerElement.Source en un objeto MediaPlaybackItem o mediaPlaybackList. Consulta la página Reproducción de contenido multimedia para obtener más información sobre cómo habilitar diversas funciones multimedia avanzadas.

Cambio de tamaño y extensión de vídeo

Usa la propiedad Stretch para cambiar la forma en que el contenido de vídeo y/o PosterSource rellenan el contenedor en el que se encuentran. Esto amplía el vídeo y cambia su tamaño según el valor de Stretch. Los Stretch estados son similares a los ajustes de tamaño de imagen en muchos televisores. Puede enlazar esto a un botón y permitir al usuario elegir qué configuración prefiere.

• Ninguno muestra la resolución nativa del contenido en su tamaño original. Esto puede dar lugar a que algunos de los vídeos se recorten o barras negras en los bordes del vídeo.
• Uniforme rellena la mayor parte del espacio posible, al tiempo que conserva la relación de aspecto y el contenido del vídeo. Esto puede dar lugar a barras negras horizontales o verticales en los bordes del vídeo. Esto es similar a los modos de pantalla ancha.
• UniformToFill rellena todo el espacio, pero conserva la relación de aspecto. Esto puede dar lugar a que se recorte parte del vídeo. Esto es similar a los modos de pantalla completa.
• Fill rellena todo el espacio, pero no conserva la relación de aspecto. Ninguna parte del video se recorta, pero puede ocurrir estiramiento. Esto es similar a los modos de ampliación.

Aquí, un AppBarButton se usa para recorrer las opciones Stretch. Una switch instrucción comprueba el estado actual de la propiedad Stretch y la establece en el siguiente valor de la Stretch enumeración. Esto permite al usuario alternar entre los diferentes estados de expansión.

<AppBarButton Icon="Trim"
              Label="Resize Video"
              Click="PictureSize_Click" />

private void PictureSize_Click(object sender, RoutedEventArgs e)
{
    switch (mediaPlayerElement.Stretch)
    {
        case Stretch.Fill:
            mediaPlayerElement.Stretch = Stretch.None;
            break;
        case Stretch.None:
            mediaPlayerElement.Stretch = Stretch.Uniform;
            break;
        case Stretch.Uniform:
            mediaPlayerElement.Stretch = Stretch.UniformToFill;
            break;
        case Stretch.UniformToFill:
            mediaPlayerElement.Stretch = Stretch.Fill;
            break;
        default:
            break;
    }
}

Habilitación de la reproducción de baja latencia

Establezca la propiedad RealTimePlayback en true en un MediaPlayerElement.MediaPlayer para permitir que el elemento del reproductor multimedia reduzca la latencia inicial de la reproducción. Esto es fundamental para las aplicaciones de comunicaciones bidireccionales y puede aplicarse a algunos escenarios de juegos. Tenga en cuenta que este modo consume más recursos y menos eficiente.

En este ejemplo se crea un objeto MediaPlayerElement y se establece RealTimePlayback en true.

MediaPlayerElement mediaPlayerElement = new MediaPlayerElement();
mediaPlayerElement.MediaPlayer.RealTimePlayback = true;

Artículos relacionados

• Conceptos básicos del diseño de comandos para aplicaciones de Windows
• Conceptos básicos de diseño de contenido para aplicaciones de Windows