Как использовать Video API в WordPress для точного контроля воспроизведения видео

Диагностика проблемы: почему стандартные видео плееры не всегда подходят

По умолчанию WordPress позволяет вставлять видео через блоки или шорткоды, используя HTML5 тег <video>. Однако в проектах с кастомными требованиями к управлению воспроизведением — например, для запуска видео по определённым событиям, синхронизации с анимациями или аналитикой — стандартных возможностей часто недостаточно. Часто возникает ситуация, когда требуется:

• Запустить видео программно при скролле или клике
• Остановить воспроизведение при смене слайда или переключении вкладок
• Получать уведомления о прогрессе видео для аналитики

Стандартные блоки WordPress и плагины часто не предоставляют гибкого API для таких задач, поэтому приходится использовать нативный Video API браузеров.

Пошаговое решение: работа с HTML5 Video API в WordPress

1. Добавление кастомного видео плеера с уникальным ID

Для начала добавим видео с уникальным идентификатором, чтобы управлять им через JavaScript.

<video id="custom-video" width="640" height="360" controls preload="metadata">
  <source src="/wp-content/uploads/video.mp4" type="video/mp4">
  Ваш браузер не поддерживает видео.
</video>

2. Подключение скрипта для управления воспроизведением

В файле темы functions.php зарегистрируем и подключим скрипт, который будет работать с видео API.

function wpvideo_enqueue_scripts() {
    wp_enqueue_script('wpvideo-custom-video', get_template_directory_uri() . '/js/custom-video.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'wpvideo_enqueue_scripts');

3. Реализация управления видео в custom-video.js

Создадим базовый скрипт, который запускает видео при прокрутке до него и ставит на паузу, когда видео уходит из зоны видимости.

document.addEventListener('DOMContentLoaded', function() {
    const video = document.getElementById('custom-video');
    if (!video) return;

    function checkVisibility() {
        const rect = video.getBoundingClientRect();
        const isVisible = (rect.top < window.innerHeight) && (rect.bottom > 0);
        if (isVisible && video.paused) {
            video.play();
        } else if (!isVisible && !video.paused) {
            video.pause();
        }
    }

    window.addEventListener('scroll', checkVisibility);
    checkVisibility();
});

Проверка результата после внедрения

После добавления видео с идентификатором custom-video и подключения скрипта, откройте страницу с видео и прокрутите её. Видео должно автоматически запускаться, когда попадает в область видимости, и останавливаться, когда вы прокручиваете страницу дальше. Проверьте в консоли браузера ошибок JavaScript нет, а в сети видео загружается корректно.

Частые ошибки и как исправить

• Видео не запускается автоматически: Проверьте, что видео не заблокировано браузером из-за политики автозапуска. Для автозапуска без звука добавьте атрибут muted в тег <video>.
• Скрипт не находит видео: Убедитесь, что ID видео совпадает с тем, что указан в скрипте, и что скрипт подключён в футере (true в wp_enqueue_script).
• Видео запускается, но не останавливается: Проверьте корректность расчётов видимости элемента в функции checkVisibility, возможно, требуется учесть дополнительные отступы или особенности верстки.

Практические советы по безопасности и производительности при работе с Video API

• Используйте атрибуты preload="metadata" или preload="none", чтобы не загружать видео целиком сразу — это снижает нагрузку на сервер и ускоряет загрузку страницы.
• Добавляйте muted для видео с автозапуском, чтобы избежать блокировки браузеров.
• Оптимизируйте видео в формате WebM и MP4 для лучшей совместимости и скорости загрузки.
• Используйте IntersectionObserver вместо прослушивания события scroll для более эффективного и современного определения видимости видео.

Альтернативы: сравнение методов контроля видео в WordPress