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

10.12.2011 00:00

Содержание
Создаем пользовательский HTML5 видео плеер при помощи CSS3 и jQuery
Страница 2
Все страницы

Страницы с 1 по 2

Элемент HTML5 <video> уже поддерживается большинством современных браузеров, и даже IE поддерживает начиная с версии 9. Есть много преимуществ в том, что видео проигрывается в самом браузере без использования плееров сторонних производителей (см. статью Введение в HTML5 video Брюса Лоусона), поэтому многие разработчики пытаются начать использовать эту возможность как можно скорее. Но есть несколько препятствий к этому, в первую очередь, это проблемы с поддержкой кодеков в каждом браузере, тут разногласия между Opera / Firefox и IE / Safari. Но это не может быть серьезной проблемой в течение длительного времени, Google не так давно выпустил кодек VP8, и Opera, Firefox, Chrome и IE9 уже имеют поддержку этого формата, да и Flash также может проигрывать VP8. Это означает, что в скором времени мы сможем создать единую версию видео, которое будет проигрываться при помощи тега <video> в большинстве браузеров и Flash Player.

Другим серьезным препятствием для использования является создание пользовательского HTML5 <video> плеера - это то, где flash на данный момент единственное решение и в настоящее время имеет преимущество, с мощным IDE, Flash обеспечивает простой интерфейс для создания пользовательского компонента видеоплеера. Если мы хотим создать собственный плеер для элемента HTML5 <video>, то мы должны писать все это на HTML5, CSS3, JavaScript и т.д.

И это то, о чем будет статья. Мы рассмотрим как создать легкий пользовательский HTML5 <video> плеер, включая создание для этого простого плагина jQuery, выбор элементов управления и настройка внешнего вида при помощи CSS.

В этой статье мы рассмотрим:

Элементы управления видео
Основы разметки элементов управления
Создание плагина JQuery
Внешний вид плеера
Создание тем для плеера

Мы будем использовать jQuery для упрощения манипуляций DOM, и jQuery UI для создания ползунков управления, которые мы будем использовать для перемотки видео и изменения уровня громкости.

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

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

native video controls

Рисунок 1. Встроенные элементы управления видео в различных браузерах

Все медиа-элементы в HTML5 имеют поддержку API медиа-элементов , к которому мы можем получить доступ при помощи JavaScript и использовать для создания таких функций, как воспроизведение, пауза и т.д. Элементы управления мы можем создать с помощью HTML, CSS, SVG.

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

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

<div class="ghinda-video-controls">

 <a class="ghinda-video-play" title="Play/Pause"></a>

 <div class="ghinda-video-seek"></div>

 <div class="ghinda-video-timer">00:00</div>

 <div class="ghinda-volume-box">

 <div class="ghinda-volume-slider"></div>

 <a class="ghinda-volume-button" title="Mute/Unmute"></a>

 </div>

</div>

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

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

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

Примечание автора: Я надеюсь, что вы знакомы с основами JQuery и JavaScript, поэтому я лишь вкратце объясню сценарий. Если вам нужна дополнительная информация по этим вопросам, см. Craig Buckler How to develop a jQuery plugin, и раздел JavaScript section of the Opera web standards curriculum.

