Теги: img, audio, video, iframe
Разберемся с тегами которые помогают нам добавлять на страницу изображения и мультимедиа (аудио и видео).
IMG
<img> - позволяет нам добавлять изображения на страницу.
Атрибуты:
src - обязательный атрибут значением которого должна быть ссылка или путь к изображению.
alt - необязательный атрибут который очень полезен для повышения доступности Web, обычно он выводится браузером когда изображение не может быть показано на странице, а также его используют скрин ридеры воспроизводящие его значение пользователю.
width - необязательный атрибут, его значением используется для задания ширины изображению.
height - необязательный атрибут, его значением используется для задания высоты изображению.
* Также у тега img присутствуют другие атрибуты о которых поговорим позднее, а еще ему можно задавать все общие атрибуты (id, class, title и тд.).
Local img
<div>
<img src="./assets/img-example.jpg" alt="grapefruit" width="250px" height="250px">
</div>Img from the internet
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Orange-Whole-%26-Split.jpg/1024px-Orange-Whole-%26-Split.jpg"
alt="Img from wikipedia"
width="1024"
>Также мы можем изменять изображение для устройств с различным разрешением экрана. С помощью атрибутом srcset и sizes, как это делать разберем в уроках об адаптивности.
AUDIO
Для добавления аудио на сайт нам нужно использовать тег <audio>. Чтоб указать какой трек мы хотим использовать нам нужно указать путь к файлу трека в качестве значения атрибута src.
<audio controls src="./assets/audio.mp3">
Ваш браузер не поддерживает тег <b>audio</b>
</audio>Тег <audio> имеет достаточно много атрибутов, мы рассмотрим самые распространенные: src - путь к аудиофайлу.
controls - если атрибут указан то браузер будет пользователю элементы управления треком (перемотка, звук и тд.) .
autoplay - если указан браузер будет пытаться сразу воспроизводить трек как только он загрузился, это поведение также зависит то того на каком устройстве и в каком браузере открывается страница.
loop - зацикливание трека muted - определяет будет ли воспроизводится звук
Если нам нужно указать несколько аудио источников, то для этого предусмотрен тег <source> который мы будем вкладывать внутрь тега <audio>.
<audio controls>
<source src="foo.ogg" type="audio/ogg; codecs=vorbis"/>
<source src="./assets/audio.mp3" type="audio/mp3"/>
<source src="foo.mp3" type="audio/mpeg"/>
</audio>Браузер попытается скачать трек, который находится в первом <source>, если у него не получится, то он перейдет к следующему и так пока не найдет доступный источник, если у него не получится то тег аудио плеер на странице будет неактивен.
<audio controls>
<source src="foo.ogg" type="audio/ogg; codecs=vorbis"/>
<source src="foo.mp3" type="audio/mpeg"/>
</audio>VIDEO
Для того, чтобы добавить видео на страницу, мы будем использовать тег <video>.
<video src="./assets/video.webm" controls>
Ваш браузер не поддерживает тег <b>video</b>
</video>Тег video как и тег audio, имеет множество похожих атрибутов:
src - путь к видео файлу.
controls - если атрибут указан то браузер будет пользователю элементы управления видео (перемотка, звук и тд.).
autoplay - если указан браузер будет пытаться сразу воспроизводить видео как только оно загрузится, это поведение также зависит то того на каком устройстве и в каком браузере открывается страница.
loop - зацикливание видео.
muted - определяет будет ли воспроизводится звук.
poster - содержит ссылку на изображение которое будет показано пока видео загружается.
<video src="./assets/video.webm" poster="./assets/poster.jpg" controls>
Ваш браузер не поддерживает тег <b>video</b>
</video>Аналогично тегу <audio> мы можем определять сразу несколько источников видео с помощью тега <source> который будем вкладывать в тег <video>.
<video controls>
<source src="myVideo.mp3" type="video/mp3">
<source src="./assets/video.webm" type="video/webm">
Ваш браузер не поддерживает тег <b>video</b>
</video>Браузер попытается скачать видео, которое находится в первом <source>, если у него не получится, то он перейдет к следующему и так пока не найдет доступный источник, если у него не получится то тег аудио плеер на странице будет неактивен.
<video controls>
<source src="myVideo.mp3" type="video/mp3">
<source src="video.webm" type="video/webm">
Ваш браузер не поддерживает тег <b>video</b>
</video>IFRAME
Тег <iframe> позволяет нам вставлять одни страницы в другие, если это не запрещено источником который вы хотите вставить к себе на страницу. У тега iframe достаточно много атрибутов + к нему можно добавлять общие атрибуты которые есть у всех тегов. src - url источника который нужно вставить через iframe.
<iframe id="inlineFrameExample"
title="Inline Frame Example"
width="700"
height="400"
src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>Добавление внешней страницы в нашу страницу:
<iframe src="https://example.org"
title="iframe Example 1"
width="700"
height="400">
</iframe>Неработающий iframe:
<iframe src="https://vs-dev.info/"
title="iframe Example 1"
width="700"
height="400">
</iframe>Вставляем видео с youtube:
<iframe src="https://www.youtube.com/embed/4rOLgFCNrTg"
title="iframe Example 1"
width="700"
height="400">
</iframe>P.S. Больше уроков у меня на канале
P.P.S. Файлы с урока
