W3docs
ru
Войти

HTML-атрибут controls

Атрибут controls — boolean-атрибут, указывающий браузеру отображать встроенные элементы управления audio или video. Примеры использования.

HTML-атрибут controls — это boolean-атрибут, который указывает браузеру отображать встроенные элементы управления воспроизведением для элемента <audio> или <video>. Он был введён в HTML5.

Зачем нужен атрибут controls

По умолчанию элементы <audio> и <video> отрисовываются без видимого интерфейса. Элемент <audio> без controls полностью невидим на странице, а элемент <video> без него показывает только первый кадр (или чёрный прямоугольник) без возможности запустить воспроизведение.

Добавление controls даёт пользователям возможность воспроизводить, ставить на паузу, перематывать и регулировать громкость — а также позволяет пользователям клавиатуры и программ чтения с экрана управлять медиа. Если вы не создаёте собственный JavaScript-плеер с доступными элементами управления, атрибут controls следует включать почти всегда. Его отсутствие без замены является проблемой как с точки зрения удобства, так и доступности.

Какие элементы управления отображаются

Для элемента <audio> браузерные элементы управления обычно предоставляют:

  • Воспроизведение / Пауза
  • Полоса перемотки
  • Текущее время / продолжительность
  • Громкость / отключение звука

Для элемента <video> они обычно предоставляют:

  • Воспроизведение / Пауза
  • Полоса перемотки
  • Текущее время / продолжительность
  • Громкость / отключение звука
  • Переключение полноэкранного режима
  • Субтитры (когда присутствует элемент <track> с kind="captions" или kind="subtitles")
  • Картинка-в-картинке / скачивание / «воспроизвести на другом устройстве» (зависит от браузера)

Точный набор элементов управления — и их внешний вид — не стандартизирован. Chrome, Firefox, Safari, Edge и мобильные браузеры отрисовывают каждый свой нативный интерфейс, причём некоторые элементы управления (например, субтитры или кнопка скачивания) появляются только тогда, когда они актуальны. Воспринимайте внешний вид как деталь браузера, которую вы не полностью контролируете.

Синтаксис

controls — boolean-атрибут: само его наличие включает элементы управления. Значение не имеет значения, поэтому controls, controls="" и controls="controls" эквивалентны. Чтобы отключить его, просто не указывайте этот атрибут.

<audio controls></audio>

Пример: controls на элементе <audio>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
      Your browser does not support the audio element.
    </audio>
    <p>Click the play button to hear the clip.</p>
  </body>
</html>
Попробуйте сами »

Текст внутри элемента («Your browser does not support…») — это резервное содержимое для очень старых браузеров. Замените src путём к своему аудиофайлу или любым доступным HTTPS-URL аудио.

Пример: controls на элементе <video>

Здесь несколько элементов <source> позволяют браузеру выбрать первый формат, который он способен воспроизвести. Подставьте свои файлы или стабильный HTTPS-URL.

<!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="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
      Your browser does not support the video element.
    </video>
    <p>Some information about the video.</p>
  </body>
</html>
Попробуйте сами »

Удаление отдельных элементов управления с помощью controlslist

Если вам нужно сохранить большинство нативных элементов управления, но скрыть один-два, браузеры на основе Chromium (Chrome, Edge, Opera) поддерживают связанный атрибут controlslist. Он принимает разделённый пробелами список токенов, отключающих отдельные элементы управления:

  • nodownload — скрыть кнопку скачивания
  • nofullscreen — скрыть кнопку полноэкранного режима (видео)
  • noremoteplayback — скрыть кнопку «воспроизвести на другом устройстве» / трансляцию
<video controls controlslist="nodownload nofullscreen noremoteplayback">
  <source src="movie.mp4" type="video/mp4">
</video>

controlslist не является частью финализированного стандарта и пока остаётся функцией Chromium, поэтому Firefox и Safari игнорируют его. Он лишь скрывает элементы интерфейса — это не механизм безопасности или DRM, и целеустремлённый пользователь всё равно сможет получить доступ к медиафайлу.

controls совместно с autoplay и muted

Если вы сочетаете controls с autoplay, большинство браузеров заблокируют автовоспроизведение со звуком. Добавьте атрибут muted, чтобы медиа разрешили запуститься, а пользователь мог включить звук через элементы управления:

<video controls autoplay muted>
  <source src="movie.mp4" type="video/mp4">
</video>

Связанные темы

Практика

Практика
Для чего используется HTML-атрибут 'controls'?
Для чего используется HTML-атрибут 'controls'?
Was this page helpful?