К этому моменту вы уже точно познакомились со вставкой изображений в HTML-документ. А что с медиафайлами? Как сервисы позволяют нам слушать музыку и смотреть фильмы прямо на сайте? Раньше для этого было необходимо встраивать в страницу Flash Player от Adobe. На данный момент, все корпорации отказываются от этого способа и слишком поздно его рассматривать.
<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 при задании значения в процентах, всегда берётся ширина этого блока. Именно из-за этого и работает наш пример.
Изучить его подробнее можно тут: https://codepen.io/artik-man/pen/qBdgoKO
Что ещё почитать?
Для более плотного ознакомления с этими тегами, рекомендую почитать MDN: <audio> и MDN: <video>.
Эту и другие статьи можно почитать в моём практическом руководстве HTML Practice: https://artik-man.github.io/HTML-Practice/
Если у вас возникли идеи для новой главы этой книги, присылайте issue на GitHub: https://github.com/Artik-Man/HTML-Practice/issues