Аудио и Видео¶

Узнайте, как работать с HTML-медиа, такими как аудио и видео.

Как вы узнали из модуля Изображения, 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> обязателен, даже если между ними нет никакого содержимого (но ведь всегда должно быть запасное содержимое, не так ли?).

Если в открывающем теге <video> или <audio> отсутствует атрибут src, включите в него один или несколько элементов <source>, каждый из которых содержит атрибут src на медиафайл. В следующем примере между открывающим и закрывающим тегами размещены три варианта медиафайлов, содержимое fallback, а также английские и французские субтитры.

<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 Level 4.2. Объяснение этого синтаксиса выходит за рамки данного урока. Джейк Арчибальд опубликовал статью как определить параметр кодека для видео AV1, если вы хотите узнать больше.

При отображении видео по умолчанию первый кадр видео показывается как стоп-кадр, когда он становится доступным. Этим можно управлять. Атрибут poster позволяет показывать источник изображения во время загрузки видео и до его воспроизведения. Если видео воспроизводится и впоследствии приостанавливается, плакат не показывается повторно.

Обязательно определите соотношение сторон видео, так как при загрузке видео разница в размерах плаката и видео приведет к размытию и перерисовке.

Всегда включайте атрибут boolean controls. Это делает видимыми элементы управления, позволяя пользователям управлять уровнем звука, полностью отключать звук и разворачивать видео в полноэкранный режим. Если опустить controls, то пользователь будет испытывать неприятные ощущения, особенно если включен булевский атрибут autoplay. Обратите внимание, что некоторые браузеры не будут следовать директиве атрибута autoplay, если опущен атрибут boolean 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>

Фоновые видеоролики недоступны. Контент не должен передаваться с помощью фоновых видеороликов без предоставления пользователям полного контроля над воспроизведением и доступа ко всем титрам. Поскольку этот видеоролик носит чисто декоративный характер, он включает ARIA-роль none и не содержит никакого вспомогательного контента. Чтобы улучшить работу всегда выключенных видеороликов, удалите звуковую дорожку из своих медиаисточников.

Если видео воспроизводится в течение пяти секунд или менее, рекомендации по обеспечению доступности не требуют наличия механизма паузы, но все, что имеет атрибут boolean 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. API Media Capture and Streams и MediaDevices можно использовать для записи звука с микрофона пользователя или записи экрана пользователя. API Web Audio API позволяет манипулировать живым и предварительно записанным звуком, а также передавать, сохранять или отправлять звук в элемент <audio>.

Источник¶

Audio and Video