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

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

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

Мы рассмотрим создание приложения Магазина Windows на языке JavaScript с разнообразными компонентами для работы с мультимедиа от начала до конца. Эта задача стала даже проще, чем раньше, благодаря многочисленным усовершенствованиям в Windows 8.1, таким как новый API msRequestFullscreen. Статья охватывает следующие аспекты:

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

Если вы начинающий разработчик приложений Магазина Windows на языке JavaScript, просмотрите статью Создание первого приложения Магазина Windows на JavaScript, чтобы войти в курс дела.

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

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

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

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

 

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

	Краткое руководство: воспроизведение видео в приложении Настройка основных компонентов воспроизведения видео в приложении. В этой статье приведены подробные инструкции, но для реализации базовых функций воспроизведения аудио и видео просто добавьте элементы audio или video в HTML-код и назначьте свойству src файл мультимедиа. Для управления воспроизведением мультимедиа используйте встроенные элементы управления, добавив атрибут controls в элементы audio или video. Для включения и отключения элементов управления задайте для свойства controls значения true или false. Элементы управления воспроизведением предоставляют основные элементы пользовательского интерфейса мультимедиа, например кнопку воспроизведения и средства регулировки громкости. Вот как выглядят эти элементы управления в примере. См. в примере: Элемент video имеет имя mediaVideo и определен в HTML-коде в файле \pages\mediaPlayer\mediaPlayer.js.
	Поддерживаемые форматы звука и видео Приложения Магазина Windows на языке JavaScript поддерживают множество форматов звука и видео. Чтобы открыть полный перечень, перейдите по ссылке.
	Открытие локального файла мультимедиа с помощью элемента управления 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.
	Открытие файлов мультимедиа из сети Элемент управления FileOpenPicker подходит для получения файла в локальной системе, но не позволяет настроить в качестве источника мультимедиа файл в сети. Чтобы выполнить такую настройку, просто задайте для src путь к файлу мультимедиа в сети. См. в примере: См. функции setMediaSourceFromTextBox и setMediaSourceFromPath в файле \pages\mediaPlayer\mediaPlayer.js. См. также элемент txtSourceInput input в файле \pages\mediaPlayer\mediaPlayer.html, который используется для ввода пути к файлу мультимедиа.

 