$.fn.gVideo = function(options) {

 // build main options before element iteration

 var defaults = {

 theme: 'simpledark',

 childtheme: ''

 };

 var options = $.extend(defaults, options);

 // iterate and reformat each matched element

 return this.each(function() {

 var $gVideo = $(this);

 //create html structure

 //main wrapper

 var $video_wrap = $('<div></div>').addClass('ghinda-video-player').addClass(options.theme).addClass(options.childtheme);

 //controls wraper

 var $video_controls = $('<div class="ghinda-video-controls"><a class="ghinda-video-play" title="Play/Pause"></a><div class="ghinda-video-seek"></div><div class="ghinda-video-timer">00:00</div><div class="ghinda-volume-box"><div class="ghinda-volume-slider"></div><a class="ghinda-volume-button" title="Mute/Unmute"></a></div></div>');                        

 $gVideo.wrap($video_wrap);

 $gVideo.after($video_controls);

Здесь мы используем jQuery для создания динамически разметки видеоплеера (но не сам проигрыватель), а также удаляем атрибут controls как только скрипт загружается. Это для того, что в случае, если пользователь отключил JavaScript, эти элементы управления будут бесполезны, и он/она не сможет воспользоваться нативными элементами управления браузера для элемента видео. Плеер будет использовать наши пользовательские элементы управления только после того, как скрипт успешно загрузился.

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

//get newly created elements

var $video_container = $gVideo.parent('.ghinda-video-player');

var $video_controls = $('.ghinda-video-controls', $video_container);

var $ghinda_play_btn = $('.ghinda-video-play', $video_container);

var $ghinda_video_seek = $('.ghinda-video-seek', $video_container);

var $ghinda_video_timer = $('.ghinda-video-timer', $video_container);

var $ghinda_volume = $('.ghinda-volume-slider', $video_container);

var $ghinda_volume_btn = $('.ghinda-volume-button', $video_container);

$video_controls.hide(); // keep the controls hidden

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

Теперь для управления Play/Pause:

var gPlay = function() {

 if($gVideo.attr('paused') == false) {

 $gVideo[0].pause();                    

 } else {                    

 $gVideo[0].play();                

 }

};

$ghinda_play_btn.click(gPlay);

$gVideo.click(gPlay);

$gVideo.bind('play', function() {

 $ghinda_play_btn.addClass('ghinda-paused-button');

});

$gVideo.bind('pause', function() {

 $ghinda_play_btn.removeClass('ghinda-paused-button');

});

$gVideo.bind('ended', function() {

 $ghinda_play_btn.removeClass('ghinda-paused-button');

});

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

Для создания ползунка поиска мы будем использовать jQuery UI Slider component.

var createSeek = function() {

 if($gVideo.attr('readyState')) {

 var video_duration = $gVideo.attr('duration');

 $ghinda_video_seek.slider({

 value: 0,

 step: 0.01,

 orientation: "horizontal",

 range: "min",

 max: video_duration,

 animate: true,                    

 slide: function(){                            

 seeksliding = true;

 },

 stop:function(e,ui){

 seeksliding = false;                        

 $gVideo.attr("currentTime",ui.value);

 }

 });

 $video_controls.show();                    

 } else {

 setTimeout(createSeek, 150);

 }

};

createSeek();

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

Далее мы создадим таймер.

var gTimeFormat=function(seconds){

 var m=Math.floor(seconds/60)<10?"0"+Math.floor(seconds/60):Math.floor(seconds/60);

 var s=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60));

 return m+":"+s;

};

var seekUpdate = function() {

 var currenttime = $gVideo.attr('currentTime');

 if(!seeksliding) $ghinda_video_seek.slider('value', currenttime);

 $ghinda_video_timer.text(gTimeFormat(currenttime));                            

};

$gVideo.bind('timeupdate', seekUpdate);

Здесь мы используем функцию seekUpdate, чтобы получить атрибут CurrentTime видео и функцию gTimeFormat для форматирования полученного текущего значения.

Для регулировки громкости, мы будем также использовать jQuery UI slider и пользовательскую функцию для кнопки регулировки громкости видео.

$ghinda_volume.slider({

 value: 1,

 orientation: "vertical",

 range: "min",

 max: 1,

 step: 0.05,

 animate: true,

 slide:function(e,ui){

 $gVideo.attr('muted',false);

 video_volume = ui.value;

 $gVideo.attr('volume',ui.value);

 }

});

var muteVolume = function() {

 if($gVideo.attr('muted')==true) {

 $gVideo.attr('muted', false);

 $ghinda_volume.slider('value', video_volume);

 $ghinda_volume_btn.removeClass('ghinda-volume-mute');                    

 } else {

 $gVideo.attr('muted', true);

 $ghinda_volume.slider('value', '0');

 $ghinda_volume_btn.addClass('ghinda-volume-mute');

 };

};

$ghinda_volume_btn.click(muteVolume);

Наконец, мы собираемся удалить атрибут controls из <video>, потому что к этому моменту наши собственные пользовательские элементы управления настроены и мы хотим использовать их вместо используемых в браузере по умолчанию.