Атрибут muted тега <video>
Описание
Атрибут muted отключает звук у видео при его загрузке. Это особенно полезно для автовоспроизводимых видео, где звук по умолчанию запрещён в большинстве браузеров.
<video muted autoplay loop src="background-video.mp4"></video>
Особенности работы:
- Звук отключён при загрузке видео
- Пользователь может включить звук вручную через элементы управления
- Обязателен для autoplay в большинстве современных браузеров
- Не влияет на громкость видео при программном воспроизведении
Рекомендуемые сценарии:
| Применение | Комбинация атрибутов |
|---|---|
| Фоновые видео | muted + autoplay + loop |
| Анимации и баннеры | muted + autoplay |
| Галереи и превью | muted + controls |
Пример с управлением звуком через JavaScript:
<video id="heroVideo" muted autoplay loop src="hero-section.mp4"></video>
<button onclick="document.getElementById('heroVideo').muted = false">
Включить звук
</button>
Рекомендации:
- Всегда используйте с autoplay для соблюдения политик браузеров
- Предоставляйте пользователю возможность включить звук
- Для важного аудиоконтента избегайте autoplay
- Тестируйте на разных платформах
Ограничения браузеров:
- Chrome: autoplay работает только с muted
- Safari: аналогичные ограничения на iOS
- Firefox: может блокировать autoplay без muted
- Мобильные браузеры: часто полный запрет autoplay со звуком
Политика автовоспроизведения:
<script>
// Проверка возможности воспроизведения со звуком
document.getElementById('video').play()
.then(() => console.log('Автовоспроизведение разрешено'))
.catch(e => console.log('Автовоспроизведение запрещено:', e));
</script>
Важно: Соблюдайте правила пользовательского опыта:
- Не используйте скрытое воспроизведение звука
- Предупреждайте о громком контенте
- Учитывайте автономность пользователей
Оптимальная практика:
<video id="introVideo" muted autoplay playsinline loop>
<source src="intro.webm" type="video/webm">
<source src="intro.mp4" type="video/mp4">
</video>
<button id="unmuteBtn" aria-label="Включить звук">
🔇
</button>
<script>
document.getElementById('unmuteBtn').addEventListener('click', () => {
const video = document.getElementById('introVideo');
video.muted = !video.muted;
document.getElementById('unmuteBtn').textContent = video.muted ? '🔇' : '🔊';
});
</script>