| Главная » Файлы » Создаем пользовательский HTML5 видео плеер |
| 13.03.2015, 19:58 | |
Создание плагина 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 для создания динамически разметки видеоплеера (но не сам проигрыватель), а также удаляем атрибут Далее, нам нужно создать переменные для каждого элемента управления.
//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>, потому что к этому моменту наши собственные пользовательские элементы управления настроены и мы хотим использовать их вместо используемых в браузере по умолчанию.
$gVideo.removeAttr('controls');
Теперь, когда наш плагин готов, мы можем вызвать его для элемента video.
$('video').gVideo();
Этот код вызовет плагин для всех видео-элементов на странице. | |
| Категория: Создаем пользовательский HTML5 видео плеер | | | |
| Просмотров: 1051 | Загрузок: 0 | |
| Всего комментариев: 0 | |
