Создание пользовательских HTML5 аудио и видео элементов интерфейса с помощью MediaElement.js

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

В качестве примера можно привести аудио и видео элементы. Хотя аудио и видео элементы имеют стандартный вид, их можно настроить с помощью JQuery-плагина MediaElement.js.

В этой статье мы создадим код аудио и видео проигрывателя, использующего набор инструментов интерфейса, разработанный Рудольфом Мюсьи: CSS3-код, который задаст стиль элементов, и MediaElement.js, который задаст функционал.

Что ж, давайте приступим.

Ресурсы, необходимые для выполнения заданий, данной статьи:

  • Набор инструментов интерфейса Рудольфа Мюсьи;
  • jQuery-библиотека (Вы можете скачать предлагаемую мной версию или библиотеку Google);
  • MediaElement.js;
  • Время и терпение.
Содержание

Пользовательский аудио-плеер

Пользовательский аудио-плеер

СКАЧАТЬ ИСХОДНЫЕ ФАЙЛЫ ДЕМО-ВЕРСИЯ

Шаг 1 - Скачайте JQuery-библиотеку и MediaElement.js

Для того чтобы все работало, вам нужно сначала скачать jQuery-библиотеку или использовать библиотеку Google.

Затем, вы также должны скачать скрипт MediaElement.js и извлечь его там, где вам нужно.

В извлеченной папке MediaElement.js, нам понадобятся следующие файлы:

  • mediaelement-and-player.min.js;
  • flashmediaelement.swf;
  • silverlightmediaelement.xap.
Вставка, удаление и замена элементов с помощью Array.splice()

Шаг 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;
}
Создание RESTful API с помощью CodeIgniter

Теперь добавьте следующие стили для регулятора громкости. Обратите внимание, что вместо использования изображения для круглой иконки и свойства 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>
Создание динамических форм с помощью JavaScript

Шаг 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.

Не бойтесь использовать эти коды в ваших проектах. Дайте мне знать, что вы думаете об этой статье в комментариях.

РедакцияПеревод статьи «Create a Custom HTML5 Audio and Video Element UI with MediaElement.js»