Как создать плеер для сайта на HTML5 и JavaScript

Контент на сайте можно разнообразить с помощью видео или аудио. Учим использовать HTML5 video- и audio-плееры и работать с ними на JS.

Уже прошли те времена, когда для воспроизведения аудио или видео на сайте нужно было подключать сторонний плеер на Flash — в Adobe решили больше не поддерживать эту технологию, а значит, мы можем вздохнуть с облегчением, потому что HTML5 позволяет создавать плееры с помощью тегов <audio> и <video>.

Как использовать audio и video в HTML5

Чтобы создать плеер, достаточно такого кода для аудио:

<audio controls>

<source src="music.mp3" type="audio/mpeg">

<source src="music.ogg" type="audio/ogg">

</audio>

И такого — для видео:

<video src="video.mp4" poster="poster.jpg" controls></video>

Атрибут controls используется для того, чтобы отобразить элементы управления. Если его не указать, никакого интерфейса не будет: аудиоплеер не будет отображаться, а в видеоплеере просто будет показан кадр из видео или постер.

Обратите внимание, как указан источник. Для видео достаточно прописать атрибут src, а для аудио нужно прописывать дополнительные элементы source, чтобы указать пути и формат файлов. В коде выше добавлено два одинаковых файла, но в разных расширениях — это нужно для того, чтобы прослушать запись можно было на всех устройствах и во всех браузерах, потому что не все из них поддерживают mp3 или какой-то другой формат.

Также внутри плеера можно прописать какой-нибудь текст — его увидят те, у кого не поддерживается HTML5. Правилом хорошего тона считается указание ссылки на скачивание современного браузера.

Вот список атрибутов, которые можно указать для плеера:

  • controls — панель управления;
  • autoplay — автовоспроизведение;
  • loop — цикличность;
  • muted — выключение звука;
  • poster — обложка видео. Если не указать, будет выбран случайный кадр;
  • preload — предварительная загрузка. Существует 3 значения: auto (полностью), metadata (небольшую часть, чтобы определить основные метаданные) и none (без загрузки);
  • src — ссылка на файл.

Также можно указать высоту и ширину.

Существует элемент <track>, который размещается внутри плеера, — в нем указывается путь к текстовым файлам: субтитрам или метаданным. Для них прописываются следующие атрибуты:

  • default — указывает на дорожку, которая используется по умолчанию;
  • kind — тип файла, можно указать следующие значения:
  • subtitles — субтитры (стоит по умолчанию),
  • captions — субтитры для глухонемых,
  • chapters — название глав и их временные рамки,
  • descriptions — звуковое описание происходящего для слепых,
  • metadata — метаданные;
  • label — название дорожки;
  • src — путь к файлу;
  • srclang — язык дорожки.

Всего этого достаточно, чтобы вставить простой плеер на сайт, но некоторых функций у него все-таки нет:

  • можно убрать звук, но нельзя регулировать громкость;
  • нельзя менять скорость воспроизведения;
  • нельзя поставить на повтор и так далее.

Поэтому мы подключаем JS и пишем свой интерфейс.

Как написать плеер на JS

Плеер на JS работает, как и любой другой интерфейс: пользователь нажимает на кнопки, скрипт отлавливает эти события и вызывает необходимые функции. Прежде всего нужно создать сам интерфейс:

<div class='video-container'>

<video src="video.mp4" poster='preview.jpg' class='video-player' id='video-player' preload='metadata'></video>

<div class='video-hud'>

<div class='video-hud__element video-hud__action video-hud__action_play' id='video-hud__action'></div>

<div class='video-hud__element video-hud__curr-time' id='video-hud__curr-time'>00:00</div>

<progress value='0' max='100' class='video-hud__element video-hud__progress-bar' id='video-hud__progress-bar'></progress>

<div class='video-hud__element video-hud__duration' id='video-hud__duration'>00:00</div>

<div class='video-hud__element video-hud__mute video-hud__mute_false' id='video-hud__mute'></div>

<input type='range' value='100' max='100' title='Громкость' class='video-hud__element video-hud__volume' id='video-hud__volume'>

<select title='Скорость' class='video-hud__element video-hud__speed' id='video-hud__speed'>

<option value='25'>x0.25</option>

<option value='50'>x0.50</option>

<option value='75'>x0.75</option>

<option value='100' selected>x1.00</option>

<option value='125'>x1.25</option>

<option value='150'>x1.50</option>

<option value='175'>x1.75</option>

<option value='200'>x2.00</option>

</select>

<a class='video-hud__element video-hud__download' title='Скачать' href='video.mp4' download></a>

