Как создать плеер для сайта на HTML5 и JavaScript
2026-02-21 07:59 Diff
https://skillbox.ru/media/code/kak_sozdat_pleer_dlya_sayta/

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

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

<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 работает, как и любой другой интерфейс: пользователь нажимает на кнопки, скрипт отлавливает эти события и вызывает необходимые функции. Прежде всего нужно создать сам интерфейс:

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