Как использовать хук для управления скоростью воспроизведения видео в WordPress

Диагностика: почему нужно управлять скоростью воспроизведения видео

Встраиваемые видео в WordPress часто проигрываются с дефолтной скоростью, что не всегда удобно для пользователей. Особенно это актуально для обучающих роликов, презентаций или длинных интервью, где полезно ускорить или замедлить воспроизведение. Однако штатный видеоплеер WordPress не предоставляет встроенного интерфейса для изменения скорости. Чтобы добавить эту функцию, нужно подключить JavaScript с управлением параметром playbackRate и связать его с видеоэлементом.

Пошаговое решение: добавляем поддержку управления скоростью видео

1. Определяем, где подключать скрипт

Для изменения поведения видео в WordPress правильнее всего использовать хуки wp_enqueue_scripts и добавить кастомный JS файл или inline-скрипт.

2. Добавляем JavaScript для управления playbackRate

Создадим простой скрипт, который будет вставлять на страницу кнопку для изменения скорости воспроизведения и изменять параметр playbackRate у всех видеоэлементов.

function wpvideo_add_playbackrate_script() {
    wp_enqueue_script('wpvideo-playbackrate', false);
    wp_add_inline_script('wpvideo-playbackrate', "
        document.addEventListener('DOMContentLoaded', function() {
            var videos = document.querySelectorAll('video');
            videos.forEach(function(video) {
                var btn = document.createElement('button');
                btn.innerText = 'x1.5';
                btn.style.margin = '5px';
                btn.addEventListener('click', function() {
                    if(video.playbackRate === 1) {
                        video.playbackRate = 1.5;
                        btn.innerText = 'x1.0';
                    } else {
                        video.playbackRate = 1;
                        btn.innerText = 'x1.5';
                    }
                });
                video.parentNode.insertBefore(btn, video.nextSibling);
            });
        });
    ");
}
add_action('wp_enqueue_scripts', 'wpvideo_add_playbackrate_script');

3. Встраиваем код в functions.php темы или в свой плагин

Добавьте приведённую функцию в файл functions.php активной темы или в собственный плагин, чтобы скрипт подгружался на всех страницах с видео.

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

Откройте любую страницу с видео. Под каждым видео должна появиться кнопка с надписью «x1.5». При клике скорость видео переключается между 1 и 1.5. Проверьте в инструментах разработчика (консоль) отсутствие JS-ошибок и корректное поведение кнопки.

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

• Кнопка не появляется: вероятно, видео загружается динамически (через AJAX) — нужно адаптировать скрипт под динамический контент или использовать MutationObserver.
• Конфликты со стилями темы: кнопка может выглядеть некорректно — добавьте CSS-стили для кнопок, чтобы унифицировать внешний вид.
• Скрипт не подключается: проверьте, что функция подключена через add_action('wp_enqueue_scripts', ...) и нет ошибок PHP.

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

• Минимизируйте объём скриптов, используйте inline-скрипты только для небольших функций.
• При большом количестве видео на странице подумайте об оптимизации с помощью event delegation или кастомных UI-элементов.
• Не используйте document.write — только DOM-операции через createElement и appendChild.

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