Возможности воспроизведения мультимедиа

	Предотвращение отключения дисплея во время воспроизведения звука или видео Обычно при отсутствии активности пользователя приложения Магазина Windows в течение определенного периода экран затемняется и в итоге отключается. В большинстве приложений эта возможность удобна, так как она помогает сэкономить энергию и увеличить время работы батареи. Но во многих приложениях мультимедиа затемнение экрана нежелательно, поскольку пользователь может смотреть видео. Используйте класс System.Windows.Display.DisplayRequest, чтобы запретить системе отключать экран во время работы вашего приложения. Не забудьте отменить эту настройку, как только она станет не нужна для приложения — например, при его приостановке либо при завершении или приостановке воспроизведения мультимедиа. В противном случае энергия батареи будет расходоваться напрасно. Если включена полнооконная отрисовка нажатием соответствующей кнопки во встроенных элементах управления воспроизведением или при помощи функции msRequestFullscreen, система будет автоматически обрабатывать отключение и повторное включение затемнения экрана. Так что если вашему приложению необходимо отключать затемнение экрана лишь в режиме полного окна, вам не нужно управлять DisplayRequest самостоятельно. См. в примере: См. функцию setScreenDimming в файле \pages\mediaPlayer\mediaPlayer.js.
	Как использовать системные элементы управления транспортировкой мультимедиа В Windows 8.1 вводится новый класс для взаимодействия с системными элементами управления воспроизведением мультимедиа. Теперь следует использовать SystemMediaTransportControls вместо прежнего класса MediaControl. Системные элементы управления воспроизведением мультимедиа отличаются от элементов управления воспроизведением в HTML-объекте мультимедиа. Эти элементы управления открываются при нажатии клавиш на мультимедийном устройстве (например, кнопок регулировки громкости на наушниках или клавиш управления мультимедиа на некоторых клавиатурах). Ваше приложение может зарегистрироваться для использования этих элементов управления и даже передавать метаданные мультимедиа, например обложки альбомов или названия композиций, для отображения. Вот как могут выглядеть эти элементы управления. См. в примере: См. функции WinJS.UI.Pages.define, setupSystemMediaTransportControls и systemMediaControlsButtonPressed в файле \pages\mediaPlayer\mediaPlayer.js, а также обработчики событий mediaPlaying, mediaPaused и mediaEnded в файле \pages\mediaPlayer\mediaPlayer.js.
	Воспроизведение звука в фоновом режиме Теперь настроим поддержку воспроизведения звука в фоновом режиме, чтобы пользователи могли слушать музыку с помощью вашего приложения, одновременно работая с другим приложением. Когда приложение, воспроизводящее звук, переводится в фоновый режим, например когда пользователь переключается на другое приложение, по умолчанию воспроизведение звука прекращается. Но музыкальное приложение можно настроить таким образом, чтобы воспроизведение звука продолжалось. Для воспроизведения звука в фоновом режиме необходимо настроить соответствующую фоновую задачу в разделе "Объявления" манифеста приложения. Также необходимо включить свойства isPlayEnabled и isPauseEnabled для класса SystemMediaTransportControls и обрабатывать событие buttonpressed. Это нужно для того, чтобы пользователь мог начинать и останавливать воспроизведение звука, когда ваше приложение неактивно. См. в примере: См. элемент video в файле \pages\mediaPlayer\mediaPlayer.html, функцию setupSystemMediaTransportControls в файле \pages\mediaPlayer\mediaPlayer.html и раздел "Объявления" файла package.appmanifest.xml для включения фоновой задачи.
	Включение полнооконной отрисовки Встроенные элементы управления воспроизведением для объектов audio и video имеют кнопку для включения режима полного окна. Но если вы хотите включать и отключать полнооконную отрисовку программным путем, используйте функцию msRequestFullscreen. В ОС до Windows 8.1 приходилось самостоятельно рассчитывать границы полного окна, а также отображать и скрывать другие элементы пользовательского интерфейса. Если при этом допускалась ошибка, некоторые оптимизации отрисовки могли не применяться. Поэтому всегда используйте функцию msRequestFullscreen для включения и отключения полнооконной отрисовки. (Кроме того, этот способ проще.) См. в примере: См. функцию fullScreenMedia в файле \pages\mediaPlayer\mediaPlayer.js.
	Создание пользовательских элементов управления воспроизведением Если вам нужно расширить функциональные возможности, которые предоставляют элементы управления воспроизведением 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.
	Управление жизненным циклом и состоянием приложения Сохранять состояние приложения Магазина Windows важно потому, что приложение может быть в любой момент приостановлено, переведено в фоновый режим и остановлено системой. Пользователь обычно рассчитывает, что после возобновления работы приложения воспроизведение мультимедиа начнется с того места, на котором оно было остановлено, и все параметры приложения сохранятся. Состояние приложения можно сохранять либо в изолированном хранилище на устройстве, либо в перемещаемом хранилище. Перемещаемое хранилище удобно тем, что оно позволяет пользователю работать с вашим приложением на нескольких устройствах, причем состояние синхронизируется между всеми этими устройствами. Важно сохранять следующие состояния video: src, currentTime, loop, paused, ended, autoplay и любые выбранные audioTracks. Файл navigation.js содержит вспомогательные функции, которые входят во все шаблоны Visual Studio, кроме шаблона "Пустое приложение". Эти вспомогательные функции упрощают обработку приостановки, возобновления после приостановки и возобновления после завершения. Некоторые состояния мультимедиа следует восстанавливать после загрузки мультимедиа — например, currentTime. См. в примере: См. функции app.oncheckpoint, navigationHelper_SaveState, restoreMediaState, mediaLoaded и appResumingFromSuspend в файле \pages\mediaPlayer\mediaPlayer.js. В файле \js\default.js см. app.onactivated.
	Рекомендации по параметрам приложений Используйте элемент управления WinJS.UI.SettingsFlyout для приложений Магазина Windows на языке JavaScript. Параметры относятся к настройкам конфигурации, которые влияют на поведение приложения в целом и редко меняются. В примере воспроизведения мультимедиа от начала до конца создается всплывающий элемент "Параметры" для звука и видео, который можно использовать для хранения параметров приложения. См. в примере: См. app.onactivated в файле \js\default.js. Страницы параметров audio.html, video.html, help.html и privacy.html находятся в подпапке \settings.

 

Заключение

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

 

Хотите узнать больше?

Пользовательский интерфейс приложения Магазина Windows от начала до конца

Дополнительная информация о проектировании пользовательского интерфейса приложения Магазина Windows.

Взаимодействие с пользователем от начала до конца

Дополнительная информация о добавлении сенсорного ввода в приложения Магазина Windows.

Схема создания приложений Магазина Windows на JavaScript

Общие принципы создания приложений Магазина Windows на языке JavaScript.

Проектирование взаимодействия с пользователем в приложениях

Дополнительная информация о проектировании удобных способов взаимодействия с пользователем.

Поддерживаемые форматы звука и видео

Дополнительная информация о поддерживаемых форматах звука и видео в приложениях Магазина Windows на языке JavaScript.

Производительность аудио и видео

Дополнительная информация о факторах производительности для приложений мультимедиа.

Краткое руководство: добавление элементов управления и стилей WinJS

Дополнительная информация об элементах управления и событиях в приложениях Магазина Windows на языке JavaScript.

Примеры по теме

• Пример воспроизведения мультимедиа в HTML
• Пример приложения MediaHub
• Пример расширения мультимедиа
• Пример воспроизведения мультимедиа на устройстве
• Пример отображения состояния питания
• Пример диспетчера воспроизведения
• Пример системных элементов управления воспроизведением мультимедиа
• Пример обнаружения эффектов