Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

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

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

Создание сайтов

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

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

.

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

Огромное преимущество встроенного видео HTML5 перед различными плагинами состоит в том, что вы можете полностью настроить все его составляющие. Элемент video — это интегральная часть вебстраницы, и его можно стилизовать точно так же, как любой другой, например img. Это означает, что мы можем обратиться к элементу video и любому из его компонентов через JavaScript — и даже стилизовать его посредством CSS.

Как мы уже упоминали выше, каждый браузер, поддерживающий видео HTML5, имеет собственный набор средств управления воспроизведением. Эти средства управления сильно различаются внешне, и это может идти вразрез с вашим дизайном сайта. Не проблема: с помощью JavaScript мы можем создать собственные инструменты. Их можно создать практически любым удобным вам способом, используя растровые изображения, плоский HTML и CSS, и даже с помощью API Canvas.

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

Немного разметки и стилизации

Для нашего демонстрационного сайта мы создадим очень простой набор инструментов для демонстрации мощи нового программного интерфейса видео. На рисунке 5.5 показан пользовательский интерфейс видеоролика в браузере.

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

Рис. 5.5. Простой набор средств управления воспроизведением видео

Каждая из кнопок имеет два возможных состояния: на рис. 5.6 показано, как выглядит пользовательский интерфейс, когда нажата кнопка "mute".

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

Рис. 5.6. Тот же интерфейс, ролик воспроизводится, звук выключен

В нашем интерфейсе всего три компонента:

• кнопка «старт/пауза»;

• таймер;

• кнопка «включить/выключить звук».

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

Мы создадим очень простой, но действующий набор средств управления воспроизведением видео. Главный элемент, отличающий наш инструментарий от стандартного, — шкала прогресса, позволяющая пользователю переместиться в любую точку воспроизводимого ролика. Это означает, что в нашем варианте вернуться к началу воспроизведения можно, лишь обновив страницу в браузере. За этим исключением, средства управления будут работать вполне адекватно: они позволят запускать и останавливать воспроизведение, включать и выключать звук.

Вот код HTML, с помощью которого будут представлены различные элементы управления видео:

index.ht.ml
(фрагмент)

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

Не станем углубляться в тонкости CSS, но вот краткое резюме того, что мы сделали (советуем обратиться к коду демо-страницы, если вас интересуют детата):

• текст с кнопок «старт/пауза» и «включить/выключить звук» убран при помощи свойства text-indent;

• различные состояния кнопок отображаются при помощи фоновых спрайтов (свойство CSS background);

• классы CSS используются для представления различных состояний; они добавляются и убираются при помощи JavaScript;

• элемент wrapper имеет абсолютное позиционирование и располагается так, чтобы охватывать нижнюю границу кадра видео;

• по умолчанию значение непрозрачности элементов равно 50%, но при наведении мыши оно возрастает до 100%;

• по умолчанию параметр display интерфейса управления установлен в значение попе; впоследствии мы уберем его с помощью JavaScript.

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

Программный интерфейс мультимедиа-элементов

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

Для начала произведем кэширование, присвоив каждому элементу соответствующую переменную JavaScript. Вот что у нас получится:

js/videoControls.js (фрагмент)

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

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

Первая переменная — это сам элемент video. Мы будем использовать переменную videoEl очень часто, поскольку большинство методов API должны вызываться из элемента медиа. Следующие четыре строки должны быть понятны тем, кто знаком с отображением в HTML элементов управления. Это как раз элементы, обеспечивающие взаимодействие с пользователем; ими мы и будем управлять.

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

js/videoControlsjs (фрагмент)

videoEl.removeAttribute("controls");

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

Это делается с помощью следующего кода: js/videoControls.js (фрагмент)

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

Обратите внимание на метод addEventListener. Этот метод полностью соответствует своему названию. Он ждет, когда произойдет указанное событие, и включает его обработку. Но addEventListener работает не во всех браузерах! Он не поддерживается в версиях Internet Explorer старше 9 — но там, собственно, и HTML-видео тоже не работает.

Все, что нам нужно, — так это включить Modernizr (или эквивалентный сценарий JavaScript) для определения наличия поддержки видео HTML5, а затем запустить нужную программу для совместимых браузеров, т.е. для всех тех, которые знают метод addEventListener.

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

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

Запуск и остановка видео

Как только будет зарегистрировано событие canplay through, произойдет вызов функции vidControls. removeClass . В этой функции единственная строка, которая изменяет класс интерфейса управления видео, делая его доступным.

Теперь нужно добавить немного функциональности нашим элементам управления. Давайте поместим обработчик события на кнопку «старт/стоп»:

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

Когда происходит щелчок мыши по кнопке, запускается блок if/else, использующий три дополнительные возможности нашего API. Коротко опишем их.

Атрибут paused используется, когда видео не воспроизводится. Это не обязательно означает, что видео остановлено пользователем; это может быть состояние перед началом воспроизведения ролика. Значение атрибута равно true, когда видео не работает.

Поскольку мы знаем, что пользователь щелкнул мышью но кнопке «старт/пауза» и что видео в данный момент не воспроизводится, мы можем безопасно вызвать метод play () для элемента video. Он запустит воспроизведение видео с той точки, в которой оно было остановлено.

Наконец, если значение атрибута paused не равно true, в дело вступает очередная порция кода, он активирует метод pause () и остановит воспроизведение.

Вы, вероятно, обратили внимание, что у нас нет кнопки «стоп» (обычно представляемой иконкой с квадратиком). Добавьте ее, если считаете это нужным, но во многих видеоплеерах этот элемент вовсе отсутствует, поскольку полоса прогресса прекрасно подходит, когда нужно отмотать ролик к началу. Кстати, в API нет никакого метода «стоп»; имитировать его можно, применив метод pause (), и переведя счетчик кадров к началу (подробнее об этом ниже).

Вы, возможно, заметили, что в нашей конструкции if /else чего-то не хватает. На скриншотах средства управления воспроизведением имеют два состояния. Сценарий JavaScript должен изменять фоновое изображение кнопки в зависимости от режима «пауза» или «воспроизведение»:

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

В приведенном коде мы еще дважды встречаем метод addEven-tListener (вам нужно его освоить, если вы собираетесь использовать видео и аудио API!). Первый блок ожидает события play. Так что если обработчик, который мы написали, активирует метод play () (или же процесс воспроизведения видео включается как-то иначе, например программно), слушателем (listener) будет обнаружено событие play и произведен вызов соответствующей функции.

То же самое происходит и во втором блоке, с той разницей, что слушатель ожидает возникновения события pause (не путайте с атрибутом paused).

Если элемент video находится в состоянии воспроизведения, первый блок добавит класс playing к кнопке «старт/пауза». Этот класс изменит положение фонового изображения так, что на кнопке появится надпись «пауза». Аналогично второй блок кода уберет класс playing, и изображение сместится так, что станет видна надпись «старт».

Возможно, вы недоумеваете: «А почему бы просто не добавлять или убирать класс playing в коде обработчика щелчка мышью по кнопке?» Посмотрите на рис. 5.7.

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

Рис. 5.7. Элементы управления воспроизведением видео, доступные из контекстного меню

Наверху — контекстное меню элемента video. Как видите, управлять воспроизведением видео можно, не только щелкая мышью по кнопкам.

Чтобы определить, в каком положении должны отображаться кнопки, нас не должно интересовать, щелкал ли мышью пользователь; вместо этого мы должны отслеживать события play и pause (то же самое верно и в случае, когда мы работаем не с видео, а со звуком).


.

Читайте так же:
Not found