Мультимедиа

Проигрывание видео и отложенная загрузка

Теперь поговорим подробнее о проигрывании видео. Как мы уже видели, простое включение элемента video в HTML или создание его во время выполнения программы дает вам возможность воспроизводить видео. В нижеприведенном коде источник видео является локальным файлом, видео начинает проигрываться самостоятельно, непрерывно повторяется и обеспечивает элементы управления воспроизведением:

<video src="media/ModelRocket1.mp4" controls loop autoplay></video> 

Как обычно, мы не будем повторять то, что можно найти среди спецификаций W3C по тегам video и audio. Материалы об этом можно найти по адресу http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#the-video-element. Спецификации позволяют узнать о свойствах, методах и событиях этих элементов. Обратите особое внимание на сводные данные по событиям в разделе 4.8.10.15 (http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#event-definitions), и то, что большинство свойств и методов и для того и для другого можно найти в разделе о медиа-элементах, 4.8.10 (http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#media-elements). Обратите внимание на элемент track, который поддерживается и элементом video, и элементом audio, вы можете найти образец его использования в Сценарии 4 (демонстрацию субтитров) примера "Воспроизведение мультимедиа в HTML" (http://code.msdn.microsoft.com/windowsapps/Media-Playback-Sample-3bdbe7c9), больше мы не будем на нем здесь останавливаться.

Так же полезно понимать, что video и audio тесно связаны, так как они являются частью оной и той же спецификации. На самом деле, если вы просто хотите проиграть звуковую дорожку видеоклипа, вы можете использовать объект Audio в JavaScript:

 //Проигрывание лишь звуковой дорожки видеоклипа	
var movieAudio = new Audio("http://www.kraigbrockschmidt.com/downloads/media/ModelRocket1.mp4");

movieAudio.load();	
movieAudio.play();	

