Добавление фото, видео и аудио

Когда на любом сайте присутствует много информации(текста), но нет фотографий либо видео, сайт получается очень простым и однотонным. Для этого иногда фотографии могут придать смысл тексту и с помощью видео оживит сайт. Для добавления фотографий нужно использовать тег <img>.

Тег <img> одиночный, у него нет закрывающей пары. Ссылка на картинку и другие параметры задаются с помощью атрибутов. Src является обязательным атрибутом. В качестве значения указывается адрес картинки. Абсолютная или относительная ссылка до файла в любом допустимом формате. Alt тоже является обязательным атрибутом. Текст в alt называется альтернативным описанием картинки и рассказывает словами, что изображено на картинке. Это полезно, если картинка не загружается или пользователь не видит изображения.

Иногда бывает так - что нам нужно отрезать какую-то часть либо изменить форму картинки. Для этого можно использовать свойство clip-path. Сlip-path создаёт ограниченную область, которая определяет какая часть элемента должна быть видна. То что находится снаружи, видно, а то что внутри – скрыто. Например, чтобы сделать круглым, нужно использовать атрибут circle, но прежде всего зададим width и height:

Есть очень много видов для изменения картинки. Чтобы не сидеть и пытаться понять как писать чтобы было красиво, можете посмотреть генератор для создания таких фигур: Clippy.

Для того чтобы изменить цвет, контрастность картинки можете использовать свойство filter. Свойство filter позволяет использовать к элементам различные графические эффекты, которые позволяют сделать их более выразительными. Если вы хотите сделать что-то необычное, то можете покрасить элемент в сепию, добавить ему необычную тень и Т.П. Наводись на картинку снизу и увидишь как будет выглядеть сепия в деле:

Фильтр — очень мощный инструмент, он позволяет реализовать многие дизайнерские идеи при помощи одной строчки кода. Фильтры можно применить не только к картинкам, но и к любым непустым элементам. Про то что же такое :hover поговорим чуточку позже. А пока что давайте поговорим про тег <video>. Тег - <video> добавляет на страницу видеоплейер, способный воспроизвести одно или несколько видео. Тег <video> всегда закрывается при помощи парного тега <video>. Внутри контейнера <video> можно задать адрес видео, используя тег <source src="URL"> или атрибут src. Иногда бывает, что какой-то браузер не поддерживает какой-то формат. Таким образом, в <video> можно добавить несколько файлов в разных форматах. Будет выглядеть таким образом:

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

Как правило, controls — добавляет стандартные элементы управления видеоплейером: кнопку воспроизведения и паузы полосу прокрутки уровень громкости полноэкранный режим или другие. Возможность воспроизводить автоматически видео, которое происходит при запуске страницы — autoplay. Видео воспроизводится автоматически после загрузки сайта. Но в некоторых браузерах уже не работает из-за коварности этого параметра. Может заработать если с ним будет параметр muted. Muted — видео начнёт играть без звука, пока его не включит пользователь. Loop — это зацикливание воспроизведения видео, поэтому оно снова начинается после завершения. Playsinline — контролирует воспроизведение видео на мобильных устройствах. В большинстве случаев видео открывается в полноэкранном режиме, но этот атрибут позволяет ограничить это поведение и оставить видео внутри элемента. Poster — URL-адрес картинки, которая будет показываться, пока видео не загрузится. Это обложка ролика. Если её не будет, то, пока не загрузится первый кадр, на месте видео пользователь увидит чёрный прямоугольник.

Если будем использовать все параметры, то будет выглядеть подобным образом:

На видео тоже можно использовать clip-path:

Иногда бывают случаи когда нужно добавлять субтитры. Для этого можно использовать тег <track>. У него свои параметры и атрибуты. Kind указывает тип дорожки, src путь к файлу, srclang язык дорожки. Для добавления субтитров нужно вписать в kind: subtitles или captions. Subtitles специально предназначены для дублирования звуковой дорожки фильма в виде текстового текста на языке оригинала для глухих людей. Также возможно иметь перевод на другие языки, для тех не знакомых с оригинальным текстом. Обычно текст субтитров выводится поверх видео. Captions Передача диалогов, звуковых эффектом и музыкой в виде текста для случаев, когда звук недоступен или глухие пользователи.

Теперь давайте поговорим про добавление аудио файлов на сайт. Очень редко можно увидит музыку на сайте, но не рассказать не можем. Тег <audio> позволяет добавить на страницу аудио плеер, который воспроизводит звуковой файл. Вы можете добавить несколько форматов одного файла для того, чтобы браузер воспроизвел тот тип формата, который поддерживается — для этого нужно использовать вложенные теги <source>. <Audio> очень похож своими параметрами. У него также есть: controls, autoplay, loop, muted и они делают то же самое что и в <video>. У <audio> нет постера(poster) потому что ему это даже не нужно 😅.

Аудио плеер также можно отредактировать и сделать более привлекательным.