Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

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

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

3 <audio controls> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> </audio>И такого - для видео:

4 <video src="video.mp4" poster="poster.jpg" controls></video>Атрибутcontrolsиспользуется для того, чтобы отобразить элементы управления. Если его не указать, никакого интерфейса не будет: аудиоплеер не будет отображаться, а в видеоплеере просто будет показан кадр из видео или постер.

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

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

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

8 <ul><li>controls - панель управления;</li>

9 <li>autoplay - автовоспроизведение;</li>

10 <li>loop - цикличность;</li>

11 <li>muted - выключение звука;</li>

12 <li>poster - обложка видео. Если не указать, будет выбран случайный кадр;</li>

13 <li>preload - предварительная загрузка. Существует 3 значения: auto (полностью), metadata (небольшую часть, чтобы определить основные метаданные) и none (без загрузки);</li>

14 <li>src - ссылка на файл.</li>

15 </ul>Также можно указать высоту и ширину.

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

17 <ul><li>default - указывает на дорожку, которая используется по умолчанию;</li>

18 <li>kind - тип файла, можно указать следующие значения:</li>

19 <li>subtitles - субтитры (стоит по умолчанию),</li>

20 <li>captions - субтитры для глухонемых,</li>

21 <li>chapters - название глав и их временные рамки,</li>

22 <li>descriptions - звуковое описание происходящего для слепых,</li>

23 <li>metadata - метаданные;</li>

24 <li>label - название дорожки;</li>

25 <li>src - путь к файлу;</li>

26 <li>srclang - язык дорожки.</li>

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

28 <ul><li>можно убрать звук, но нельзя регулировать громкость;</li>

29 <li>нельзя менять скорость воспроизведения;</li>

30 <li>нельзя поставить на повтор и так далее.</li>

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

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

33 <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>И задать ему стили:

34 .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; }Выглядит это вот так:

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

36 <ul><li>кнопка старта и паузы;</li>

37 <li>текущее время (в том числе и на прогресс-баре);</li>

38 <li>общая длительность;</li>

39 <li>кнопка отключения звука;</li>

40 <li>шкала громкости;</li>

41 <li>выбор скорости;</li>

42 <li>кнопка скачивания.</li>

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

44 //Получаем объекты //Плеер 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, чтобы запустить и остановить видео соответственно. Для кнопки указываются классы, чтобы было понятно, в каком состоянии находится ролик. Также длительность ролика записывается в специальное поле.

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

46 //Запуск, пауза actionButton.addEventListener('click',videoAct); videoPlayer.addEventListener('click',videoAct);Теперь, когда ролик можно запустить, пора настроить прогресс-бар. Для этого понадобятся 3 функции: перевод секунд в формат "ММ: СС", отображение текущего времени и перемотка.

47 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. А третья функция на основе положения мыши на полосе рассчитывает, куда нужно перемотать видео, и перематывает его.

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

49 //Отображение времени videoPlayer.addEventListener('timeupdate',videoProgress); //Перемотка progressBar.addEventListener('click',videoChangeTime);На очереди - работа со звуком и скоростью:

50 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. Меняем их значения в зависимости от выбора пользователя.

51 //Звук muteButton.addEventListener('click',videoMute); volumeScale.addEventListener('change',videoChangeVolume); //Работа со скоростью speedSelect.addEventListener('change',videoChangeSpeed);Это необходимый минимум для работы с плеером, но еще можно добавить полноэкранный режим, окно в окне, выбор субтитров и дополнительных дорожек - зная принцип взаимодействия с тегами<audio>и <video>, вы можете разобраться с этим, изучив необходимые события и функции в мануалах.

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

53 <ul><li>звук щелчка при нажатии на кнопку;</li>

54 <li>звук перелистывания во время свайпа;</li>

55 <li>звук комкания бумаги при удалении записи из базы данных и так далее.</li>

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

57 var buttonA = document.getElementsByid('button'); var clickSound = document.getElementById('click-sound'); function buttonClick() { clickSound.currTime = 0; clickSound.play(); } buttonA.addEventListener('click',buttonClick);Так можно вызывать звук в любое время - главное, чтобы он был коротким, иначе могут быть проблемы, если пользователь быстро кликает по кнопкам. И еще продолжительные звуки сбивают с толку.

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

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

60 <video src='file.gif' preload='none' id='gif-player' class='gif-player gif-player_pause' loop></video>Немного стилей:

61 .gif-player { cursor:pointer; } .gif-player_pause { opacity:0.8; }И сам скрипт:

62 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);Такую гифку можно поставить на паузу, поэтому она не загружает страницу. Также пользователь может вообще не запускать и даже не загружать ее.

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