Воспроизведение мультимедиа от начала до конца (HTML)

Создание примера

Если вы хотите следовать приведенным здесь инструкциям по добавлению компонентов для работы с мультимедиа в ваше приложение, вы можете начать со статьи Плоский шаблон навигации от начала до конца и связанного с ней плоского шаблона навигации. Либо вы можете создать проект приложения Магазина Windows "Пустое приложение" или "Приложение навигации" в Microsoft Visual Studio. Хотя сопроводительный пример имеет простую структуру навигации, в нем используются некоторые вспомогательные функции из файла navigation.js,, который не входит в шаблон "Пустое приложение". Поэтому, возможно, будет проще начать с одного из шаблонов навигации и удалить все ненужное.

Либо перейдите напрямую к сопроводительному примеру воспроизведения мультимедиа от начала до конца.

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

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

Краткое руководство: воспроизведение видео в приложении

Настройка основных компонентов воспроизведения видео в приложении. В этой статье приведены подробные инструкции, но для реализации базовых функций воспроизведения аудио и видео просто добавьте элементы audio или video в HTML-код и назначьте свойству src файл мультимедиа.

Для управления воспроизведением мультимедиа используйте встроенные элементы управления, добавив атрибут controls в элементы audio или video. Для включения и отключения элементов управления задайте для свойства controls значения true или false. Элементы управления воспроизведением предоставляют основные элементы пользовательского интерфейса мультимедиа, например кнопку воспроизведения и средства регулировки громкости. Вот как выглядят эти элементы управления в примере.

См. в примере: Элемент video имеет имя mediaVideo и определен в HTML-коде в файле \pages\mediaPlayer\mediaPlayer.js.

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

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

При помощи элемента управления FileOpenPicker пользователь может выбрать файл из локальной файловой системы или из Microsoft OneDrive. В этом шаге показано, как настроить FileOpenPicker и назначить свойству video.src файл, возвращаемый FileOpenPicker.

Для сохранения разрешений для файлов, открытых с помощью FileOpenPicker, используйте свойство StorageApplicationPermissions.futureAccessList. Тогда ваше приложение сможет обращаться к файлам позднее, например при восстановлении после завершения работы.

Элемент FileOpenPicker выглядит следующим образом.

При использовании FileOpenPicker не требуется, чтобы приложение объявляло возможности для таких системных папок, как "Музыка", "Видео" и "Документы", поскольку пользователь полностью управляет FileOpenPicker и открытием файлов. Из соображений безопасности и конфиденциальности ваше приложение должно объявлять минимум возможностей. Но для того, чтобы приложение могло получить доступ к папкам "Видео" и "Музыка" без участия пользователя — например, для отображения всех обложек альбомов в папке "Музыка", — вы должны объявить соответствующие возможности. Дополнительная информация: Объявления характеристик приложения.

См. в примере: См. функции setMediaSourceFromFilePicker и setMediaSourceFromFile в файле \pages\mediaPlayer\mediaPlayer.js и кнопку панели приложения browseButton в файле \pages\mediaPlayer\mediaPlayer.html.

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

Используйте класс System.Windows.Display.DisplayRequest, чтобы запретить системе отключать экран во время работы вашего приложения. Не забудьте отменить эту настройку, как только она станет не нужна для приложения — например, при его приостановке либо при завершении или приостановке воспроизведения мультимедиа. В противном случае энергия батареи будет расходоваться напрасно.

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

См. в примере: См. функцию setScreenDimming в файле \pages\mediaPlayer\mediaPlayer.js.

Воспроизведение звука в фоновом режиме

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

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

Для воспроизведения звука в фоновом режиме необходимо настроить соответствующую фоновую задачу в разделе "Объявления" манифеста приложения. Также необходимо включить свойства isPlayEnabled и isPauseEnabled для класса SystemMediaTransportControls и обрабатывать событие buttonpressed. Это нужно для того, чтобы пользователь мог начинать и останавливать воспроизведение звука, когда ваше приложение неактивно.

См. в примере: См. элемент video в файле \pages\mediaPlayer\mediaPlayer.html, функцию setupSystemMediaTransportControls в файле \pages\mediaPlayer\mediaPlayer.html и раздел "Объявления" файла package.appmanifest.xml для включения фоновой задачи.

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

Если вам нужно расширить функциональные возможности, которые предоставляют элементы управления воспроизведением audio и video, или вы хотите полностью заменить их, вам придется создать пользовательские элементы управления воспроизведением. В примере воспроизведения мультимедиа от начала до конца реализованы все пользовательские элементы управления воспроизведением для AppBar, но встроенные элементы остаются включенными. Если вы создаете пользовательские элементы управления воспроизведением, то можете просто заменить встроенные элементы интерфейса своими собственными.

Чтобы отключить встроенные элементы управления воспроизведением, установите для свойства controls значение false.

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

См. в примере: См. элементы AppBar в файле \pages\mediaPlayer\mediaPlayer.html и см. обработчики событий, реализующие компоненты, в файле \pages\mediaPlayer\mediaPlayer.js.

Добавление панелей приложения

Разместите элементы пользовательского интерфейса, взаимодействующие с приложением и объектами audio и video, на панелях приложения при помощи WinJS.UI.AppBar. Элементы управления WinJS.UI.AppBarCommand созданы специально для AppBar и отлично работают. Доступны следующие типы элементов управления: "кнопка", "переключатель", "всплывающий элемент", "разделитель" и "содержимое".

Перечисление WinJS.UI.AppBarIcon содержит множество символов, которые можно использовать для AppBarCommand.icon. Вы можете также предоставить собственный PNG-файл.

Вот как выглядит нижний объект AppBar в сопроводительном примере.

В сопроводительном примере используются всплывающие элементы для управления выбором звуковой дорожки и для регулировки громкости. Это помогает сэкономить место.

Информацию об использовании AppBar и проектировании приложения см. в статье Руководство по панелям приложения.

См. в примере: См. элементы <div id="appBarTop", и <div id="appBarBottom" в файле \pages\mediaPlayer\mediaPlayer.html, Если вас интересует реализация определенного элемента управления и компонента, см. обработчики событий для кнопок панели приложения в файле \pages\mediaPlayer\mediaPlayer.js.

Рекомендации по параметрам приложений

Используйте элемент управления WinJS.UI.SettingsFlyout для приложений Магазина Windows на языке JavaScript.

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

См. в примере: См. app.onactivated в файле \js\default.js. Страницы параметров audio.html, video.html, help.html и privacy.html находятся в подпапке \settings.

Использование комплекта сертификации приложений для Windows

Рекомендуется. Использование комплекта сертификации приложений для Windows поможет вам убедиться, что ваше приложение отвечает всем требованиям Магазина Windows. Рекомендуется использовать этот комплект при добавлении любой важной функции в приложение.