Автозапуск видео при клике — популярная функциональность, которая позволяет улучшить пользовательский опыт на сайте, экономя трафик и уменьшая нагрузку на страницу. В этой статье мы рассмотрим, как реализовать автозапуск видео именно при клике пользователя в WordPress, используя как готовые плагины, так и собственные решения с кодом.
Почему автозапуск видео при клике важен для сайта
По умолчанию многие браузеры блокируют автозапуск видео с включённым звуком. Это связано с желанием не мешать пользователям и экономить трафик. Однако запуск видео по клику — это законный и удобный способ предоставить интерактивный контент. Пользователь сознательно запускает видео, что повышает вовлечённость и снижает вероятность раздражения.
Кроме того, такой подход помогает оптимизировать загрузку страниц: видео не грузится и не проигрывается до тех пор, пока пользователь не проявит интерес, что положительно сказывается на скорости и показателях Core Web Vitals.
Реализация автозапуска видео по клику с помощью плагинов WordPress
Плагин OmniVideo от WPSHOP для удобного автозапуска видео
Плагин OmniVideo — мощный инструмент для работы с видео на сайте WordPress. Он поддерживает автозапуск видео по клику, легко интегрируется с визуальным редактором и оптимизирует загрузку видео.
Для включения автозапуска по клику в OmniVideo достаточно активировать соответствующую опцию в настройках видеоплеера. Плагин также поддерживает адаптивность и мобильные устройства.
Другие плагины с поддержкой автозапуска по клику
- Video.js HTML5 Player — популярный плеер с настройками автозапуска, которые можно включить через параметры.
- FV Player — поддерживает автозапуск и удобное управление через панель плагина.
Но если у вас специфические требования или вы хотите сэкономить на плагинах, можно реализовать автозапуск видео по клику самостоятельно.
Создание автозапуска видео при клике с помощью кода в WordPress
Простой пример на jQuery для запуска видео по клику
Допустим, у вас на странице вставлено видео с атрибутом id="wpvideo_ru_player". Нужно сделать так, чтобы видео запускалось только после клика по кнопке или самому видео.
jQuery(document).ready(function($) {
$('#wpvideo_ru_player').on('click', function() {
if (this.paused) {
this.play();
} else {
this.pause();
}
});
});Этот код слушает событие клика на видео и переключает воспроизведение. Чтобы добавить автозапуск только при первом клике, можно добавить флаг:
jQuery(document).ready(function($) {
var wpvideo_ru_started = false;
$('#wpvideo_ru_player').on('click', function() {
if (!wpvideo_ru_started) {
this.play();
wpvideo_ru_started = true;
}
});
});Добавляем кнопку запуска видео с автозапуском
Если вы хотите, чтобы видео не начиналось по клику на само видео, а по клику на отдельную кнопку, добавьте в HTML:
<video id="wpvideo_ru_player" width="640" height="360" controls preload="none" poster="poster.jpg">
<source src="video.mp4" type="video/mp4">
Ваш браузер не поддерживает видео.
</video>
<button id="wpvideo_ru_play_button">Запустить видео</button>И JS:
jQuery(document).ready(function($) {
$('#wpvideo_ru_play_button').on('click', function() {
var video = $('#wpvideo_ru_player').get(0);
if (video.paused) {
video.play();
}
});
});Реализация автозапуска с отключением звука для обхода блокировок браузеров
Для того чтобы видео точно запустилось, особенно на мобильных устройствах, можно включить автозапуск с отключённым звуком, а звук включать уже по желанию пользователя.
jQuery(document).ready(function($) {
$('#wpvideo_ru_play_button').on('click', function() {
var video = $('#wpvideo_ru_player').get(0);
video.muted = true; // отключаем звук
video.play();
});
});Это решит проблему с автозапуском, так как многие браузеры разрешают воспроизведение только без звука.
Советы по оптимизации автозапуска видео на сайте WordPress
Отложенная загрузка видео
Чтобы не замедлять загрузку страницы, используйте отложенную загрузку видео (lazy load). Это можно сделать с помощью атрибута preload="none" у тега <video> и загрузки источника видео только после клика.
Пример загрузки видео по клику:
jQuery(document).ready(function($) {
$('#wpvideo_ru_play_button').on('click', function() {
var video = $('#wpvideo_ru_player').get(0);
if (video.getAttribute('src') === null) {
video.src = 'video.mp4';
}
video.play();
});
});Поддержка мобильных устройств и адаптивность
Обязательно тестируйте автозапуск на мобильных устройствах. Используйте адаптивные размеры видео и плагин OmniVideo, который уже оптимизирован для мобильных.
Внедрение автозапуска в Gutenberg и другие редакторы
Если вы используете Gutenberg, можно создать собственный блок с видео и автозапуском по клику, добавив туда JavaScript из примеров выше. Для классического редактора достаточно добавить код в футер темы или через плагин Custom JS.
Заключение по реализации автозапуска видео по клику
Автозапуск видео при клике — простая, но мощная функция для улучшения UX и оптимизации загрузки. Используйте готовые плагины, например, OmniVideo, или реализуйте собственные решения с помощью JavaScript, учитывая особенности браузеров и мобильных устройств. Не забудьте про отключение звука и lazy load для максимальной совместимости и производительности.