Бөлісу құралы:

Проигрыватели мультимедиа

Воспроизведение мультимедиа предусматривает просмотр и прослушивание видео и аудио через встроенный (в страницу или находящийся в группе других элементов управления) или специализированный полноэкранный интерфейс.

Пользователи ожидают базовый набор элементов управления, например, воспроизведение и приостановку, пропуск назад, пропуск вперед, которые можно изменить по мере необходимости (включая кнопки медиаплеера, фон панели управления и расположение или компоновку элементов управления).

Снимок экрана: элемент проигрывателя мультимедиа с элементами управления транспортировкой, воспроизводимыми видео ледибуга

Это правильный контроль?

Используйте media player, если вы хотите воспроизвести звук или видео в приложении. Чтобы отобразить коллекцию изображений, используйте переключаемый просмотр.

Recommendations

Media player поддерживает как светлые, так и темные темы, но темная тема обеспечивает лучший интерфейс для большинства сценариев развлечений. Темный фон обеспечивает лучшую контрастность, особенно в условиях низкой освещенности, и предотвращает вмешательство панели управления в процесс просмотра.

При воспроизведении видеоконтента рекомендуется использовать выделенный интерфейс просмотра, продвигая полноэкранный режим через встроенный режим. Интерфейс полноэкранного просмотра является оптимальным, и параметры ограничены в встроенном режиме.

Если у вас есть экранное пространство, перейдите к макету двойной строки. Он предоставляет больше места для элементов управления, чем компактный макет с одной строкой и может быть проще перемещаться с помощью различных входных данных.

Элементы управления по умолчанию оптимизированы для воспроизведения мультимедиа, однако у вас есть возможность добавлять настраиваемые параметры, необходимые для media player, чтобы обеспечить оптимальный интерфейс для вашего приложения. Дополнительные сведения о добавлении настраиваемых элементов управления транспортом см. в статье "Создание пользовательских элементов управления ".

Создание media player

Откройте приложение коллекции WinUI 3 и просмотрите MediaPlayerElement в действии

Значок коллекции WinUI 3 Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из Microsoft Store или просмотрите исходный код GitHub.

Добавьте медиа в свое приложение, создав объект MediaPlayerElement в XAML и установив источник в MediaSource, который указывает на аудио- или видеофайл.

Этот XAML создает MediaPlayerElement и задает его свойство Source в URI видеофайла, локального для приложения. Воспроизведение MediaPlayerElement начинается при загрузке страницы. Чтобы отключить запуск мультимедиа сразу же, можно задать для свойства автозапуска значение .

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

Этот XAML создает MediaPlayerElement со встроенными элементами управления транспортировкой и свойством AutoPlay , заданным для false.

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

Это важно

Установка MediaPlayerElement.Source относительного URI (ms-appx/ms-resource) работает только в приложении, упакованным с помощью проекта упаковки приложений для Windows. Если приложение не использует проект упаковки приложений Windows, рекомендуется преобразовать относительный ms-appx:/// URI в полностью разрешенный file:/// URI. Дополнительные сведения см. в разделах "Настройка источника мультимедиа " и " Открытие локальных файлов мультимедиа " далее в этой статье.

Управление транспортировкой медиа

MediaPlayerElement имеет встроенные элементы управления транспортировкой, которые обрабатывают воспроизведение, остановку, приостановку, регулировку громкости, отключение звука, перемотку/просмотр прогресса, закрытые субтитры и выбор звуковой дорожки. Чтобы включить эти элементы управления, установите для параметра AreTransportControlsEnabled значение true. Чтобы отключить их, установите значение AreTransportControlsEnabledfalse. Элементы управления транспортом представлены классом MediaTransportControls . Вы можете использовать элементы управления транспортом как есть или настраивать их различными способами. Дополнительные сведения см. в справочнике по классу MediaTransportControls и создании пользовательских элементов управления транспортировкой.

Элементы управления транспортом поддерживают однорядные и двухрядные расположения. Первым примером здесь является макет одной строки с кнопкой воспроизведения и приостановки, расположенной слева от временной шкалы мультимедиа. Этот макет лучше всего зарезервирован для встроенного воспроизведения мультимедиа и компактных экранов.

Пример элементов управления MTC, одна строка

Макет элементов управления двойной строкой (ниже) рекомендуется использовать для большинства сценариев использования, особенно на более крупных экранах. Этот макет обеспечивает больше места для элементов управления и упрощает пользователю управлять временной шкалой.

Пример элементов управления MTC, двойная строка

Системные элементы управления транспортировкой мультимедиа

