В современных условиях, когда пользователи часто просматривают сайты с видео в различных условиях, автоматическое отключение звука для видео становится важной функцией для улучшения UX. Особенно актуально это для видео, которые воспроизводятся автоматически или в виде фонов, чтобы не раздражать посетителей неожиданным звуком. В этой статье мы подробно рассмотрим, как добавить автоматическое отключение звука для видео в WordPress, используя плагины и пользовательский код.
Почему важно автоматическое отключение звука видео в WordPress
Автоматический звук у видео может быть раздражающим и даже отпугнуть посетителей сайта. Особенно это актуально для мобильных устройств, где звук может включаться неожиданно, или в офисной среде. Кроме того, современные браузеры все чаще блокируют автоматическое воспроизведение видео со звуком. Поэтому отключение звука по умолчанию обеспечивает плавный и ненавязчивый пользовательский опыт.
Кроме того, отключенный звук позволяет автоматически запускать видео без проблем с политиками браузеров, что важно для фонов и рекламных роликов.
Типичные кейсы использования
- Фоновые видео на главной странице без звука
- Автоматически запускающиеся видео в блогах и новостях
- Видео в pop-up окнах с отключенным звуком по умолчанию
Использование плагинов для автоматического отключения звука видео
Существует несколько полезных плагинов, которые помогут реализовать автоматическое отключение звука без необходимости писать код:
- OmniVideo — мощный плагин для управления видео, в том числе для автозапуска с отключенным звуком. Позволяет легко настраивать параметры видео прямо из админки.
- Clearfy Pro — хотя основная функция плагина — оптимизация сайта, он также позволяет управлять поведением встроенных элементов, включая видео, через удобный интерфейс.
- Video.js — плагин с открытым исходным кодом, который можно интегрировать с WordPress, предлагающий гибкие настройки звука и автозапуска.
Использование этих плагинов позволяет быстро реализовать задачу без особых усилий, но при необходимости можно решить задачу программно.
Добавление автоматического отключения звука видео с помощью пользовательского кода
Если вы хотите более гибко управлять видео на сайте, можно использовать JavaScript для автоматического отключения звука при загрузке страницы или при инициализации видео-плеера.
Пример кода для отключения звука у всех видео на странице
document.addEventListener('DOMContentLoaded', function() {
var videos = document.querySelectorAll('video');
videos.forEach(function(video) {
video.muted = true; // Отключаем звук
video.autoplay = true; // Автозапуск видео
video.play().catch(function(e) {
console.log('Автозапуск заблокирован браузером');
});
});
});Этот скрипт автоматически выключит звук у всех видео на странице и попытается их запустить. Браузеры, как правило, разрешают автозапуск только для видео без звука.
Как интегрировать код в WordPress
Для добавления данного скрипта в WordPress можно использовать функцию wp_enqueue_script с подключением собственного JS файла или добавить скрипт в футер через хук wp_footer. Пример функции для functions.php темы:
function wpvideo_ru_enqueue_mute_script() {
wp_add_inline_script('jquery-core', "document.addEventListener('DOMContentLoaded', function() { var videos = document.querySelectorAll('video'); videos.forEach(function(video) { video.muted = true; video.autoplay = true; video.play().catch(function(e) { console.log('Автозапуск заблокирован браузером'); }); }); });");
}
add_action('wp_enqueue_scripts', 'wpvideo_ru_enqueue_mute_script');В этом примере мы добавляем инлайн-скрипт, который срабатывает после загрузки jQuery. Можно адаптировать под любую другую библиотеку или чистый JS.
Дополнительные советы и особенности
Обработка мобильных устройств
На мобильных устройствах политика автозапуска строже. Автоматическое воспроизведение видео возможно только если видео без звука. Поэтому в дополнение к video.muted = true стоит добавить video.playsInline = true — это позволит воспроизводить видео внутри страницы без перехода в полноэкранный режим.
Как добавить кнопку включения звука
Пользователи могут захотеть включить звук вручную. Для этого можно добавить кнопку, которая будет переключать свойство muted у видео. Пример кода:
document.getElementById('toggle-sound').addEventListener('click', function() {
var video = document.querySelector('video');
if (video) {
video.muted = !video.muted;
this.textContent = video.muted ? 'Включить звук' : 'Выключить звук';
}
});HTML кнопки:
<button id="toggle-sound">Включить звук</button>Такой подход повышает удобство и дает пользователю контроль над воспроизведением.
Выводы и рекомендации по применению
Автоматическое отключение звука видео в WordPress — важный аспект улучшения пользовательского опыта и соответствия современным требованиям браузеров. Используйте плагины, если хотите быстро получить результат без кодинга, либо внедряйте собственные скрипты для большей гибкости и кастомизации. Не забывайте про адаптацию под мобильные устройства и обеспечьте пользователям возможность включить звук при необходимости.
Для более расширенных возможностей рекомендую обратить внимание на плагин OmniVideo, который отлично подходит для комплексного управления видео на WordPress, включая опции звука, автозапуска и адаптивности.