| Главная » Файлы » Создаем пользовательский HTML5 видео плеер |
| 13.03.2015, 20:01 | |
Внешний видА теперь самое интересное, внешний вид видео плеера. Как только плагин будет готов, настройка элементов управления очень проста при помощи CSS. Как вы уже заметили, мы еще не добавили стили для элементов управления и для этого мы будем использовать CSS3. Во-первых, мы добавим несколько стилей для основного контейнера видеоплеера.
.ghinda-video-player {
float: left; padding: 10px; border: 5px solid #61625d; -moz-border-radius: 5px; /* FF1+ */ -ms-border-radius: 5px; /* IE future proofing */ -webkit-border-radius: 5px; /* Saf3+, Chrome */ border-radius: 5px; /* Opera 10.5, IE 9 */ background: #000000; background-image: -moz-linear-gradient(top, #313131, #000000); /* FF3.6 */ background-image: -o-linear-gradient(top, #313131, #000000); /* Opera 10.60 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #313131),color-stop(1, #000000)); /* Saf4+, Chrome */ box-shadow: inset 0 15px 35px #535353; }
Мы указали float:left, чтобы не допустить его растягивания на всю ширину плеера, и чтобы ширина его была равна фактической ширине элемента видео. Далее мы выстроим все элементы управления влево. Мы будем использовать opacity и transitions для Play/Pause и кнопки регулировки звука, чтобы создать симпатичный эффект при наведении курсора.
.ghinda-video-play {
display: block; width: 22px; height: 22px; margin-right: 15px; background: url(../images/play-icon.png) no-repeat; opacity: 0.7; -moz-transition: all 0.2s ease-in-out; /* Firefox */ -ms-transition: all 0.2s ease-in-out; /* IE future proofing */ -o-transition: all 0.2s ease-in-out; /* Opera */ -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */ transition: all 0.2s ease-in-out; } .ghinda-paused-button { background: url(../images/pause-icon.png) no-repeat; } .ghinda-video-play:hover { opacity: 1; }
Я уверен, что вы внимательно прочитали первую часть статьи о JavaScript, и помните, что мы добавляли и удаляли классы для кнопки Play/Pause в зависимости от состояния видео (воспроизведение или пауза). Вот почему класс ghida-paused-button переопределяет свойство background класса ghinda-video-play. Теперь бегунки. Как мы говорили раньше, мы используем jQuery UI slider для перемотки видео и регулировки уровня громкости. Этот компонент имеет свои собственные стили, определенные в jQuery UI stylesheet, но мы будем полностью переопределять их, для того, чтобы он соответствовал дизайну плеера.
.ghinda-video-seek .ui-slider-handle {
width: 15px; height: 15px; border: 1px solid #333; top: -4px; -moz-border-radius:10px; -ms-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; border-radius:10px; background: #e6e6e6; background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5)); box-shadow: inset 0 -3px 3px #d5d5d5; } .ghinda-video-seek .ui-slider-handle.ui-state-hover { background: #fff; } .ghinda-video-seek .ui-slider-range { -moz-border-radius:15px; -ms-border-radius:15px; -webkit-border-radius:15px; -o-border-radius:10px; border-radius:15px; background: #4cbae8; background-image: -moz-linear-gradient(top, #4cbae8, #39a2ce); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4cbae8),color-stop(1, #39a2ce)); box-shadow: inset 0 -3px 3px #39a2ce; }
В настоящее время регулятор громкости виден всё время. Мы изменим это, сделаем его скрытым по-умолчанию, и проявляется он будет только тогда, когда мы наведем мышь на кнопку регулировки звука, чтобы он выглядел немного более динамичным и аккуратным.
.ghinda-volume-box {
height: 30px; -moz-transition: all 0.1s ease-in-out; /* Firefox */ -ms-transition: all 0.1s ease-in-out; /* IE future proofing */ -o-transition: all 0.2s ease-in-out; /* Opera */ -webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */ transition: all 0.1s ease-in-out; } .ghinda-volume-box:hover { height: 135px; padding-top: 5px; } .ghinda-volume-slider { visibility: hidden; opacity: 0; -moz-transition: all 0.1s ease-in-out; /* Firefox */ -ms-transition: all 0.1s ease-in-out; /* IE future proofing */ -o-transition: all 0.1s ease-in-out; /* Opera */ -webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */ transition: all 0.1s ease-in-out; } .ghinda-volume-box:hover .ghinda-volume-slider { position: relative; visibility: visible; opacity: 1; }
Когда курсор мыши наводится на кнопку регулировки громкости, её высота увеличивается при помощи transitions. С базовыми знаниями CSS и некоторыми новыми свойствами CSS3, мы уже создали удобный интерфейс для нашего плеера, внешний вид его можно увидеть на рисунке 2:
Рисунок 2: Наш готовый видеоплеер. | |
| Категория: Создаем пользовательский HTML5 видео плеер | | | |
| Просмотров: 1216 | Загрузок: 0 | |
| Всего комментариев: 0 | |
