Опубликован: 10.04.2013 | Уровень: для всех | Доступ: платный
Лекция 5:

Мультимедиа

< Лекция 4 || Лекция 5: 123456 || Лекция 6 >

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

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

Таблица 5.3.
Свойства Описание
msHorizontalMirror Логическое значение, которое задает горизонтальное отражение воспроизведения. Это особенно полезно, когда источником видеоэлемента являются данные с камеры, что позволяет пользователю видеть изображение в верной ориентации. Посмотрите примечания к свойству enclosureLocation в разделе "Выбор устройства захвата мультимедиа" ниже.
msZoom Логическое значение, указывающее на то, разрешено ли видеоэлементу вписываться в пространство дисплея обрезая верхние/нижние или левые/правые части (если имеет значение true). Это позволяет приложению дать пользователю средства управления видео, соотношение сторон которого отличается от области экрана – то есть, для удаления пустого пространства по бокам видео. Демонстрацию этого можно найти в Сценарии 3 примера "Воспроизведение мультимедиа в HTML" (http://code.msdn.microsoft.com/windowsapps/Media-Playback-Sample-3bdbe7c9).
msIsLayoutOptimalForPlayback (onMSVideoOptimalLayoutChanged) Логическое значение, которое указывает имеет ли видео наилучшую производительность воспроизведения на основе его макета. Когда это свойство меняется, вызывается событие onMSVideoOptimalLayoutChanged. Для того, чтобы узнать подробности, обратитесь к материалам "Оптимизация представления видео" (http://msdn.microsoft.com/library/windows/apps/hh452785.aspx) и "Производительность аудио и видео" (http://msdn.microsoft.com/library/windows/apps/hh848311.aspx).
msIsStereo3D Логическое значение, которое показывает, является ли источник видео трехмерным (на основе метаданных видеофайла). Поддерживает ли подобную функцию система, можно определить посредством Windows.Graphics.Display.DisplayProperties.stereoEnabled (http://msdn.microsoft.com/library/windows/apps/windows.graphics.display.displayproperties.stereoenabled.aspx). Приложения так же могут прослушивать событие WinRT Windows.Graphics.Display.DisplayProperties.stereoEnabledChanged (http://msdn.microsoft.com/library/windows/apps/windows.graphics.display.displayproperties.stereoenabledchanged.aspx) для того, чтобы узнать об изменениях возможностей. Для того, чтобы узнать подробностей, касающихся других особенносте стереоскопического 3D-режима, обратитесь к материалу "Включение воспроизведения видео в стереорежиме" (http://msdn.microsoft.com/library/windows/apps/hh452749.aspx), и к Сценарию 5 примера "Воспроизведение мультимедиа в HTML"
msStereo3DRenderMode Может принимать значение mono (по умолчанию) или stereo, таким образом приложения могут управлять воспроизведением (смотрите подробности выше)
msStereo3DPackingMode Может иметь значение none (2D-режим по умолчанию), topbottom, или sidebyside; эта настройка доступна приложениям, когда метаданные видео не отражают ориентацию, которую нужно использовать (смотрите выше).
msRealtime Активирует уменьшение первоначальной задержки воспроизведения настолько, насколько это возможно. Это важно для приложений двусторонней связи, например, так же для игровых чатов, но пользоваться этим следует осмотрительно. Для того, чтобы узнать подробности, обратитесь к материалу "Активация воспроизведения с низкой задержкой" (http://msdn.microsoft.com/library/windows/apps/hh452742.aspx) и к примеру "Связь в реальном времени" (http://code.msdn.microsoft.com/Simple-Communication-Sample-eac73290).Активирует уменьшение первоначальной задержки воспроизведения настолько, насколько это возможно. Это важно для приложений двусторонней связи, например, так же для игровых чатов, но пользоваться этим следует осмотрительно. Для того, чтобы узнать подробности, обратитесь к материалу "Активация воспроизведения с низкой задержкой" (http://msdn.microsoft.com/library/windows/apps/hh452742.aspx) и к примеру "Связь в реальном времени" (http://code.msdn.microsoft.com/Simple-Communication-Sample-eac73290).
msPlayToDisabled, msPlayToPrimary, msPlayToSource Свойства, связанные с функцией Windows по воспроизведению на целевых объектах (Windows PlayTo). Смотрите раздел "Воспроизведение на целевых объектах" в конце этой лекции. Обратите внимание на то, что это доступно так же для элементов img и audio.
msAudioTracks Массив описаний аудиозаписей для поддержки дополнительных языков или других записей (то есть – комментариев). Установите msAudioTracks.selectedTrack в желаемую позицию для изменения проигрываемого аудиофайла. Для того, чтобы узнать подробности, обратитесь к материалу "Выбор звуковых дорожек на различных языках" (http://msdn.microsoft.com/library/windows/apps/hh452774.aspx) и к сценарию 2 примера "Воспроизведение мультимедиа в HTML".
msAudioCategory Идентифицирует вид аудио, проигрываемого в видеозаписи. Смотрите раздел "Управление воспроизведением и фоновое аудио" ниже для того, чтобы узнать подробности. Обратите внимание на то, что установка этого свойства в значение "Communications" так же установит тип устройства в значение "Communications" и переключит msRealtime в значение true.
msAudioDeviceType Задает выходное устройство, на которое будет отправлено аудио, смотрите "Расширения API аудиоэлемента"."
Методы Описание
msFrameStep (onMSVideoFrameStepCompleted) Перемещает видео на одинк кадр вперед или назад. Событие onMSVideoFrameStepCompleted вызывается, когда перемещение завершено.
msInsertVideoEffect msInsertAudioEffect msClearEffects Добавляет или удаляет видеоэффекты при воспроизведении (смотрите ниже). Все это доступно для видео; msInsertVideoEffect не доступно для аудиоэлементов.
msSetMediaProtectionManager Используется для DRM и с видео, и с аудио, смотрите раздел "Потоковая передача данных с сервера и DRM" ближе к концу этой лекции.
msSetVideoRectangle Задает размер внутренней прямоугольной области в видео.
onMSVideoFrameStepCompleted (event) Происходит при изменении формата видео

< Лекция 4 || Лекция 5: 123456 || Лекция 6 >
Дмитрий Мельник
Дмитрий Мельник
Беларусь
Сергей Ширяев
Сергей Ширяев
Россия, г. Москва