Атрибут controls HTML
Атрибут controls в HTML является булевым атрибутом и указывает, что элементы управления для аудио/видео должны отображаться. Он появился в HTML5.
Вы можете использовать атрибут controls для следующих элементов: <audio> и <video>.
Для тега <audio> атрибут controls обычно предоставляет:
- Воспроизведение
- Пауза
- Перемотка
- Громкость
Для тега <video> атрибут controls обычно предоставляет:
- Воспроизведение
- Пауза
- Перемотка
- Громкость
- Переключение полноэкранного режима
- Субтитры
- Трек
Примечание: Точный набор отображаемых элементов управления зависит от реализации браузера и поддержки форматов медиа.
Синтаксис
Синтаксис атрибута controls HTML
<audio controls></audio>Пример использования атрибута controls HTML для элемента <audio>:
Пример использования атрибута "controls " HTML для элемента <audio>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls src="https://ru.w3docs.com/build/audios/audio.mp3">
Your browser does not support the audio element.
</audio>
<p>Click the play button</p>
</body>
</html>Пример использования атрибута controls HTML для элемента <video>:
Пример использования атрибута "controls " HTML для элемента <video>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 220px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls>
<source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
<source src="https://ru.w3docs.com/build/videos/arcnet.io(7-sec).mp4" type="video/mp4">
</video>
<p>Some information about video</p>
</body>
</html>Примечание: При использовании autoplay вместе с controls рекомендуется также добавлять атрибут muted, чтобы соответствовать современным политикам автовоспроизведения браузеров.
Практика
Для чего предназначен атрибут 'controls' в HTML?