Generated with Avocode. Generated with Avocode. Generated with Avocode. Group 15 close hat Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. path40

Как создать плеер для сайта на 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
Новогодняя распродажа курсов