Создание пользовательских HTML5 аудио и видео элементов интерфейса с помощью MediaElement.js
Существует много вещей, которые вы можете создать с помощью пользовательского кода HTML5. Новые элементы позволяют упростить вещи, а не добавлять CSS, чтобы они могли работать или отображаться, как раньше.
В качестве примера можно привести аудио и видео элементы. Хотя аудио и видео элементы имеют стандартный вид, их можно настроить с помощью JQuery-плагина MediaElement.js.
В этой статье мы создадим код аудио и видео проигрывателя, использующего набор инструментов интерфейса, разработанный Рудольфом Мюсьи: CSS3-код, который задаст стиль элементов, и MediaElement.js, который задаст функционал.
Что ж, давайте приступим.
Ресурсы, необходимые для выполнения заданий, данной статьи:
- Набор инструментов интерфейса Рудольфа Мюсьи;
- jQuery-библиотека (Вы можете скачать предлагаемую мной версию или библиотеку Google);
- MediaElement.js;
- Время и терпение.
- Пользовательский аудио-плеер
- Шаг 1 - Скачайте JQuery-библиотеку и MediaElement.js
- Шаг 2 - Добавление необходимых ссылок в раздел Head
- Шаг 3 - Разметка
- Шаг 4 - Скрипт
- Шаг 5 - CSS
- Пользовательский видеоплеер
- Шаг 1 - Скачайте библиотеку JQuery и MediaElement.js
- Шаг 2 - Добавление необходимых ссылок в заголовок страницы
- Шаг 3 - Разметка
- Шаг 4 - Скрипт
- Шаг 5 - CSS
- Заключение
Пользовательский аудио-плеер