</div>

</div>

И задать ему стили:

.video-container {

background:#000;

width:80%;

color:#fff;

}

.video-player {

width:100%;

margin:0;

}

.video-hud {

margin:0;

padding:1px;

}

.video-hud__element {

cursor:pointer;

display:inline-block;

vertical-align:middle;

height:30px;

}

.video-hud__action {

width:30px;

}

.video-hud__action_play {

background:#ccc;

border-radius:0 100px 100px 0;

}

.video-hud__action_pause {

background:#c00;

}

.video-hud__mute {

width:30px;

border-radius:100px 100px 100px 100px;

}

.video-hud__mute_true {

background:#c00;

}

.video-hud__mute_false {

background:#ccc;

}

.video-hud__download {

background:#ccc;

width:30px;

border-radius:0 0 100px 100px;

}

Выглядит это вот так:

Нас пока не интересует красивое оформление, но в этом варианте есть всё необходимое:

  • кнопка старта и паузы;
  • текущее время (в том числе и на прогресс-баре);
  • общая длительность;
  • кнопка отключения звука;
  • шкала громкости;
  • выбор скорости;
  • кнопка скачивания.

Теперь нужно написать функции, которые будут отдавать команды плееру. Начнем с получения объектов, запуска и паузы:

//Получаем объекты

//Плеер

var videoPlayer = document.getElementById('video-player');

//Время

var progressBar = document.getElementById('video-hud__progress-bar');

var currTime = document.getElementById('video-hud__curr-time');

var durationTime = document.getElementById('video-hud__duration');

//Кнопки

var actionButton = document.getElementById('video-hud__action');

var muteButton = document.getElementById('video-hud__mute');

var volumeScale = document.getElementById('video-hud__volume');

var speedSelect = document.getElementById('video-hud__speed');

function videoAct() { //Запускаем или ставим на паузу

if(videoPlayer.paused) {

videoPlayer.play();

actionButton.setAttribute('class','video-hud__element video-hud__action video-hud__action_play');

} else {

videoPlayer.pause();

actionButton.setAttribute('class','video-hud__element video-hud__action video-hud__action_pause');

}

if(durationTime.innerHTML == '00:00') {

durationTime.innerHTML = videoTime(videoPlayer.duration); //Об этой функции чуть ниже

}

}

Сначала идет проверка, стоит ли видео на паузе — информация об этом содержится в переменной paused объекта videoPlayer (плеер). Затем используются функции play и pause, чтобы запустить и остановить видео соответственно. Для кнопки указываются классы, чтобы было понятно, в каком состоянии находится ролик. Также длительность ролика записывается в специальное поле.

Чтобы функция работала, нужно перехватывать события нажатий на кнопку и на сам ролик:

//Запуск, пауза

actionButton.addEventListener('click',videoAct);

videoPlayer.addEventListener('click',videoAct);

Теперь, когда ролик можно запустить, пора настроить прогресс-бар. Для этого понадобятся 3 функции: перевод секунд в формат «ММ:СС», отображение текущего времени и перемотка.

function videoTime(time) { //Рассчитываем время в секундах и минутах

time = Math.floor(time);

var minutes = Math.floor(time / 60);

var seconds = Math.floor(time - minutes * 60);

var minutesVal = minutes;

var secondsVal = seconds;

if(minutes < 10) {

minutesVal = '0' + minutes;

}

if(seconds < 10) {

secondsVal = '0' + seconds;

}

return minutesVal + ':' + secondsVal;

}

function videoProgress() { //Отображаем время воспроизведения

progress = (Math.floor(videoPlayer.currentTime) / (Math.floor(videoPlayer.duration) / 100));

progressBar.value = progress;

currTime.innerHTML = videoTime(videoPlayer.currentTime);

}

function videoChangeTime(e) { //Перематываем

var mouseX = Math.floor(e.pageX - progressBar.offsetLeft);

var progress = mouseX / (progressBar.offsetWidth / 100);

videoPlayer.currentTime = videoPlayer.duration * (progress / 100);

}

Первая функция получает секунды и возвращает их в формате «ММ:СС». Вторая функция высчитывает текущее время в процентах от общей длительности и двигает полосу прогресса, а также показывает прогресс в виде минут и секунд. При необходимости можно изменить функцию, чтобы она показывала оставшееся время, — для этого нужно отнять текущий момент от длительности и преобразовать с помощью videoTime. А третья функция на основе положения мыши на полосе рассчитывает, куда нужно перемотать видео, и перематывает его.

Перехватываем события:

//Отображение времени

videoPlayer.addEventListener('timeupdate',videoProgress);

