<audio>

Благодаря тегу audio, мы можем воспроизводить звуки на странице. Этот тег можно использовать как одиночно, так и совместно с тегом source. В тегах source можно указывать разные одинаковые звуки в разных форматах для обеспечения наибольшей поддержки. Звук может быть представлен в одном из следующих форматов: mp3, ogg, wav, aac. Наибольшую поддержку на данный момент имеет формат mp3. Рассмотрим примеры:

<audio src="sound.mp3" controls></audio>
<audio contols autoplay>
  <source src="sound.mp3" type="audio/mpeg" >
  <source src="sound.ogg " type="audio/ogg" >
</audio>

Как видите, тег source обязан иметь путь к файлу в атрибуте src, а так же mime-тип, содержащийся в атрибуте type. Если использовать тег audio без source, то он обязан иметь атрибут src, значением которого будет путь к файлу.

Кроме того, тег audio может содержать следующие атрибуты:

• controls - добавляет элементы управления (пауза/воспроизведение, громкость, пр.);
• autoplay - проигрывает звук после загрузки страницы;
• loop - циклично повторяет звук;
• preload - предзагружает аудиофайл до того, как пользователь нажал на воспроизведение.

<video>

Как это следует из названия, тег video служит для вставки видео на страницу. В отличие от тега audio, его нельзя использовать без source.

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

Здесь всё очень похоже на то, что есть в теге audio, но поддерживаемых атрибутов больше. Рассмотрим некоторые из них:

• controls - добавляет элементы управления (пауза/воспроизведение, громкость, на весь экран, пр.);
• autoplay - проигрывает видео после загрузки страницы (почти никогда не работает без атрибута muted);
• muted - воспроизводит видео без звука;
• loop - циклично проигрывает видео;
• preload - предзагружает видеофайл до того, как пользователь нажал на воспроизведение;
• poster - позволяет указать изображение заставки.

Существует три наиболее поддерживаемых видео-формата: mp4, webm, ogv, наибольшее распространение среди которых получил mp4, незначительно обогнав webm.

CSS и пропорции

Иногда требуется задать высоту видео ещё перед его загрузкой, притом, что ширина тоже неизвестна. К примеру, ширина видео будет равна ширине какого-то контейнера, а ширина этого контейнера зависит от кучи других параметров. Для решения этой проблемы, нам понадобится знать лишь соотношение сторон видеофайла. Почти всегда он равен 16/9 или 4/3, но бывают и исключения. Итак, как динамически вычислить высоту ролика до его загрузки, имея только его aspect-ratio (соотношение сторон)? Для этого будет необходимо создать для видео внешний контейнер с position: relative, самому тегу <video> задать position: absolute, а так же передать с помощью CSS-переменных соотношение сторон.

Рассмотрим код:

<div class="video" style="--aspect-ratio: calc(16 / 9)">
  <video>
    <source src="....mp4" type="video/mp4">
  </video>
</div>

И CSS:

.video {
  position: relative;
  padding-top: calc(100% / var(--aspect-ratio, 1.77));
}
.video video {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
}

Что здесь происходит? Мы задаём padding-top или padding-bottom у контейнера, содержащего видео равным его ширине делённой на соотношение сторон. Дело в том, что в свойстве padding при задании значения в процентах, всегда берётся ширина этого блока. Именно из-за этого и работает наш пример.

Изучить его подробнее можно тут:

Что ещё почитать?

Для более плотного ознакомления с этими тегами, рекомендую почитать MDN: <audio> и MDN: <video>.