MediaPlayerElement автоматически интегрируется с системными элементами управления транспортировкой мультимедиа. Системные элементы управления транспортировкой мультимедиа — это элементы управления, всплывающие при нажатии клавиш мультимедиа оборудования, например кнопки мультимедиа на клавиатуре. Дополнительные сведения см. в разделе SystemMediaTransportControls.

Настройка источника мультимедиа

Чтобы воспроизвести файлы в сети или файлах, внедренных в приложение, задайте свойству Source значение MediaSource с помощью пути к файлу.

Подсказка

Чтобы открыть файлы из Интернета, необходимо объявить возможность Интернета (клиента) в манифесте приложения (Package.appxmanifest). Дополнительные сведения об объявлении возможностей см. в объявлениях возможностей приложений.

Этот код пытается задать свойство Source объекта MediaPlayerElement , определенного в XAML, на путь файла, введенного в 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
        }
    }
}

Чтобы установить источник мультимедиа в файл мультимедиа, внедренный в приложение, инициализируйте URI с путем, начинающимся с ms-appx:///, создайте MediaSource с этим URI и затем установите Source на этот URI. Например, для файла с именемvideo1.mp4 , который находится в подпапке "Видео" , путь будет выглядеть следующим образом: ms-appx:///Videos/video1.mp4

Это важно

Установка MediaPlayerElement.Source относительного URI (ms-appx/ms-resource) работает только в приложении, упакованным с помощью проекта упаковки приложений для Windows.

Этот код задает свойство Source объекта MediaPlayerElement, ранее определенного в XAML 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
        }
    }
}

Открытие локальных файлов мультимедиа

Чтобы открыть файлы в локальной системе или из OneDrive, можно использовать FileOpenPicker для получения файла и для установки источника мультимедиа или программного доступа к папкам пользовательских носителей.

Если вашему приложению требуется доступ без взаимодействия пользователя к папкам Music или Video, например, если вы перечисляете все музыкальные или видеофайлы в коллекции пользователя и отображаете их в приложении, необходимо объявить возможности Библиотеки музыки и Библиотеки видео. Дополнительные сведения см. в разделе "Файлы и папки" в библиотеках "Музыка", "Рисунки" и "Видео".

FileOpenPicker не требует специальных возможностей для доступа к файлам в локальной файловой системе, например папок музыки или видео пользователя, так как пользователь имеет полный контроль над доступом к файлу. С точки зрения безопасности и конфиденциальности лучше свести к минимуму количество возможностей, которые использует ваше приложение.

Открытие локального носителя с помощью FileOpenPicker

  1. Вызовите FileOpenPicker, чтобы пользователь выбрал файл мультимедиа.

    Используйте класс FileOpenPicker для выбора файла мультимедиа. Задайте FileTypeFilter, чтобы указать, какие типы файлов отображаются FileOpenPicker. Вызовите PickSingleFileAsync , чтобы запустить средство выбора файлов и получить файл.

  2. Используйте MediaSource , чтобы задать выбранный файл мультимедиа в качестве MediaPlayerElement.Source.

    Чтобы использовать StorageFile , возвращенный из FileOpenPicker, необходимо вызвать метод CreateFromStorageFile в MediaSource и задать его в качестве источникаMediaPlayerElement. Затем вызовите метод Play у MediaPlayerElement.MediaPlayer, чтобы начать воспроизведение медиа.

В этом примере показано, как использовать FileOpenPicker для выбора файла и задания файла в качестве источника для Source элемента 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();
    }
}

Настройка источника плаката

Свойство PosterSource можно использовать для предоставления MediaPlayerElement визуального представления перед загрузкой носителя. Это PosterSource изображение, например снимок экрана, плакат фильма или обложка альбома, которое отображается вместо носителя. В следующих ситуациях отображается PosterSource:

  • Если допустимый источник не задан. Например, источник не задан, Source был задан null, или источник недопустим (как в случае, когда происходит событие MediaFailed).
  • Пока носитель загружается. Например, задан допустимый источник, но событие MediaOpened еще не произошло.
  • При потоковой передаче мультимедиа на другое устройство.
  • Когда носитель — только аудио.

Вот MediaPlayerElement с источником, установленным на трек альбома, и PosterSource, установленным на изображение обложки альбома.

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

Сохранение активного экрана устройства

Обычно устройство уменьшает яркость дисплея (и в конечном итоге отключает его), чтобы сохранить заряд батареи, когда пользователь отлучается, но видеоприложения должны оставлять экран включенным, чтобы пользователь мог смотреть видео. Чтобы предотвратить деактивацию дисплея, если действие пользователя больше не обнаружено, например, когда приложение воспроизводит видео, можно вызвать DisplayRequest.RequestActive. Класс DisplayRequest позволяет сообщить Windows, что дисплей должен оставаться включенным, чтобы пользователь мог видеть видео.