//Перемотка

progressBar.addEventListener('click',videoChangeTime);

На очереди — работа со звуком и скоростью:

function videoChangeVolume() { //Меняем громкость

var volume = volumeScale.value / 100;

videoPlayer.volume = volume;

if(videoPlayer.volume == 0) {

muteButton.setAttribute('class','video-hud__element video-hud__mute video-hud__mute_true');

} else {

muteButton.setAttribute('class','video-hud__element video-hud__mute video-hud__mute_false');

}

}

function videoMute() { //Убираем звук

if(videoPlayer.volume == 0) {

videoPlayer.volume = volumeScale.value / 100;

muteButton.setAttribute('class','video-hud__element video-hud__mute video-hud__mute_false');

} else {

videoPlayer.volume = 0;

muteButton.setAttribute('class','video-hud__element video-hud__mute video-hud__mute_true');

}

}

function videoChangeSpeed() { //Меняем скорость

var speed = speedSelect.value / 100;

videoPlayer.playbackRate = speed;

}

Звук хранится в переменной volume, а скорость — в playbackRate. Меняем их значения в зависимости от выбора пользователя.

//Звук

muteButton.addEventListener('click',videoMute);

volumeScale.addEventListener('change',videoChangeVolume);

//Работа со скоростью

speedSelect.addEventListener('change',videoChangeSpeed);

Это необходимый минимум для работы с плеером, но еще можно добавить полноэкранный режим, окно в окне, выбор субтитров и дополнительных дорожек — зная принцип взаимодействия с тегами <audio> и <video>, вы можете разобраться с этим, изучив необходимые события и функции в мануалах.

Использование плеера в интерфейсах

Кроме воспроизведения видео, плеер можно использовать и для добавления звуковых эффектов в интерфейсы:

  • звук щелчка при нажатии на кнопку;
  • звук перелистывания во время свайпа;
  • звук комкания бумаги при удалении записи из базы данных и так далее.

Для этого нужно создать элемент <audio> без атрибута controls, задать ему id и запускать воспроизведение при каком-нибудь событии.

var buttonA = document.getElementsByid('button');

var clickSound = document.getElementById('click-sound');

function buttonClick() {

clickSound.currTime = 0;

clickSound.play();

}

buttonA.addEventListener('click',buttonClick);

Так можно вызывать звук в любое время — главное, чтобы он был коротким, иначе могут быть проблемы, если пользователь быстро кликает по кнопкам. И еще продолжительные звуки сбивают с толку.

Кроме того, не рекомендуется добавлять такие фичи на сайт, если в этом нет особой необходимости. Потому что в некоторых случаях это может отвлекать пользователей, а в других — сильно замедлять загрузку страницы.

Также можно сделать удобный плеер для гифок:

<video src='file.gif' preload='none' id='gif-player' class='gif-player gif-player_pause' loop></video>

Немного стилей:

.gif-player {

cursor:pointer;

}

.gif-player_pause {

opacity:0.8;

}

И сам скрипт:

var gifPlayer = document.getElementById('gif-player');

function gifAct() {

if(gifPlayer.paused) {

gifPlayer.play();

gifPlayer.setAttribute('class','gif-player gif-player_play');

} else {

gifPlayer.pause();

gifPlayer.currentTime = 0;

gifPlayer.setAttribute('class','gif-player gif-player_pause');

}

}

gifPlayer.addEventListener('click',gifAct);

Такую гифку можно поставить на паузу, поэтому она не загружает страницу. Также пользователь может вообще не запускать и даже не загружать ее.

Заключение

Встроенный плеер на HTML5 — это лучшее решение, которое доступно современному веб-разработчику. Больше не нужно мучиться с Flash и другими подключаемыми плеерами, потому что есть более удобный вариант, который еще и хорошо оптимизирован и не требует скачивания сторонних приложений.

Профессиональный программист должен уметь писать именно такие приложения и сайты — удобные, эффективные и нетребовательные. Особенно в веб, где у любого пользователя может быть слабый компьютер или ужасное соединение с интернетом. Поэтому, если вы начинающий frontend-разработчик, запишитесь на курс, в котором всё объясняется от А до Я и который научит на практике находить лучшие решения своих задач.

Курс «Профессия frontend-разработчик»
С нуля до разработчика с зарплатой от 60 000 рублей за 6 месяцев. Научитесь верстать сайты и создавать интерфейсы, соберите два проекта в портфолио и получите современную профессию.
  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы
Хочешь получать крутые статьи по программированию?
Подпишись на рассылку Skillbox
Посмотреть