HTML5: Как определить проигрывается ли видео сейчас

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

Если вы хотите определить, воспроизводится ли видео в данной момент на HTML5, сделайте это с помощью следующего кода:

var video = document.getElementById('myVideo');

if (!video.paused && !video.ended) {
    console.log("Видео воспроизводится");
} else {
    console.log("Видео не воспроизводится");
}

Здесь !video.paused означает, что видео не на паузе, а !video.ended – что оно ещё не закончено. Совместимость этих условий подтверждает, что видео воспроизводится.

Мониторинг в реальном времени с помощью слушателей событий

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

var video = document.querySelector('video');

video.addEventListener('playing', function() {
  console.log('Воспроизведение началось. Готовы к просмотру! 🍿');
});

video.addEventListener('pause', function() {
  console.log('Воспроизведение видео приостановлено. Возможно, настало время для перерыва? 🚽');
});

video.addEventListener('ended', function() {
  console.log('Воспроизведение видео закончено. Хотите посмотреть что-то еще? 🍿🍿');
});

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

Повышение точности определения с помощью пользовательских свойств

Мы можем создать пользовательские свойства или методы, чтобы сделать интерфейс приложения более удобным. Например, свойство isPlaying для объектов HTMLMediaElement:

Object.defineProperty(HTMLMediaElement.prototype, 'isPlaying', {
  get: function() {
    return !this.paused && !this.ended && this.readyState > 2;
  }
});

// Пример использования:
if (video.isPlaying) {
  console.log('Видео воспроизводится');
}

Свойство readyState > 2 гарантирует, что видео готово к воспроизведению и на самом деле воспроизводится в настоящий момент.

Упрощение работы с помощью jQuery

jQuery позволяет упростить многие задачи, связанные с DOM. Используйте эту библиотеку для настройки обработчиков событий:

$('video').on('play', function() {
  console.log('Воспроизведение видео началось. Ждём впечатлений.');
}).on('pause', function() {
  console.log('Воспроизведение приостановлено. Возможно, это время для перекуса.');
});

Делегирование событий в jQuery упрощает управление элементами видео, особенно при динамическом изменении контента.

Улучшение взаимодействия с пользователями за счет визуальных подсказок

Уведомляйте пользователя об изменении статуса видео с помощью визуальных индикаторов:

video.addEventListener('pause', function() {
  document.getElementById('header').classList.add('paused_note');
  // Обеспечиваем визуальную подсказку об остановке воспроизведения.
});

video.addEventListener('playing', function() {
  document.getElementById('header').classList.remove('paused_note');
  // Удаляем подсказку о паузе. Делаем интерфейс более дружелюбным.
});

Управляя классом paused_note, можно быстро сообщить пользователю о текущем статусе воспроизведения видео.

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

Вот простая аналогия:

• Ваш видеоэлемент – это сцена 🎭.
• Прожектор 💡 показывает, воспроизводится ли видео (💡✅) или находится на паузе (💡❌).

В JavaScript это смотрится так:

if (!video.paused) {
  console.log('Видео воспроизводится'); // **Прожектор** светит, 💡✅
} else {
  console.log('Видео на паузе'); // Сцена в темноте, 💡❌
}

Воспроизводится ли видео, стоит ли ожидать бурю аплодисментов? 😉

Крайние случаи и меры предосторожности

Будьте внимательны с особыми случаями, независимо от надёжности метода определения:

1. Когда видео несколько: На страницах с несколькими видео используйте document.querySelectorAll('video'), чтобы проверить статус каждого из них.
2. Для динамического контента: В SPA или при динамической загрузке контента важно корректно привязывать обработчики событий к видеоэлементам, используя делегирование или Mutation Observers.
3. Управление состоянием: Лучше сохранить последнее известное состояние воспроизведения в переменной, которую обновляют обработчики событий, чем постоянно опрашивать DOM.
4. Совместимость с браузерами: Несмотря на то что API видео HTML5 широко поддерживается современными браузерами, всегда проверяйте совместимость и имейте запасные варианты для старых браузеров.

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

1. HTMLMediaElement: play event – Web APIs | MDN — Подробно о событии 'play' в API HTML5 Video на MDN.
2. HTMLMediaElement: playing event – Web APIs | MDN — Официальная документация по событию 'playing', которое сигнализирует о готовности видео продолжить воспроизведение после паузы.
3. HTMLMediaElement: pause event – Web APIs | MDN — Информация о событии 'pause', которое происходит при остановке воспроизведения.
4. javascript – How to tell if a <video> element is currently playing? – Stack Overflow — Обсуждение различных способов определения текущего статуса воспроизведения видео на Stack Overflow.
5. HTML Standard — Стандарт HTML, который описывает все детали и нюансы спецификации интерфейса HTMLMediaElement.
6. GitHub – videojs/video.js: Video.js – Open Source HTML5 Video Player — Открытая библиотека Video.js как источник практических примеров использования видео в вебе.