Атрибут controls тега <video>
Описание
Атрибут controls добавляет стандартный набор элементов управления к видео (воспроизведение, пауза, громкость, полноэкранный режим и др.).
<video controls src="video.mp4">
Ваш браузер не поддерживает видео тег.
</video>
Особенности работы:
- Добавляет встроенный интерфейс управления видео
- Внешний вид зависит от браузера и ОС
- Можно кастомизировать через JavaScript API
- Работает во всех современных браузерах
Элементы управления:
| Элемент | Функция |
|---|---|
| Кнопка воспроизведения/паузы | Запуск и остановка видео |
| Ползунок прогресса | Перемотка видео |
| Регулятор громкости | Изменение уровня звука |
| Кнопка полноэкранного режима | Разворачивание на весь экран |
Рекомендации:
- Всегда используйте для видео, требующих управления
- Комбинируйте с другими атрибутами (
autoplay,loop) - Для кастомизации используйте JavaScript API
- Тестируйте на разных платформах
Пример с дополнительными атрибутами:
<video controls autoplay muted loop>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
Ограничения:
- Внешний вид нельзя изменить через CSS
- Функциональность зависит от браузера
- Нет доступа к отдельным элементам управления
Важно: Для полной кастомизации:
- Не используйте атрибут controls
- Создайте собственные элементы управления
- Используйте JavaScript Media API
Поддержка браузеров:
Атрибут controls поддерживается всеми современными браузерами, включая мобильные. Внешний вид может отличаться в зависимости от платформы.