Для любого видео-элемента вы можете задать ширину и высоту для управления размером области воспроизведений (вплоть до 100% для полноэкранного воспроизведения). Это важно, когда ваше приложение переключается между режимами просмотра и вы, вероятно, имеете CSS-стили видеоэлемента в различных медиа-запросах. Кроме того, если у вас есть элемент управления для полноэкранного воспроизведения, просто сделайте размеры видео такими же, как размер окна просмота (и после вызова Windows.UI.ViewManagement.ApplicationView.tryUnsnap (http://msdn.microsoft.com/library/windows/apps/windows.ui.viewmanagement.applicationview.tryunsnap.aspx), если приложение находится в прикрепленном режиме). В дополнение, когда вы создаете видеоэлемент с атрибутом controls, у него автоматически появится элемент управления для перевода в полноэкранный режим, в правом углу, который делает именно то, что нужно для приложений Магазина Windows:

Коротко говоря, вам не нужно делать чего-то особенного для того, чтобы это работало. Когда видео отображается в полноэкранном режиме, похожая кнопка (или клавиша Esc) позволяет вернуться к обычному режиму просмотра приложения.

Примечание. Если вам интересно, элементы audio и video не предоставляют каких-либо псевдо-селекторов CSS для стилизации панели инструментов. Как сказала дошкольная учительница моего сына (в отношении раздачи фруктового мороженного, но такой подход работает и здесь), "Вы получаете то, что получаете, вы не столкнетесь с истерикой и вы счастливы". Если вы хотите сделать что-то особенное с этими элементами управления, вам нужно выключить элементы по умолчанию и предоставить собственные элементы управления, которые будут соответствующим образом вызывать методы элемента.

Реализуя собственные элементы управления, убедитесь в том, что установили тайм-аут для их скрытия (либо скрывайте их, либо изменяйте их z-index), когда они не используются. Это особенно важно, если у вас есть кнопка для перевода видео в полноэкранный режим, как та, что имеется во встроенном наборе элементов, с помощью которой вы изменяете размер элемента в соответствии с разрешением экрана. Когда вы выполняете это, Windows автоматически обнаруживает, что видео выводится в полноэкранном режиме и выполняет некоторую оптимизацию производительности, но это не делается, если какие-то еще элементы находятся поверх видео. Хорошая идея – отключать любую выполняемую анимацию и отключать ненужные фоновые процессы, наподобие рабочих веб-процессов.

Вы можете использовать различные события элемента video для того, чтобы узнать, когда видео воспроизводится или приостановлено посредством элементов управления, помимо других вещей (хотя события перехода в полноэкранный режим здесь нет), но вам так же следует соответствующим образом реагировать, когда используются аппаратные кнопки для управления мультимедиа-данными. Для этих целей прослушивайте событий, исходящие из объекта Windows.Media.MediaControl (http://msdn.microsoft.com/library/windows/apps/windows.media.mediacontrol.aspx), такие, как playpressed, pausepressed и так далее. (Это события WinRT, поэтому вызовите removeEventListener, по мере необходимости). Обратитесь к примеру "Конфигурация кнопок для мультимедиа" (http://code.msdn.microsoft.com/windowsapps/Media-Buttons-ea57d8e2) для того, чтобы увидеть демонстрацию, но обычно добавление слушателей выглядит примерно так:

mediaControl = Windows.Media.MediaControl;	
mediaControl.addEventListener("soundlevelchanged", soundLevelChanged, false);
mediaControl.addEventListener("playpausetogglepressed", playpause, false);
mediaControl.addEventListener("playpressed", play, false);	
mediaControl.addEventListener("stoppressed", stop, false);	
mediaControl.addEventListener("pausepressed", pause, false);
 

Я так же упоминал, что вы можете отложить загрузку видео до того момента, как оно понадобится, и вместо него показать изображение для предварительного просмотра. Это можно реализовать с помощью атрибута poster, значением которого является изображение, которое нужно использовать:

<video id="video1" poster="media/rocket.png" width="640" height="480"></video>

var video1 = document.getElementById("video1");	
var clickListener = video1.addEventListener("click", function () {	
video1.src = "http://www.kraigbrockschmidt.com/downloads/media/ModelRocket1.mp4";

video1.load();	

// Удалим прослушиватель для предотвращения пересечения с элементами управления видео
 video1.removeEventListener("click", clickListener);

video1.addEventListener("click", function () {
video1.controls = true;	
video1.play();	
});	
});	
 

В данном случае я не использую preload="true" и не задаю src, в итоге ничего не загружается до прикосновения к видео. Когда происходит прикосновение, прослушиватель удаляется, включаются собственные элементы управления видео и начинается воспроизведение. Это, конечно, обходной метод, чаще вы будете исопользовать preload="true" controls src="..." непосредственно в видеоэлементе, в то время, как атрибут poster будет обрабатывать изображения предварительного просмотра.

Отключение скринсейверов и экрана блокировки при воспроизведении

При воспроизведении видео, особенно – полноэкранном, важно отключить любые автоматические тайм-ауты, которые могут очистить экран или заблокировать устройство. Это можно выполнить с помощью объекта Windows.System.Display.DisplayRequest (http://msdn.microsoft.com/library/windows/apps/windows.system.display.displayrequest.aspx). Прежде чем начинать воспроизведение, создайте экземпляр этого объекта и вызовите его метод requestActive.

var displayRequest = new Windows.System.Display.DisplayRequest();
displayRequest.requestActive();
 

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

Расширения API видеоэлемента

Помимо стандартов HTML5 для элементов video, в Windows 8 к нему добавлены некоторые доополнительные свойства и методы, как показано в следующей табилце и описано на странице "Видеоэлемент" (http://msdn.microsoft.com/library/windows/apps/hh465962.aspx). Кроме того, взгляните на пример "Воспроизведение мультимедиа в HTML" (http://code.msdn.microsoft.com/windowsapps/Media-Playback-Sample-3bdbe7c9), где вы можете найти примеры их использования.