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

Статья
03/18/2023

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

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

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

Выбор правильного элемента управления

Для воспроизведения звука и видео в приложении используется проигрыватель мультимедиа. Чтобы отобразить коллекцию изображений, используйте режим пролистывания.

UWP и WinUI 2

Важно!

Сведения и примеры в этой статье оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. Сведения и примеры для конкретной платформы см. в справочнике по API UWP.

В этом разделе содержатся сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.

API для этого элемента управления существуют в пространстве имен Windows.UI.Xaml.Controls .

API UWP:класс MediaPlayerElement, класс MediaTransportControls
Откройте приложение коллекции WinUI 2 и просмотрите MediaPlayerElement в действии. Приложения из коллекции WinUI 2 включают интерактивные примеры большинства элементов управления, возможностей и функций WinUI 2. Получите приложение из Microsoft Store или получите исходный код в GitHub.

Мы рекомендуем использовать последнюю версию WinUI 2 , чтобы получить самые актуальные стили и шаблоны для всех элементов управления. WinUI 2.2 или более поздней версии включает новый шаблон для этого элемента управления, использующий скругленные углы. Дополнительные сведения см. в разделе о радиусе угла.

Если вы разрабатываете 10-футовый интерфейс, перейдите к макету с двумя строками. Он предоставляет больше места для элементов управления, чем компактный макет с одной строкой, и проще перемещаться с помощью геймпада для 10 футов. Дополнительные сведения об оптимизации приложения для работы с 10-футовой возможностями см. в статье Проектирование для Xbox и тв .

MediaPlayerElementдоступен только в Windows 10 версии 1607 и более поздних. При разработке приложения для более ранней версии Windows 10 нужно использовать MediaElement. Все рекомендации, приведенные здесь, также применимы к MediaElement .

Создание проигрывателя мультимедиа

Важные API: класс MediaPlayerElement, класс MediaTransportControls

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

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

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

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

<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 , который находится во вложенной папке Videos , путь будет выглядеть следующим образом: 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 для получения файла и метод Source для установки источника мультимедиа. Также вы можете получить доступ к пользовательским папкам мультимедиа программным способом.

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

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

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

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

Вызовите класс FileOpenPicker, чтобы выбрать файл мультимедиа. Задайте FileTypeFilter , чтобы указать, какие типы файлов будут отображаться FileOpenPicker . Вызовите метод PickSingleFileAsync, чтобы открыть окно выбора файла и получить файл.
Используйте 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, для параметра Source которого установлена запись альбома, а для параметра PosterSource установлена титульная страница альбома.

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

Поддержание активности экрана устройства

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

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

Вот некоторые из ситуаций, при которых необходимо высвобождать запросы отображения:

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

Поддержание активности экрана

Создайте глобальную переменную DisplayRequest. Инициализируйте его в null.
```
private DisplayRequest appDisplayRequest = null;
```
Вызовите метод RequestActive, чтобы уведомить Windows о том, что приложение требует не отключать дисплей.
Вызовите метод RequestRelease, чтобы отменить запрос дисплея, если воспроизведение остановлено, приостановлено или прервано из-за ошибки воспроизведения. Если у вашего приложения больше нет активных запросов дисплея, Windows уменьшает яркость дисплея (и затем отключает его), чтобы увеличить время работы батареи, когда устройством не пользуются.

Каждый объект MediaPlayerElement.MediaPlayer имеет объект PlaybackSession типа MediaPlaybackSession, который контролирует различные аспекты воспроизведения мультимедиа, такие как PlaybackRate, PlaybackState и Position. Здесь вы используете событие 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;
                }
            }
        }
    }
}

Управление проигрывателем мультимедиа программными средствами

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

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

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

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

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

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

Различные значения свойства Stretch

В этом примере AppBarButton используется, чтобы циклически отображать параметры Stretch. Инструкция switch проверяет текущее состояние свойства Stretch и задает для него следующее значение в перечислении 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 , чтобы элемент проигрывателя мультимедиа мог уменьшить начальную задержку воспроизведения. Это имеет первостепенное значение для приложений двусторонней связи и может быть необходимо в некоторых игровых ситуациях. Помните, что этот режим требует больше ресурсов и расходует больше заряда батареи.

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

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

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

Выбор правильного элемента управления

Рекомендации

UWP и WinUI 2

Создание проигрывателя мультимедиа

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

Задание источника мультимедиа

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

Задание источника плаката

Поддержание активности экрана устройства

Управление проигрывателем мультимедиа программными средствами

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

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

Активация воспроизведения с низкой задержкой

Обратная связь

Дополнительные ресурсы

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

Выбор правильного элемента управления

Рекомендации

UWP и WinUI 2

Создание проигрывателя мультимедиа

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

Задание источника мультимедиа

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

Задание источника плаката

Поддержание активности экрана устройства

Управление проигрывателем мультимедиа программными средствами

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

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

Активация воспроизведения с низкой задержкой

Похожие статьи

Обратная связь

Дополнительные ресурсы