Как вы узнали из модуля изображений , HTML позволяет встраивать мультимедиа в веб-страницу. В этом разделе мы рассмотрим аудио- и видеофайлы, в том числе способы их встраивания, пользовательские элементы управления, предоставление заполнителя статического изображения для ваших видео, а также лучшие практики, включая обеспечение доступа к аудио- и видеофайлам.
<audio> и <video>
Элементы <video> и <audio> можно использовать для встраивания медиаплееров напрямую с атрибутом src или в качестве элемента-контейнера для серии элементов <source> , каждый из которых предоставляет предложение файла src . Хотя <video> можно использовать для встраивания аудиофайла, для встраивания звуковых файлов предпочтительнее использовать элемент <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> обязателен, даже если между ними нет контента (но всегда должен быть резервный контент, верно? ?).
Если атрибут src не включен в открывающие теги <video> или <audio> , включите один или несколько элементов <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 представляет собой расширенное кодирование видео основного профиля уровня 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 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>
Фоновые видео недоступны. Контент не должен передаваться через фоновые видеоролики, не предоставляя пользователям полный контроль над воспроизведением и доступ ко всем субтитрам. Поскольку это видео носит чисто декоративный характер, в нем none роль ARIA и отсутствует резервный контент. Чтобы улучшить производительность видео с всегда отключенным звуком, удалите звуковую дорожку из источников мультимедиа.
Если ваше видео воспроизводится в течение пяти секунд или меньше, рекомендации по доступности не требуют механизма приостановки, но все, что имеет логический атрибут loop по умолчанию будет зацикливаться навсегда, превышая этот пятисекундный или любой другой лимит времени. Для удобства пользователей всегда включайте способ приостановки видео. Это проще всего сделать, включив controls .
Пользовательские элементы управления мультимедиа
Чтобы отображать пользовательские элементы управления видео или звуком, а не встроенные элементы управления браузера, включите атрибут controls . Затем используйте JavaScript, чтобы добавить пользовательские элементы управления мультимедиа и удалить атрибут управления. Например, вы можете добавить <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 не работает. Удаляйте атрибут управления только после создания экземпляра кнопки замены.
document.querySelector('[aria-controls]').removeAttribute('controls');
Всегда включайте внешние элементы управления, когда пользователи не могут получить к ним доступ, например, в фоновых видео, элементы управления которых скрыты за содержимым сайта. Важно понимать основы требований к доступности средств массовой информации, чтобы удовлетворить потребности пользователей с различными экологическими и сенсорными потребностями, включая миллионы людей с потерей слуха и нарушениями зрения. Мы только что коснулись HTMLMediaElement , который предоставляет несколько свойств, методов и событий, наследуемых как HTMLVideoElement , так и HTMLAudioElement , при этом HTMLMediaElement добавляет несколько собственных свойств, методов и событий. Существует несколько других Media API , включая TextTrack API . Вы можете использовать API-интерфейсы Media Capture и Streams и MediaDevices для записи звука с микрофона пользователя или записи экрана пользователя . API веб-аудио позволяет манипулировать живым и предварительно записанным звуком, а также осуществлять потоковую передачу, сохранение или отправку звука в элемент <audio> .
Проверьте свое понимание
Проверьте свои знания аудио и видео.
Для чего используется элемент <track> ?
Чем управляет атрибут poster ?