megasoft-portal

Создаем пользовательский HTML5 видео плеер при помощи CSS3 и jQuery

Элемент HTML5 <video> уже поддерживается большинством современных браузеров, и даже IE поддерживает начиная с версии 9. Есть много преимуществ в том, что видео проигрывается в самом браузере без использования плееров сторонних производителей поэтому многие разработчики пытаются начать использовать эту возможность как можно скорее.

Элементы управления видео

Как профессиональные веб-дизайнеры, мы хотим создать видеоплеер, который будет выглядеть одинаково во всех браузерах. Однако, каждый браузер предоставляет свой собственный, по разному выглядящий, видео плеер, от минималистичного в Firefox и Chrome, до более навороченного в Opera и Safari (см. рисунок 1). Если мы хотим, чтобы наши элементы управления выглядели одинаково во всех браузерах, а также соответствовали нашему дизайну, мы должны создать наши собственные элементы управления с нуля. Это не так сложно, как кажется.

Основная разметка элементов управления

Во-первых, нам нужно создать собственно саму разметку для элементов управления. Нам нужна кнопка Play/Pause, панель поиска, таймер и регулятор громкости. Мы вставим разметку для элементов управления после элемента <video>, и обернем их в блок с классом ghinda-video-controls.

Создание плагина jQuery для плеера

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

Внешний вид

А теперь самое интересное, внешний вид видео плеера. Как только плагин будет готов, настройка элементов управления очень проста при помощи CSS.

Как вы уже заметили, мы еще не добавили стили для элементов управления и для этого мы будем использовать CSS3.

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

Как вы могли заметить, при создании плагина jQuery, мы определили набор опций по умолчанию. Эти опции theme и childtheme, они могут быть изменены при вызове плагина, что позволяет нам с легкостью применять пользовательские темы.

Заключение

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