В этом модуле мы отойдем от стандартных атрибутов `controls` тега `<video>` и научимся управлять воспроизведением с помощью JavaScript. Вы создадите функционал кастомного видеоплеера, взаимодействуя с HTMLMediaElement API. Вы научитесь программно запускать и останавливать видео, управлять громкостью, отслеживать прогресс воспроизведения и работать с метаданными. Все задания выполняются с реальным видеофайлом. Обратите внимание: для корректной работы с видео, браузеры часто требуют взаимодействия пользователя со страницей (например, клик), поэтому во всех заданиях код запускается по нажатию на кнопки.
- Модуль 1: Основы выбора элементов
- Выбор элемента по ID.
- Выбор элементов по классу.
- Выбор элементов по тегу.
- Выбор по селектору CSS.
- Выбор по атрибуту.
- Поиск элементов внутри другого элемента.
- Поиск родительского элемента.
- Поиск соседних элементов (предыдущий, следующий).
- Поиск первого и последнего дочернего элемента.
- Поиск всех дочерних элементов.
- Модуль 2: Манипуляция содержимым
- Модуль 3: Работа с атрибутами
- Модуль 4: Управление классами
- Модуль 5: Управление стилями
- Модуль 6: Создание и удаление элементов
- Создание нового элемента.
- Вставка элемента перед другим элементом.
- Вставка элемента после другого элемента.
- Добавление элемента в определенную позицию внутри списка дочерних элементов.
- Удаление элемента из DOM.
- Замена одного элемента другим.
- Перемещение существующего элемента в другое место DOM..
- Очистка содержимого элемента без его удаления.
- Модуль 7: Обработка событий
- Модуль 8: Работа с формами
- Модуль 9: Продвинутые манипуляции
- Модуль 10: Работа с размерами и прокруткой
- Получение размеров элемента.
- Получение позиции элемента относительно окна браузера.
- Получение позиции элемента относительно родительского элемента.
- Управление прокруткой страницы.
- Определение, виден ли элемент в текущей области просмотра.
- Плавная прокрутка к элементу.
- Создание элемента, который фиксируется при прокрутке.
- Модуль 11: Работа с медиа-элементами
- Создание простой галереи изображений.
- Работа с Canvas.
- Создание кастомного плеера.
- Модуль 12: Практические задания
Запуск видео
Начнем с самого простого. У нас есть тег `<video>` и кнопка. Ваша задача — найти видео-элемент в DOM-дереве и заставить его воспроизводиться при нажатии на кнопку, используя соответствующий метод API медиа-элементов.
video { width: 100%; border-radius: 8px; } button { padding: 10px 20px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px; }<video id="myVideo" src="https://naytikurs.ru/img/1.mp4" poster="https://naytikurs.ru/img/1.png"></video>
<br>
<button id="playBtn">Запустить видео</button>const video = document.input__1('video');
const btn = document.querySelector('#playBtn');
btn.addEventListener('click', function() {
video.input__2();
});Пауза воспроизведения
Видео уже запущено (мы сделали это автоматически в коде). Ваша задача — дописать обработчик события для кнопки «Пауза», чтобы остановить воспроизведение видео.
video { width: 100%; border-radius: 8px; } button { padding: 10px 20px; background: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px; }<video id="myVideo" src="https://naytikurs.ru/img/1.mp4" autoplay muted loop></video>
<br>
<button id="pauseBtn">Пауза</button>const video = document.querySelector('#myVideo');
const btn = document.querySelector('#pauseBtn');
btn.addEventListener('click', () => {
video.input__1();
});Переключение Play/Pause
Обычно для запуска и паузы используется одна и та же кнопка. Реализуйте логику переключения: если видео стоит на паузе — запустите его, иначе — поставьте на паузу. Вам нужно проверить состояние видео.
video { width: 100%; } button { width: 100%; padding: 12px; background: #007bff; color: white; border: none; margin-top: 5px; cursor: pointer; }<video id="player" src="https://naytikurs.ru/img/1.mp4" poster="https://naytikurs.ru/img/2.png"></video>
<button id="toggleBtn">⏯ Play / Pause</button>const video = document.querySelector('#player');
const btn = document.querySelector('#toggleBtn');
btn.addEventListener('click', () => {
if (video.input__1) {
video.play();
} else {
video.pause();
}
});Управление громкостью
Создадим регулятор громкости. Используется `input type="range"`. При изменении ползунка, значение громкости видео должно меняться соответственно. Значение `input` варьируется от 0 до 1.
video { width: 100%; } .controls { display: flex; align-items: center; gap: 10px; padding: 10px; background: #eee; } input[type=range] { flex-grow: 1; }<video id="vid" src="https://naytikurs.ru/img/1.mp4"></video>
<div class="controls">
<span>🔊</span>
<input type="range" id="volSlider" min="0" max="1" step="0.1" value="1">
</div>const video = document.getElementById('vid');
const slider = document.getElementById('volSlider');
// Запускаем видео для теста звука
video.play();
slider.addEventListener('input', (e) => {
video.input__1 = e.target.value;
});Отключение звука (Mute)
Реализуйте кнопку, которая полностью выключает звук (Mute) или включает его обратно при повторном нажатии. Это делается через переключение логического свойства.
video { width: 100%; } button { background: #333; color: #fff; border: none; padding: 8px 16px; margin-top: 5px; cursor: pointer; }<video id="movie" src="https://naytikurs.ru/img/1.mp4" autoplay></video>
<button id="muteBtn">🔇 Mute Toggle</button>const video = document.getElementById('movie');
const btn = document.getElementById('muteBtn');
btn.addEventListener('click', () => {
video.input__1 = !video.input__1;
});Получение длительности видео
Чтобы отобразить время видео, нужно знать его полную длительность. Длительность становится доступной только после загрузки метаданных видео. Допишите код, чтобы при наступлении события загрузки данных вывести длительность видео в консоль (в нашем случае, в скрытое поле проверки).
video { width: 100%; } .info { font-family: monospace; background: #f4f4f4; padding: 5px; margin-top: 5px; }<video id="clip" src="https://naytikurs.ru/img/1.mp4" preload="metadata"></video>
<div class="info">Ждем загрузки метаданных...</div>const video = document.getElementById('clip');
const display = document.querySelector('.info');
video.addEventListener('input__1', () => {
display.textContent = 'Длительность: ' + video.input__2 + ' сек.';
});Отслеживание времени воспроизведения
Для создания таймера (например, 0:05 / 1:30) нам нужно постоянно получать текущее время воспроизведения. Используйте событие, которое часто срабатывает при проигрывании, и свойство текущего времени.
video { width: 100%; } #timer { font-size: 20px; font-weight: bold; color: #333; text-align: center; margin-top: 10px; }<video id="tv" src="https://naytikurs.ru/img/1.mp4" autoplay muted loop></video>
<div id="timer">0.00</div>const video = document.getElementById('tv');
const timer = document.getElementById('timer');
video.addEventListener('input__1', () => {
timer.textContent = video.input__2.toFixed(2);
});Кастомный прогресс-бар
Визуализируем прогресс видео. У нас есть серый блок (фон) и синий блок (прогресс). Вам нужно внутри обработчика обновления времени рассчитать процент просмотренного видео и применить его к ширине синего блока.
video { width: 100%; } .progress-bg { width: 100%; height: 10px; background: #ddd; margin-top: 5px; } .progress-fill { width: 0%; height: 100%; background: #007bff; transition: width 0.1s; }<video id="v" src="https://naytikurs.ru/img/1.mp4" autoplay muted loop></video>
<div class="progress-bg">
<div id="bar" class="progress-fill"></div>
</div>const video = document.getElementById('v');
const bar = document.getElementById('bar');
video.addEventListener('timeupdate', () => {
const percent = (video.currentTime / video.input__1) * 100;
bar.style.input__2 = percent + '%';
});Перемотка видео
Реализуйте кнопку «+5 сек», которая перематывает видео вперед. Для этого нужно изменить текущее время воспроизведения, прибавив к нему 5 секунд.
video { width: 100%; } button { background: #6610f2; color: white; border: none; padding: 10px; margin-top: 5px; border-radius: 5px; cursor: pointer; }<video id="vidSkip" src="https://naytikurs.ru/img/1.mp4" autoplay muted loop></video>
<button id="skipBtn">Вперед на 5 сек >></button>const video = document.getElementById('vidSkip');
const btn = document.getElementById('skipBtn');
btn.addEventListener('click', () => {
video.input__1 += 5;
});Окончание видео
Когда видео заканчивается, плеер обычно сбрасывает кнопку «Пауза» обратно на «Play» или показывает экран завершения. Отследите момент окончания видео и выведите сообщение «Конец фильма» в текстовый блок.
video { width: 100%; } #status { font-weight: bold; color: red; margin-top: 10px; }<video id="finalVid" src="https://naytikurs.ru/img/1.mp4" autoplay muted></video>
<div id="status">Воспроизведение...</div>
<!-- Ускорим видео для теста -->
<script>document.getElementById('finalVid').playbackRate = 8.0;</script>const video = document.getElementById('finalVid');
const status = document.getElementById('status');
video.addEventListener('input__1', () => {
status.textContent = "Конец фильма";
});