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

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

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

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

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

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

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

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

Создание пользовательских HTML5 аудио и видео элементов интерфейса при помощи MediaElement.js СКАЧАТЬ ИСХОДНЫЕ ФАЙЛЫ ДЕМО-ВЕРСИЯ

Шаг 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;}

Вот и все! Мы закончили с пользовательским аудио элементом. В следующей части данной статьи мы займемся пользовательским видео элементом.

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *