Мультимедиа

На теге <img> и прочих, ему сопутствующих, мультимедиа в вебе не заканчивается, а наоборот, лишь начинается. Существует ещё несколько тегов, при помощи которых вы можете придать своему сайты совершенно потрясающий вид.

<video>
— (с англ. video — видео) предназначен для встраивания видео на сайт. Этот тег по отношению к подключаемому файлу работает совершенно идентично тому, как работает <img>: сам тег является видимым контейнером, имеющим ширину, высоту и пр., а в атрибуте src указывается видеофайл-исходник, содержимое которого и будет отображено внутри тега. Самый простой пример подключения видео на страницу представлен ниже (можете скопировать в свой html файл):

                

                <video src="https://babyfrontent.ru/lessons/cat-walks.mp4" autoplay muted></video>

В результате мы увидим прогуливающегося кота:

Размер тега <video>, как вы уже догадались, берётся из исходного файла, если в CSS не указано иное. Аналогично <img> при указании width или height размеры тега будут увеличиваться\уменьшаться пропорционально. Единственным отличием от <img> тут является то, что при указании одновременно width и height содержимое не будет растягиваться, однако и это поведение можно повторить, указав определённое CSS-свойство. Для <video> крайне важны его атрибуты. Помимо глобальных, есть собственные:

autoplay
— логический атрибут, отвечает за автовоспроизведение видео при загрузке страницы. Синтаксис:

                

                <!-- без указания значения -->
<video src="https://babyfrontent.ru/lessons/cat-walks.mp4" autoplay muted></video>
<!-- с указанием значения -->
<video src="https://babyfrontent.ru/lessons/cat-walks.mp4" autoplay="autoplay" muted="muted"></video>

В части автовоспроизведения видео есть некоторые тонкости. По стандартам, принятым разработчиками браузеров, видео не может по умолчанию воспроизводиться со звуком. Это ограничение было введено после жалоб пользователей на громкую музыку и звуки, включающиеся автоматически на сайтах. Так, вы можете начать проигрывать видео сразу при его загрузке, однако звук у видео должен быть выключен (за это отвечает атрибут muted). Иначе видео можно будет воспроизвести только если пользователь сам нажмёт на кнопку «play». Вторая особенность — видео не воспроизводится, когда находится вне области просмотра. Это означает, что видео, находящееся внизу страницы, пока мы не «докрутили» до него экран, не будет воспроизводиться. Также, если мы «докрутили» до видео, оно начало воспроизводиться, а потом мы вновь пролистали страницу вверх и видео скрылось, оно будет поставлено на паузу до тех пор, пока вновь не окажется в области просмотра. Это призвано экономить ресурсы браузера и процессора вашего компьютера. Описанное поведение тега <video> может незначительно отличаться в разных браузерах.

controls
— булев атрибут, указывает, отображать ли панель управления видео — где расположены кнопки «play», «pause» и пр. Есть пара очень важных моментов, касающихся этой панели: её нельзя стилизовать при помощи CSS, а также она будет выглядеть по-разному в разных браузерах. Если вам необходимо стилизовать видеоплеер, то вы должны использовать готовые библиотеки для этого, или написать собственное решение при помощи JavaScript.

crossorigin
— совершенно идентично поведению для тега <img>

loop
— булев, отвечает за зацикленность видео. При указании этого атрибута видео будет повторяться бесконечно.

muted
— булев, отключает звук при воспроизведении видео. При этом пользователь сможет сам установить уровень громкости на панели управления видео, если она будет включена.

preload
— указывает, следует ли браузеру предварительно загружать видео, например, когда видео не находится в области просмотра и не установлен атрибут autoplay. Значения:

none — не загружать предварительно
metadata — загружать предварительно только метаданные видеофайла (продолжительность, размер и пр)
auto — видеофайл следует загружать полностью, даже если он не будет использоваться
Этот атрибут является только рекомендацией для браузера, но не правилом. Браузеры могут отступать от него по своему усмотрению!

poster
— подобно src, это URL адрес изображения-постера, которое будет показано вместо видео, пока файл-исходник загружается или пока пользователь не нажмёт на «play».

playsinline
— булев атрибут; часто на мобильных телефонах видео автоматически воспроизводится в полноэкранном режиме (поведение зависит от браузера). Чтобы это предотвратить, укажите для тега playsinline.

width,height
— аналогично, как для <img>

Подобно <picture>, <video> поддерживает множественные исходные файлы. Логика работы здесь идентичная, указываем внутри тега несколько <source> и их типы:

                

                <video controls poster="cat-walks.jpg" autoplay muted>
  <source src="cat-walks.webm" type="video/webm">
  <source src="cat-walks.mp4" type="video/mp4">
  <p>Поддержка видео в браузере отсутствует</p>
</video>

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

<track>
— (с англ. track — дорожка) используется с элементами <video> и <audio>, это синхронизированная текстовая дорожка, или, проще говоря, субтитры. Тег встраивается внутрь тегов, подобно <source>:

                

                <video controls width="250">
  <source src="cat-walks.webm" type="video/webm">
  <source src="cat-walks.mp4" type="video/mp4">
  <track default
           kind="captions"
           srclang="en"
           src="/subtitles/cat-walks_en.vtt" />
  <p>Поддержка видео в браузере отсутствует</p>
</video>

Субтитров может быть подключено несколько (на разных языках), в таком случае вы просто добавляете столько тегов <track>, сколько нужно. Атрибуты:

default
— булев, указывает, что дорожка должна быть включена по умолчанию.

kind
— указывает, как субтитры должны быть использованы:

subtitles — субтитры обеспечивают перевод контента, который не понимается зрителем, например диалог на английском языке в фильме на русском языке.
captions — подписи помимо прочего описывают невербальную информацию, например источник звука: если в фильме играет музыка, появится подпись «играет музыка» и т.д.
descriptions — полное текстовое описание происходящего в видео, этот вид субтитров подходит для слепых и слабовидящих пользователей.
chapters — включают в себя названия глав для навигации по видео.
metadata — машиночитаемые данные, не отображаемые для пользователя.

label
— видимый пользователю заголовок текстовой дорожки, отображаемые браузером при выводе списка доступных дорожек.

srclang
— язык субтитров в формате IETF BCP 47.

Более сложный пример:

                

                <video controls width="250">
  <source src="cat-walks.webm" type="video/webm">
  <source src="cat-walks.mp4" type="video/mp4">
  <track default
           kind="subtitles"
           srclang="en"
           src="/subtitles/cat-walks_en.vtt" />
  <track
           kind="subtitles"
           srclang="ru"
           src="/subtitles/cat-walks_ru.vtt" />
  <track
           kind="chapters"
           srclang="en"
           src="/subtitles/cat-walks_chapters_en.vtt" />
  <track
           kind="chapters"
           srclang="ru"
           src="/subtitles/cat-walks_chapters_ru.vtt" />
  <p>Поддержка видео в браузере отсутствует</p>
</video>

Здесь мы подключаем два видеофайла в качестве источников и четыре файла с субтитрами, на русском и английском языке. Первая пара это subtitles, другая это chapters. Они имеют разное назначение и поэтому могут быть подключены одновременно.

Субтитры имеют небольшое распространение в вебе. За несколько лет работы я ни разу не сталкивался с ними и даже не слышал, чтобы они кому-либо понадобились. Поэтому мы не будем более подробно разбирать их. Вы должны обратиться к справочнику, когда перед вами будет поставлена задача добавить субтитры к видео.

<audio>
— (с англ. audio — звукозапись) встраивает звуковой контент в документ. Работает идентично <video>>:

                

                <audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  <p>Поддержка аудио в браузере отсутствует</p>
</audio>

Всё в этом примере вам должно быть знакомо и понятно: атрибут controls, отвечающий за кнопки управления, несколько исходников разных типов в качестве <source>, сообщение для браузеров без поддержки аудио. Результат работы кода:

Обратите внимание, что <audio> имеет фиксированную ширину и высоту в 300 и 54 px в браузере Chrome, если указан атрбут controls. Если же атрибута не будет, то тег не будет иметь визуального представления вообще. Как и в случае с <video>, панель управления в разных браузерах отличается и стилизовать её нельзя. Атрибуты для тега почти такие же, как и для <video>, но работают местами немного иначе. Атрибуты poster, playsinline, width, height отсутствуют.

autoplay
— как уже было сказано, воспроизведение звука по умолчанию запрещено браузерами, поэтому начать проигрывать музыку или эффекты при загрузке страницы у вас не получится. В действительности, нет ни одного способа обойти этот запрет. Для начала воспроизведения музыки необходимо минимальное взаимодействие пользователя со страницей — клик мыши, нажатие клавиши и пр. Также, в отличие от видео, при прокрутке области просмотра вверх\вниз от тега <audio>, его вопросизведение не прерывается. Даже более — при переключении на другую вкладку браузера воспроизведение также не ставится на паузу. В каждой вкладке может играть своя музыка\звук.

Что касается субтитров для <audio>, по умолчанию они в большинстве браузеров не имеют контейнера для отображения. Чтобы выводить субтитры для <audio>, вам необходимо создать какой-либо тег для них и при помощи JavaScript вставлять в него текущий текст. Это довольно неудобно, но другого способа их отобразить нет, поскольку аудио субтитры не получили распространения и этот функционал не добавляется в новые версии браузеров.

<canvas>
— (с англ. canvas — холст для рисования) это контейнер-холст для работы на нём при помощи JavaScript. То есть в сравнении с другими тегами это пустой элемент-фон, на котором что-то может происходить. А вот что будет происходить — решать уже разработчику. Возможности канваса невероятны: он позволяет создавать анимации, приложения, игры, визуальные эффекты и пр. Он поддерживает как 2D-измерение, так и 3D. Изучать <canvas> подробно в курсе по HTML или CSS невозможно, поскольку эта тема требует продвинутого знания JavaScript. Вы можете ознакомиться с простым примером работы <canvas> в справочнике. Более интересные примеры, раскрывающие возможности канваса:

— красивый сайт, созданный в канвасе

— анимированная мини-игра для борьбы со стрессом

— визуализация довольно популярных в канвасе частиц

Ну и, в конце концов, кот, живущий на нашем сайте, тоже появляется при помощи <canvas>.

<iframe>
— (с англ. inline frame element — встроенный в рамку линейный элемент) тег, позволяющий создавать ещё одну веб страницу в пределах вашего сайта. Простой пример, открывающий в окне сайт example.com:

                

                <iframe src="https://example.com/"
    width="500"
    height="500"
></iframe>

Как видите, на веб странице появилось окно соответствующих размеров, которые мы указали в атрибутах width,height. В браузере размер получился немного больше (504 на 504), потому что тег ещё имеет рамку в 2px с каждой стороны, это значение из браузера по умолчанию. То, что отображается внутри тега — это сайт по адресу, который мы указали в атрибуте src. Вы можете взаимодействовать с ним так же, как и с любым сайтом, открытым привычным нам способом в отдельной вкладке браузера. При этом все ваши действия, совершаемые с сайтом из тега <iframe>, будут также происходить в пределах <iframe>.

Обратите также внимание на разметку, показанную в инструментах разработчика. Внутри тега <iframe> находится нечто, чего вы прежде не видели. Мы говорили, что HTML состоит из тегов, атрибутов и текста, но #document это что-то большее, это отдельный html-документ, содержащий собственные теги, тексты и пр., по всем правилам веба. Как бы получается одна страница внутри другой, и это видно в том числе в панели разработчика.

У вас может возникнуть вопрос, для чего это может нам понадобиться? Этот тег и функционал кажутся весьма странными, однако <iframe> получил огромное распространение, сейчас он используется действительно на многих сайтах. Более того, в связи с появлением всё новых разнообразных веб сервисов и с развитием веб технологий, вероятно, он станет ещё популярнее.

Пожалуй, самый распространённый способ применения <iframe> это добавление карты на сайт. Выбрав необходимую вам область в Яндекс Картах, вы можете довольно просто сгенерировать примерно следующий код, добавление которого на ваш сайт создаст карту:

                

                <div style="position:relative;overflow:hidden;">
<a href="https://yandex.ru/maps/213/moscow/?utm_medium=mapframe&utm_source=maps" style="color:#eee;font-size:12px;position:absolute;top:0px;">Москва</a>
<a href="https://yandex.ru/maps/213/moscow/?ll=37.621335%2C55.741256&utm_medium=mapframe&utm_source=maps&z=17.55" style="color:#eee;font-size:12px;position:absolute;top:14px;">Яндекс Карты — транспорт, навигация, поиск мест</a>
<iframe src="https://yandex.ru/map-widget/v1/-/CCUF4Lb3tC" width="560" height="400" frameborder="1" allowfullscreen="true" style="position:relative;"></iframe>
</div>

Как видите, мы получили карту определённой области, и эта карта отображается через <iframe>. Эта карта — уже не ваш сайт, она находится на сервере Яндекса, и при помощи волшебного тега «импортируется» со всеми своими возможностями на вашу веб страницу.

Чтобы создать такую карту, перейдите по ссылке выше на сайт и выберите область на карте, которую хотите отображать. После этого нажмите на три точки в правом верхнем углу и затем на кнопку «Поделиться»:

В появившемся окне будет две строки с кодом. Первая это URL, по которому пользователь будет видеть ту же область карты (вы можете вставить этот URL в обыкновенную ссылку). Вторая это виджет для добавления карты на ваш сайт:

Если вы скопируете виджет и добавите на свой сайт, то увидите результат, аналогичный тому, что был показан выше.

После добавления карты вы можете описать class или id для <iframe>, стилизовать его и т.д. Можно при помощи правил CSS растянуть его на всю ширину экрана и т.д.

Другой распространённый пример использования <iframe> — добавление на ваш сайт видео с Youtube. Чтобы сгенерировать необходимый код для вставки, откройте любое видео на ютубе, под видео нажмите кнопку «Поделиться»:

В открывшемся небольшом окне нажмите «Встроить»:

Вы увидите постер видео слева, а справа — необходимый вам код, и это будет тег <iframe>. Добавив его на наш сайт, мы получим не просто видеоролик со стандартными кнопками «play», «pause» и пр., которые может предложить тег <video>, а мы получим весь функционал сервиса Youtube, включая выбор качества видео, кнопки «Поделиться», «Смотреть позже» и пр.:

На самом деле, если вы вставите сгенерированный на Youtube код видео в файл html на своём компьютере и откроете его в браузере, видео, вероятно, не загрузится и вы увидите следующее:

Это ограничение может быть установлено браузерами для файлов html, открываемых локально на компьютере. Если вы загрузите такой код на хостинг, он, скорее всего, будет работать, но опять же это зависит от настроек хостинга.

Последний пример, который мы приведём, заключается в использовании тега <iframe> для вставки документов, чаще всего это pdf файлы. Они почти всегда без проблем распознаются браузерами без необходимости установки плагинов или конвертации. Код в таком случае ещё проще:

                

                <iframe src="https://babyfrontent.ru/lessons/cat-photo.pdf"
    width="500"
    height="500"
></iframe>

Вы можете попробовать скопировать его в свой локальный html файл, он будет работать. В браузере вы увидите примерно следующее:

Произошло нечто похожее, что и прежде с картой или видео. Мы указали в качестве src отдельный pdf файл, и при открытии страницы браузер загрузил его и открыл в предназначенном для него окне <iframe>.

В некоторых учебниках, а также на сайтах, статьи для которых долго не обновлялись, вы можете увидеть описание тегов <embed> и <object>, служивших также для вставки контента. В настоящее время эти теги официально признаны устаревшими и не должны использоваться! Они служили раньше для вставки игр и видеороликов (Flash технологии), плагинов, написанных на языке Java, SVG-графики и прочего. Теперь поддержка Flash официально прекращена и эти возможности удаляются из новых версий браузеров (на замену пришёл <canvas>), Java-плагины потеряли свою популярность ещё в начале 2000-х годов, а для вставки видео, pdf, SVG есть другие, более подходящие теги. Не используйте <embed> и <object>.

Атрибуты тега:

name
— уникальное имя для взаимодействия с тегом, например через ссылку <a> или форму <form>, а также через JavaScript

src
— URL ресурса\документа, который мы хотим вставить на страницу

width,height
— то же, что и для <video>,<img> и пр., ширина и высота тега. По умолчанию 300 и 150 px. Обычно изменяется при помощи CSS

Несмотря на то, что <iframe> более современный, чем его предшественники <object> и <embed>, он не лишён недостатков. Главный из них это довольно серьёзная проблема с безопасностью, однако она решаема при определённой настройке тега. Эти вопросы будут изучены в дальнейшем, в разделе продвинутого обучения. Все прочие атрибуты, применяемые к тегу, касаются как раз ограничений на его использование и влияют на безопасность сайта, поэтому они будут изучены в соответствующем уроке.

Вряд ли вы будете создавать что-то «вручную» при помощи <iframe>, т.е. писать код тега, указывать атрибуты и подключать какой-то файл. PDF обыкновенно открывается по ссылке в новой вкладке браузера, импортировать файл прямо на сайт — это редкая необходимость. Сервисы, которые вам могут понадобиться на сайте, вероятно, уже написаны кем-то и готовы к использованию, вам остаётся только выбрать подходящий, изучить документацию и добавить готовый код на свой сайт. Поэтому в подавляющем большинстве случаев, когда вы будете использовать <iframe>, вы будете просто брать готовый код виджета и копировать его на свой сайт, как мы сделали с картами или видео с Youtube.

Не путайте описанный тег и <frame>, <frameset>. Последние оказались неудачным экспериментом, давно официально признаны устаревшими и запрещены, в то время как <iframe> актуален как никогда прежде.

Домашнее задание к уроку

Домашнее задание необходимо для проверки усвоенного материала. Скачайте оба файла.
В первом находится задание для решения, а во втором готовый код для самопроверки

Задание (zip)Решение (zip)