Чтобы сохранить питание и время работы батареи, необходимо вызвать DisplayRequest.RequestRelease , чтобы освободить запрос на отображение, если он больше не требуется. Windows автоматически деактивирует активные запросы на отображение приложения при перемещении приложения с экрана и повторно активирует их при возврате приложения на передний план.

Ниже приведены некоторые ситуации, когда следует отменить запрос на отображение:

  • Воспроизведение видео приостановлено, например с помощью действия пользователя, буферизации или корректировки из-за ограниченной пропускной способности.
  • Воспроизведение останавливается. Например, видео закончилось или презентация завершилась.
  • Произошла ошибка воспроизведения. Например, проблемы с сетевым подключением или поврежденный файл.

Сохранение активности экрана

  1. Создайте глобальную переменную DisplayRequest . Инициализировать его на null.

    private DisplayRequest appDisplayRequest = null;

  2. Вызовите RequestActive чтобы уведомить Windows о том, что приложение должно оставаться на экране.

  3. Вызывайте RequestRelease, чтобы освободить запрос отображения, если воспроизведение видео остановлено, приостановлено или прервано из-за ошибки воспроизведения. Если приложение больше не имеет активных запросов на отображение, Windows экономит время работы батареи, не закрывая дисплей (и в конечном итоге отключая его), когда устройство не используется.

Каждый MediaPlayerElement.MediaPlayer имеет сессия воспроизведения типа MediaPlaybackSession, которая управляет различными аспектами воспроизведения мультимедиа, такими как скорость воспроизведения, состояние воспроизведения и позиция. Здесь вы используете событие PlaybackStateChanged на MediaPlayer.PlaybackSession для обнаружения ситуаций, когда следует освободить запрос на отображение. Затем используйте свойство NaturalVideoHeight, чтобы определить, воспроизводится ли аудио или видеофайл, и сохраняйте экран активным только в том случае, если воспроизводится видео.

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

Управление media player программным способом

MediaPlayerElement предоставляет множество свойств, методов и событий для управления воспроизведением звука и видео с помощью свойства MediaPlayerElement.MediaPlayer . Полный список свойств, методов и событий см. на странице справки MediaPlayer .

Расширенные сценарии воспроизведения мультимедиа

Для более сложных сценариев воспроизведения мультимедиа, таких как воспроизведение списка воспроизведения, переключение между языками звука или создание пользовательских треков метаданных, задайте MediaPlayerElement.Source значение MediaPlaybackItem или MediaPlaybackList. Дополнительные сведения о включении различных расширенных функций мультимедиа см. на странице воспроизведения мультимедиа .

Изменение размера и растяжение видео

Используйте свойство Stretch , чтобы изменить способ заполнения содержимого видео и (или) PosterSource в контейнере. Изменяется размер и растягивается видео в зависимости от значения Stretch. Состояния Stretch похожи на настройки размера изображения во многих телевизорах. Вы можете подключить его к кнопке и разрешить пользователю выбрать нужный параметр.

  • Нет отображает собственное разрешение контента в исходном размере. Это может привести к кадрированию частей видео или появлению чёрных полос по краям видео.
  • Единообразие заполняет максимальное количество места при сохранении пропорции и содержимого видео. Это может привести к горизонтальным или вертикальным черным полосам на краях видео. Это похоже на режимы широкоэкранного экрана.
  • UniformToFill заполняет все пространство, сохраняя пропорции. Это может привести к тому, что некоторые видео обрезаются. Это похоже на режимы полноэкранного экрана.
  • Заполнение охватывает все пространство, но не сохраняет соотношение сторон. Ни одна часть видео не обрезается, но возможно искажение. Это похоже на режимы растяжения.

Перечисление значений растяжения

Здесь AppBarButton используется для перебора параметров Stretch . Оператор switch проверяет текущее состояние свойства растяжения и устанавливает для него следующее значение в перечислении Stretch. Это позволяет пользователю перемещаться по разным состояниям растяжения.

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

Включение воспроизведения с низкой задержкой

Задайте для свойства RealTimePlayback значение true в MediaPlayerElement.MediaPlayer, чтобы разрешить элементу media player уменьшить начальную задержку воспроизведения. Это важно для двусторонних приложений связи и может найти применение в некоторых игровых сценариях. Имейте в виду, что этот режим является более ресурсоемким и менее эффективным.

В этом примере создается MediaPlayerElement и устанавливается RealTimePlayback в true.

MediaPlayerElement mediaPlayerElement = new MediaPlayerElement();
mediaPlayerElement.MediaPlayer.RealTimePlayback = true;
  • основы проектирования команд для приложений Windows
  • Основы проектирования контента для приложений Windows
  • Last updated on