Обработка окончания воспроизведения видео в HTML5

Быстрый ответ

Для отслеживания окончания проигрывания HTML5 видео в элементе <video> необходимо следить за событием ended. Регистрируйте обработчик события для выполнения нужных действий после завершения воспроизведения.

Код для примера:

document.querySelector('video').addEventListener('ended', () => {
    // Возможно, стоит включить следующий контент?
    alert('Видео завершилось. Может, начнём заново?');
});

Управление воспроизведением видео с применением дополнительных возможностей

Базовое решение подойдёт для упрощённых задач, но что если требуется использовать расширенные возможности управления воспроизведением видео? Это может включать возможность повторного воспроизведения, реакцию на паузы, включенные пользователем, и выполнение дополнительных операций после окончания просмотра.

Управление событиями завершения воспроизведения видео

Работая с событиями окончания видео, можно настроить разнообразные действия:

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

Подробнее об этом расскажет наш спикер на видео

Циклическое воспроизведение и действия пользователя

Циклическое воспроизведение и настраиваемые элементы управления требуют внимательного учёта действий пользователя, которые могут нарушить стандартное воспроизведение. Не забывайте об учёте различий в работе браузеров и применяйте вариативные подходы для обеспечения стабильности.

Применение атрибута onended:

<video id="myVideo" onended="onVideoEnd()">
  <source src="movie.mp4" type="video/mp4">
</video>
<script>
function onVideoEnd() {
  // И вот всё только начинается.
}
</script>

Для настраиваемых элементов управления корректно отследить окончание видео можно, сравнивая currentTime с duration, особенно если событие 'ended' не функционирует должным образом.

Использование jQuery

Если вы пользуетесь jQuery, привязка событий производится без труда.

Привязка событий в jQuery:

$('video').on('ended', function() {
    // Твоя награда уже на подходе!
    console.log("Молодец, дошёл до конца. Заслуженный лайк!");
});

Управление особыми случаями

Аномальные ситуации требуют специального подхода. Имейте вот это под рукой:

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

Таким образом, события элемента видео помогают улучшить пользовательский опыт.

Визуализация

Воспринимайте HTML5 видео как театральное представление 🎭:

Сцена = видеоплеер
Актёры = контент видео
Аплодисменты = событие 'ended'

Когда спектакль подходит к концу:

video.addEventListener('ended', () => {
  applause(); // 👏 Видео завершило своё перформанс!
});

Мы организуем аплодисменты (функцию обратного вызова) для финальной сцены.🎭👏

🎭 = [Акт 1, Акт 2, Акт 3] 🎬
👏 = video.addEventListener('ended', applause);

// Занавес опускается, публика аплодирует, задание выполнено!

Продвинутые методики для освоения

Для болеп погружения и более точного контроля воспроизведения идеально подойдут инструменты, которые предлагаются библиотеками типа Video.js. Исследуйте элемент <canvas> для создания визуальных эффектов и взаимодействий на основе видео.

Работа с Video.js:

Изучите функционал Video.js для настройки плеера и добавления плагинов, расширяющих базовые возможности.

Особенности <canvas>:

Используйте <canvas>для создания анимаций и эффектов наложения, синхронизированных с видео, и для определения новых видов взаимодействия с пользователем.

Фокус на удобстве доступа и UX:

Не забывайте использовать aria-labels и разрабатывать доступные элементы управления, делая видеоконтент доступным для всех.

Полезные материалы

1. Справочник по событиям | MDN — Обширное руководство по событиям HTML5 видео.
2. HTML Audio/Video DOM ended Event — Руководство по организации события 'ended' для HTML5 видео.
3. Как узнать, закончилось ли HTML5 видео – Stack Overflow — Сообщество, где можно найти решения и примеры.
4. Can I use... Таблицы поддержки для HTML5, CSS3 и др — Таблицы совместимости, демонстрирующие поддержку HTML5 видео в различных браузерах.
5. video + canvas = magic | HTML5 Doctor — Описание взаимодействия между видео и canvas для создания творческих визуальных эффектов.
6. Рассмотрения при стилизации модального окна | CSS-Tricks — Стилизация для создания модальных окон в качестве одного из возможных ответов на окончание видео.
7. Video.js – Сделайте свой плеер уникальным | Video.js — Расширенная платформа для HTML5 видеоплееров, позволяющая тонко настроить плеер.