СКАЧАТЬ ИСХОДНЫЕ ФАЙЛЫ ДЕМО-ВЕРСИЯ
Шаг 1 - Скачайте JQuery-библиотеку и MediaElement.js
Для того чтобы все работало, вам нужно сначала скачать jQuery-библиотеку или использовать библиотеку Google.
Затем, вы также должны скачать скрипт MediaElement.js и извлечь его там, где вам нужно.
В извлеченной папке MediaElement.js, нам понадобятся следующие файлы:
- mediaelement-and-player.min.js;
- flashmediaelement.swf;
- silverlightmediaelement.xap.
Шаг 2 - Добавление необходимых ссылок в раздел Head
Для начала, вам нужно добавить следующие ссылки в раздел Head. Это ссылки на файлы CSS, JQuery-библиотеку и MediaElement.js:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Creating a Custom HTML5 Audio and Video Element UI with
MediaElement.js</title>
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/audio.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/mediaelement-and-player.min.js" type="text/javascript"></script>
</head>
Шаг 3 - Разметка
Теперь создадим элемент DIV, который будет содержать аудио элемент. Мы передадим ему класс audio-player и внутри него поместим параграф для заголовка и самого аудио элемента:
<div class="audio-player">
<p>Michael Buble - Everything</p>
<audio id="audio-player" src="restheces/Michael Buble - Everything.mp3" type="audio/mp3" controls="controls"></audio>
</div>
Шаг 4 - Скрипт
Теперь, когда мы создали разметку для аудио, нам нужно добавить следующий код перед закрытием тэга.
Обратите внимание, что мы выбрали класс audio-player, который используется для обертывания аудио элементов. Ниже приводятся основные параметры, установленные для нашей демо-версии; вы можете ознакомиться с документацией mediaelement.js, где описаны другие настройки:
$(document).ready(function() {
$('#audio-player').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause','volume','progress'],
audioVolume: 'horizontal',
audioWidth: 364,
audioHeight: 70
});
});
Шаг 5 - CSS
Далее выбираем стили для пользовательского аудио-плеера. Во-первых, добавляем альтернативные стили, чтобы быть уверенными, что нам не потребуются дополнительные стили для каждого браузера:
.audio-player,.audio-player div,.audio-player p,.audio-player a,.audio-player button {
margin: 0;
padding: 0;
border: none;
outline: none;
}
Затем задаем стиль контейнера плеера и добавляем для него ширину и высоту, а также задаем стиль тега абзаца для заголовка:
.audio-player {
position: relative;
margin: 0 auto;
background: #d14242;
width: 426px;
height: 120px;
}
.audio-player p {
position: absolute;
text-align: center;
text-transform: uppercase;
left: 143px;
top: 62px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 17px;
color: #fcc;
font-weight: 700;
}
Далее задаем стиль для кнопки плэй-пауза. Это делается с помощью изображения png-спрайта и свойства background-position:
.mejs-controls .mejs-button button {
position: absolute;
display: block;
width: 73px;
height: 71px;
cursor: pointer;
background: #961717;
}
.mejs-controls .mejs-play button,.mejs-controls .mejs-pause button {
width: 115px;
height: 120px;
background: #961717 url(../img/playerbuttons.png) 0 0 no-repeat;
}
.mejs-controls .mejs-pause button {
background-position: 0 -120px;
}
Для кнопки выключения и включения звука используется изображение png-спрайта и задействуется background-position для отображения каждой части:
.mejs-controls .mejs-mute button,.mejs-controls .mejs-unmute button {
width: 24px;
height: 23px;
background: transparent url(../img/mute-unmute.png) 0 0;
top: 28px;
left: 140px;
}
.mejs-controls .mejs-unmute button {
background-position: 0 -23px;
}
Теперь добавьте следующие стили для регулятора громкости. Обратите внимание, что вместо использования изображения для круглой иконки и свойства border-radius, был использован CSS3:
.mejs-controls div.mejs-horizontal-volume-slider {
position: absolute;
top: 33px;
right: 23px;
cursor: pointer;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
width: 232px;
height: 8px;
background: #961717;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
position: absolute;
width: 0;
height: 8px;
background: #961717;
top: 1px;
left: 1px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
Приведенные ниже коды CSS устанавливают цвет фона и шкалы общего и текущего времени трека:
.mejs-controls div.mejs-time-rail {
width: 380px;
}
.mejs-controls .mejs-time-rail span {
position: absolute;
display: block;
width: 380px;
height: 12px;
top: 40px;
left: 55px;
cursor: pointer;
-webkit-border-radius: 0 0 2px 2px;
-moz-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px;
}
.mejs-controls .mejs-time-rail .mejs-time-total {
background: #e26060;
width: 311px !important;
height: 12px;
margin-top: 68px;
margin-left: 60px;
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
top: 0;
left: 0;
width: 0;
background: #961717;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
top: 0;
left: 0;
width: 0;
background: #961717;
}
После этого мы добавляем несколько стилей для шкалы тайминга и регулятора громкости (ручка):
.mejs-controls .mejs-time-rail .mejs-time-handle {
position: absolute;
display: block;
width: 10px;
height: 10px;
top: 2px;
background: #330202;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
left: 11px;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
position: absolute;
display: block;
width: 12px;
height: 12px;
-webkit-border-radius: 50%;
top: -2px;
background: #330202;
}
Наконец, добавляем стили для всплывающей подсказки шкалы тайминга. Эта надпись появляется при наведении курсора мыши на шкалу времени композиции:
.mejs-controls .mejs-time-rail .mejs-time-float {
position: absolute;
z-index: 9999;
color: fff;
width: 33px;
height: 23px;
top: -26px;
display: none;
margin-left: -17px;
}
.mejs-controls .mejs-time-rail .mejs-time-float-current {
width: 33px;
display: block;
left: 0;
top: 4px;
font-family: 'Open Sans', sans-serif;
font-size: 10px;
font-weight: 700;
color: #f89494;
text-align: center;
z-index: 9999;
background: #bf3737;
padding: 2px 2px 5px;
}
.mejs-controls .mejs-time-rail .mejs-time-float-current:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: #bf3737 transparent transparent;
top: 15px;
left: 8px;
}
Вот и все! Мы закончили с пользовательским аудио элементом. В следующей части этой статьи мы займемся пользовательским видео элементом.
Пользовательский видеоплеер

