Как вы узнали из модуля, посвящённого изображениям , HTML позволяет встраивать медиаконтент в веб-страницу. В этом разделе мы рассмотрим аудио- и видеофайлы, включая способы их встраивания, пользовательские элементы управления, создание статических изображений-заполнителей для видео, а также рекомендации по обеспечению доступности аудио- и видеофайлов.
<audio> и <video>
Элементы <video> и <audio> можно использовать для непосредственного встраивания медиаплееров с помощью атрибута src или в качестве контейнера для ряда элементов <source> , каждый из которых предлагает вариант файла-источника. Хотя <video> можно использовать для встраивания src , для встраивания звуковых файлов предпочтительнее использовать элемент <audio> .
Открывающиеся теги <video> и <audio> могут содержать ряд других атрибутов, включая controls , autoplay , loop , mute , preload и глобальные атрибуты. Элемент <video> также поддерживает атрибуты height , width и poster .
<video src="videos/machines.webm" poster="images/machine.jpg" controls>
<p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>
В этом примере <video> используется один источник, на который ссылается атрибут src . Атрибут poster предоставляет изображение, которое будет отображаться при загрузке видео. Наконец, атрибут controls предоставляет пользовательские элементы управления видео.
Резервный контент размещается между открывающим и закрывающим тегами. Если пользовательский агент не поддерживает <video> (или <audio> , этот контент отображается. Закрывающий тег </video> обязателен, даже если между ними нет контента (но резервный контент всегда должен быть, верно?).
Если в открывающих тегах <video> или <audio> нет атрибута src , добавьте один или несколько элементов <source> , каждый из которых имеет атрибут src , указывающий на медиафайл. В следующем примере представлены три варианта медиафайлов, резервный контент, а также субтитры на английском и французском языках между открывающим и закрывающим тегами.
<video controls poster="images/machine.jpg">
<source src="videos/machines.webm" type="video/webm">
<source src="videos/machines.mp4" type="video/mp4">
<source src="videos/machines.ogv" type="video/ogg">
<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" />
<p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>
Каждый дочерний элемент <source> включает атрибут src , указывающий на ресурс, а атрибут type сообщает браузеру тип медиафайла , на который ссылается файл. Это предотвращает загрузку браузером медиафайлов, которые он не сможет декодировать.
В атрибут type можно включить параметр codecs , который точно определяет, как кодируется ресурс. Кодеки позволяют включать медиаоптимизацию в качестве прогрессивных улучшений (элементов, поддерживаемых не всеми браузерами). Кодек отделяется от типа медиа точкой с запятой. Например, кодек можно указать с использованием интуитивно понятного синтаксиса, например, <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis"> что означает, что файлы WebM содержат видео VP8 и аудио Vorbis.
Кодеки также могут быть более сложными для расшифровки, например, <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a"> , что означает, что MP4 кодируется по стандарту Advanced Video Coding Main Profile уровня 4.2. Объяснение этого синтаксиса выходит за рамки данного урока. Подробнее см. в статье Джейка Арчибальда о том, как определить параметр кодека для видео AV1 .
При отображении видео по умолчанию первый кадр видео отображается как стоп-кадр, как только он становится доступен. Это можно настроить. Атрибут poster позволяет отображать источник изображения во время загрузки видео и до его воспроизведения. Если видео воспроизводится и затем ставится на паузу, постер не отображается повторно.
Обязательно укажите соотношение сторон вашего видео, так как при загрузке видео разница в размерах между постером и видео приведет к переформатированию и перерисовке.
Всегда включайте логический атрибут controls . Это делает пользовательские элементы управления видимыми, предоставляя пользователям возможность управлять громкостью звука, полностью отключать звук и разворачивать видео на весь экран. Отсутствие controls создаёт неприятный пользовательский опыт, особенно если включён логический атрибут autoplay . Обратите внимание, что некоторые браузеры не будут учитывать директиву атрибута autoplay если логический атрибут muted отсутствует, поскольку автоматическое воспроизведение медиафайла, как правило, вызывает неприятные ощущения, даже если звук отключен, а элементы управления видны.
Треки
Между открывающим и закрывающим тегами аудио- и видеофайлов добавьте один или несколько элементов <track> для указания синхронизированных текстовых дорожек. В следующем примере представлены два файла <track> с синхронизированными текстовыми субтитрами на английском и французском языках.
<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Français" kind="subtitles" srclang="fr" lang="fr-fr" src="vtt/subtitles-fr.vtt" />
Файлы треков, указанные в атрибуте src , должны быть в формате WebVTT (.vtt). Они должны находиться в том же домене, что и HTML-документ, если не указан атрибут crossorigin .
Для атрибута kind трека существует пять перечисляемых значений: subtitles , captions , descriptions , chapters и другие metadata .
Добавьте subtitles вместе с атрибутом srclang для транскрипции и перевода диалогов. Значение каждого атрибута label отображается как вариант для пользователя. Содержимое выбранного параметра VTT отображается поверх видео. Внешний вид субтитров можно настроить, указав метод ::cue/ ::cue() .
Значение kind="caption" следует зарезервировать для транскрипций и переводов, содержащих звуковые эффекты и другую важную аудиоинформацию. Это актуально не только для глухих. Возможно, пользователь не может найти наушники и включил субтитры. Или, возможно, он не совсем уловил последние тезисы любимого подкаста и хочет прочитать расшифровку, чтобы убедиться в правильности понимания. Наличие альтернативных способов доступа к аудио- и видеоконтенту важно и удобно.
Атрибут kind="description" предназначен для текстового описания визуального содержимого видео для пользователей, которые не могут видеть видео, независимо от того, используют ли они систему без экрана, например Google Home или Alexa, или являются слепыми.
Использование субтитров и субтитров в формате WebVTT делает видео доступным для людей с нарушениями слуха. Слабость слуха может быть вызвана нахождением пользователя в шумной обстановке, неисправными динамиками или наушниками, а также потерей слуха или идентификацией себя как глухого. Обеспечение доступности вашего контента помогает гораздо большему числу людей, чем вы думаете; это помогает всем.
Рекомендации по использованию фонового видео
Ваша команда маркетологов или дизайнеров может захотеть добавить на сайт фоновое видео. Как правило, это означает, что им нужно беззвучное, автоматически воспроизводящееся, цикличное видео без элементов управления. HTML-код может выглядеть примерно так:
<video playsinline autoplay loop muted poster="images/machine.jpg" role="none">
<source src="videos/machines.webm" type="video/webm">
<source src="videos/machines.mp4" type="video/mp4">
<source src="videos/machines.ogv" type="video/ogg">
</video>
Фоновые видео недоступны. Контент не должен передаваться через фоновые видео без предоставления пользователям полного контроля над воспроизведением и доступа ко всем субтитрам. Поскольку это видео исключительно декоративное, оно включает в себя роль ARIA none и не содержит никакого резервного контента. Чтобы улучшить качество видео без звука, удалите звуковую дорожку из медиаисточников.
Если ваше видео длится не более пяти секунд, правила доступности не требуют использования механизма паузы, но любое видео с логическим атрибутом loop будет по умолчанию воспроизводиться бесконечно, превышая это пятисекундное или любое другое ограничение. Для удобства пользователя всегда включайте функцию приостановки видео. Проще всего это сделать, добавив controls .
Пользовательские элементы управления мультимедиа
Чтобы отображать пользовательские элементы управления видео или аудио вместо встроенных элементов управления браузера, включите атрибут controls . Затем используйте JavaScript для добавления пользовательских элементов управления мультимедиа и удалите атрибут controls. Например, можно добавить <button> , который переключает состояние воспроизведения аудиофайла.
<button id="playPause" aria-controls="idOfAudio"
data-pause-text="Pause audio"
data-play-text="Play audio">Pause audio</button>
В этом примере используется кнопка с атрибутами dataset , содержащими текст, который обновляется при переключении между состояниями воспроизведения и паузы. Атрибут aria-controls добавляется вместе с id элемента, управляемого кнопкой; в данном случае это аудио. Каждая кнопка, управляющая аудио, имеет обработчик событий.
Для создания настраиваемых элементов управления используйте HTMLMediaElement.play() и HTMLMediaElement.pause() . При переключении состояния воспроизведения также переключайте текст кнопки:
const pauseButton = document.getElementById('playPause');
pauseButton.addEventListener("click", pauseAndPlay, false);
function pauseAndPlay() {
console.log(this);
const media = document.getElementById(this.getAttribute('aria-controls'));
if (media.paused) {
media.play();
this.innerText = this.dataset.pauseText;
} else {
media.pause();
this.innerText = this.dataset.playText;
}
}
Включив атрибут controls , пользователь может управлять аудио (или видео) даже в случае сбоя JavaScript. Удаляйте атрибут controls только после создания экземпляра заменяющей кнопки.
document.querySelector('[aria-controls]').removeAttribute('controls');
Всегда включайте внешние элементы управления, когда пользователи не могут получить к ним доступ, например, в фоновых видео, элементы управления которых скрыты за содержимым сайта. Важно понимать основы требований к доступности мультимедиа, чтобы удовлетворить пользователей с различными потребностями среды и сенсорными потребностями, включая миллионы людей с нарушениями слуха и зрения. Мы только что коснулись HTMLMediaElement , который предоставляет несколько свойств, методов и событий, наследуемых как HTMLVideoElement , так и HTMLAudioElement , при этом HTMLMediaElement добавляет несколько собственных свойств, методов и событий. Существует несколько других Media API , включая TextTrack API . Вы можете использовать Media Capture и Streams и MediaDevices API для записи звука с микрофона пользователя или экрана пользователя . Web Audio API позволяет управлять живым и предварительно записанным звуком, а также транслировать, сохранять или отправлять аудио в элемент <audio> .
Проверьте свое понимание
Проверьте свои знания аудио и видео.
Для чего используется элемент <track> ?
Что контролирует атрибут poster ?