W3docs

Атрибут controls HTML

The controls attribute is a boolean attribute and specifies that the audio/video controls must be displayed. See examples of its use on different elements.

Атрибут controls в HTML является булевым атрибутом и указывает, что элементы управления для аудио/видео должны отображаться. Он появился в HTML5.

Вы можете использовать атрибут controls для следующих элементов: <audio> и <video>.

Для тега <audio> атрибут controls обычно предоставляет:

  • Воспроизведение
  • Пауза
  • Перемотка
  • Громкость

Для тега <video> атрибут controls обычно предоставляет:

  • Воспроизведение
  • Пауза
  • Перемотка
  • Громкость
  • Переключение полноэкранного режима
  • Субтитры
  • Трек

Примечание: Точный набор отображаемых элементов управления зависит от реализации браузера и поддержки форматов медиа.

Синтаксис

Синтаксис атрибута controls HTML

<audio controls></audio>

Пример использования атрибута controls HTML для элемента <audio>:

Пример использования атрибута <span class="attribute">"controls "</span> HTML для элемента <audio>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <audio controls src="/build/audios/audio.mp3">
      Your browser does not support the audio element.
    </audio>
    <p>Click the play button</p>
  </body>
</html>

Пример использования атрибута controls HTML для элемента <video>:

Пример использования атрибута <span class="attribute">"controls "</span> 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="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4">
    </video>
    <p>Some information about video</p>
  </body>
</html>

Примечание: При использовании autoplay вместе с controls рекомендуется также добавлять атрибут muted, чтобы соответствовать современным политикам автовоспроизведения браузеров.

Практика

Практика

Для чего предназначен атрибут 'controls' в HTML?