Шаг 1 - Скачайте библиотеку JQuery и MediaElement.js
Так же, как при создании пользовательского аудио элемента, вам необходимо скачать сначала jQuery-библиотеку или использовать библиотеку Google.
Затем вы также должны скачать скрипт MediaElement.js и извлечь его.
Вам снова потребуются следующие файлы из папки MediaElement.js:
- mediaelement-and-player.min.js;
- flashmediaelement.swf;
- silverlightmediaelement.xap.
Шаг 2 - Добавление необходимых ссылок в заголовок страницы
После этого вам нужно добавить следующие ссылки в заголовок страницы. Они подключают файлы CSS, JQuery-библиотеку и MediaElement.js:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Creating a Custom HTML5 Audio and Video Element UI with
MediaElement.js</title>
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/video.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/mediaelement-and-player.min.js" type="text/javascript"></script>
</head>
Шаг 3 - Разметка
Теперь создайте элемент DIV, который будет содержать видео элемент. Оборачиваем видео элемент в класс video-player:
<div class="video-player">
<video width="490" height="276" poster="img/video-poster.jpg">
<video src="resources/Pedestrian.mp4" type="video/mp4">
</video>
</div>
Шаг 4 - Скрипт
Теперь, когда у нас есть разметка, добавляем код для управления и настройки видео. Обратите внимание, что мы выбрали видео элемент, а затем использовали следующие параметры:
- alwaysShowControls - отображает или скрывает элементы управления видео с помощью значений true или false;
- videoVolume - выводит горизонтальный регулятор громкости;
- features: [‘playpause’,’progress’,’volume’,’fullscreen’] - настройки управления для видео.
Здесь мы будем использовать следующие настройки, но вы можете настроить дополнительные параметры, которые можно найти на странице документации MediaElement.js:
$(document).ready(function() {
$('video').mediaelementplayer({
alwaysShowControls: false,
videoVolume: 'horizontal',
features: ['playpause', 'progress', 'volume', 'fullscreen']
});
});
Шаг 5 - CSS
Добавление CSS мы начнем с альтернативных и основных стилей для элементов:
.mejs-inner,.mejs-inner div,.mejs-inner a,.mejs-inner span,.mejs-inner button {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* Основные стили */
.mejs-container {
position: relative;
background: #000;
}
.mejs-inner {
position: relative;
width: inherit;
height: inherit;
}
.me-plugin {
position: absolute;
}
.mejs-container-fullscreen .mejs-mediaelement,.mejs-container-fullscreen video,.mejs-embed,.mejs-embed body,.mejs-mediaelement {
width: 100%;
height: 100%;
}
.mejs-embed,.mejs-embed body {
margin: 0;
padding: 0;
overflow: hidden;
}
.mejs-container-fullscreen {
position: fixed;
overflow: hidden;
z-index: 1000;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.mejs-poster img {
display: block;
}
.mejs-background,.mejs-mediaelement,.mejs-poster,.mejs-overlay {
position: absolute;
top: 0;
left: 0;
}
.mejs-overlay-play {
cursor: pointer;
}
.mejs-inner .mejs-overlay-button {
position: absolute;
top: 50%;
left: 50%;
margin-left: -82px;
width: 158px;
height: 158px;
background: url(../img/playbutton.png) no-repeat;
}
Далее задаем стили для элементов управления. Контейнер будет иметь ширину 100% и положение absolute. Для кнопки старт-пауза мы будем использовать изображение png-спрайта, и регулировать отображение каждого элемента с помощью свойства background-position:
.mejs-container .mejs-controls {
left: 0;
bottom: 0;
background: #c94745;
position: absolute;
width: 100%;
height: 15px;
}
/* Кнопки управления */
.mejs-controls .mejs-button button {
display: block;
cursor: pointer;
margin-top: -8px;
margin-left: -6px;
width: 6px;
height: 9px;
background: transparent url(../img/play_pause.png);
}
/* Кнопка старт-пауза */
.mejs-controls div.mejs-playpause-button {
position: absolute;
top: 12px;
left: 15px;
}
.mejs-controls .mejs-play button,.mejs-controls .mejs-pause button {
width: 6px;
height: 9px;
background-position: 0 0;
}
.mejs-controls .mejs-pause button {
background-position: 0 -9px;
}
Теперь давайте зададим стиль кнопки включения и отключения звука. Опять же, мы будем использовать изображение png-спрайта, и управлять его отображением с помощью свойства background-position:
.mejs-controls div.mejs-volume-button {
position: absolute;
top: 12px;
left: 45px;
}
.mejs-controls .mejs-mute button,.mejs-controls .mejs-unmute button {
width: 11px;
height: 11px;
background: url(../img/mute_unmute.png)no-repeat;
background-position: 0 0;
margin-left: -14px;
margin-top: -9px;
}
.mejs-controls .mejs-unmute button {
background-position: 0 -12px;
}
Теперь добавим несколько стилей для кнопки управления полноэкранным режимом просмотра. Аналогично кнопкам «Старт-пауза» и «Включить-выключить звук» мы будем использовать изображение png-спрайта, и регулировать отображение кнопки с помощью свойства background-position:
.mejs-controls div.mejs-fullscreen-button {
position: absolute;
top: 7px;
right: 7px;
}
.mejs-controls .mejs-fullscreen-button button,.mejs-controls .mejs-unfullscreen button {
width: 10px;
height: 10px;
margin-top: -4px;
cursor: pointer;
background: url(../img/window_screen.png)no-repeat;
}
.mejs-controls .mejs-unfullscreen button {
background-position: 0 -12px;
}
Для большей интуитивности интерфейса мы устанавливаем абсолютное позиционирование:
.mejs-controls div.mejs-horizontal-volume-slider {
position: absolute;
cursor: pointer;
top: 6px;
left: 47px;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
width: 60px;
background: #330202;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
position: absolute;
width: 0;
top: 0;
left: 0;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
height: 4px;
}
Шкала тайминга будет иметь основные стили. Кроме того она будет поддерживать дополнительные функции с классом .mejs-time-loaded. Она будет показывать, какая часть видео файла уже загружена с помощью технологии потокового воспроизведения:
.mejs-controls div.mejs-time-rail {
position: absolute;
top: -10px;
height: 9px;
width: 100%;
left: 0;
}
.mejs-controls .mejs-time-rail span {
position: absolute;
display: block;
cursor: pointer;
width: 100%;
height: 10px;
top: 0;
left: 0;
}
.mejs-controls .mejs-time-rail .mejs-time-total {
background: #ef3a3a;
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
background: #630909;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
width: 0;
}
Для ручки шкалы проигрывания файла мы просто создаем небольшой круг, используя свойство border-radius с фоновым цветом #ef3a3a:
.mejs-controls .mejs-time-rail .mejs-time-handle {
position: absolute;
cursor: pointer;
width: 10px;
height: 10px;
top: 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #ef3a3a;
}
Далее задаем стили для всплывающей подсказки, которая показывает текущее время на шкале тайминга. Чтобы создать маленький треугольник, указывающий вниз, мы будем использовать основной CSS-код с селектором :after:
.mejs-controls .mejs-time-rail .mejs-time-float {
position: absolute;
display: none;
width: 33px;
height: 23px;
top: -26px;
margin-left: -17px;
}
.mejs-controls .mejs-time-rail .mejs-time-float-current {
width: 33px;
display: block;
left: 4px;
top: 4px;
font-family: 'Open Sans', sans-serif;
font-size: 10px;
font-youight: 700;
color: #f89494;
text-align: center;
z-index: 9999;
background: #bf3737;
padding: 2px 2px 5px;
}
.mejs-controls .mejs-time-rail .mejs-time-float-current:after {
content: " ";
position: absolute;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: #bf3737 transparent transparent;
top: 13px;
left: 8px;
}
.mejs-controls .mejs-time-rail .mejs-time-float-corner {
display: none;
}
В конце мы настраиваем цвет фона шкалы проигрывания файла и регулятора громкости:
.mejs-controls .mejs-time-rail .mejs-time-current,.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
background: #7c0f0f;
}
Заключение
Мы закончили! Надеюсь, вы почерпнули что-то новое из этой статьи и теперь сможете добавлять аудио и видео проигрыватели, чтобы создавать фантастический современный дизайн.
Это можно сделать с помощью чистого CSS3, но он по-прежнему плохо поддерживается, особенно в таких доисторических браузерах, как Internet Explorer 8 и еще более ранних версиях. Лучший способ справиться с этим - использовать скрипты JavaScript, такие как плагин MediaElement.js.
Не бойтесь использовать эти коды в ваших проектах. Дайте мне знать, что вы думаете об этой статье в комментариях.