Articles
Введение в HTML
Теги, связанные с медиа

Теги, связанные с медиа

Эта статья объясняет теги, связанные с медиа.

Объясняет, как описывать изображения, видео, аудио и т. д. в HTML, а также работать со сворачиваемыми элементами и встроенными фреймами.

YouTube Video

Теги, связанные с медиа

Тег <img>

Description of the image 
1<img src="/images/image.jpg" alt="Description of the image" width="200">
  • Тег <img> используется для вставки изображений. Атрибут src указывает путь к изображению, а атрибут alt предоставляет описание, если изображение не может быть отображено.

Теги <figure> и <figcaption>

A beautiful scenery
A beautiful scenery
1<figure>
2    <img src="/images/image.jpg" alt="A beautiful scenery" width="200">
3    <figcaption>A beautiful scenery</figcaption>
4</figure>
  • Тег <figure> группирует медиа-контент, например, изображения или иллюстрации, вместе с подписью, используя тег <figcaption>.

Тег <picture>

Responsive image 
1<picture>
2    <source media="(min-width: 800px)" srcset="/images/large.jpg">
3    <source media="(min-width: 400px)" srcset="/images/medium.jpg">
4    <img src="/images/small.jpg" alt="Responsive image" width="200">
5</picture>

  • Тег <picture> используется для поддержки адаптивных изображений, позволяя выбирать подходящее изображение в зависимости от условий отображения.

  • Атрибут media указывает условия в том же формате, что и медиазапросы CSS.

    • Вы можете указать такие условия, как минимальная ширина (min-width), максимальная ширина (max-width), или ориентация экрана (orientation).

  • В этом примере следующие изображения отображаются в зависимости от ширины экрана.

    • Если ширина экрана 800px или больше, отображается large.jpg.
    • Если ширина экрана от 400px до 800px, отображается medium.jpg.
    • Если ширина экрана меньше 400px, отображается small.jpg (изображение в теге <img>).

Тег <canvas> 

1<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
2<script>
3    var canvas = document.getElementById('myCanvas');
4    var ctx = canvas.getContext('2d');
5    ctx.fillStyle = "#FF0000";
6    ctx.fillRect(10, 10, 150, 100);
7</script>
  • Тег <canvas> предоставляет область, где можно рисовать динамическую графику с помощью JavaScript.

Тег <map>

Example Map Area 1 
1<img src="/images/example.jpg" usemap="#example-map" alt="Example Map">
2<map name="example-map">
3    <area shape="rect" coords="34,44,270,350" alt="Area 1" href="https://codesparklab.com">
4</map>
  • Тег <map> используется для определения карты изображения. Кликабельные области на карте определяются с помощью тега <area>. Это позволяет сделать отдельные части изображения кликабельными, ведущими на ссылки.
  • Укажите имя связанного элемента карты (<map> тега) в атрибуте usemap тега <img>, добавив префикс #.
  • Правильно указывая атрибут alt тега <area>, вы можете улучшить доступность для пользователей с нарушениями зрения.

Тег <embed> 

1<embed src="movie.mp4" width="300" height="200">
  • Тег <embed> используется для встраивания внешнего контента, такого как PDF, видео или аудио.

Тег <video> 

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>
  • Тег <video> используется для вставки видео-контента. Вы можете указать несколько форматов с помощью тега <source>.
1<video controls width="300" preload="none">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>
  • Атрибут preload позволяет указать, сколько видео должно быть загружено браузером до начала воспроизведения.
    • auto указывает браузеру предварительно загрузить весь медиафайл. Это может уменьшить задержку при запуске воспроизведения, но данные могут быть загружены, даже если пользователь не воспроизводит медиафайл.
    • metadata загружает только метаданные медиафайла (например, длительность, информация о дорожках и т.д.). Данные самого медиафайла не загружаются до тех пор, пока пользователь не начнет воспроизведение. Этот вариант подходит, если вам нужна краткая информация о медиафайле.
    • none не выполняет предварительную загрузку медиафайла. Медиафайлы не загружаются, пока не начнется воспроизведение. Этот вариант подходит, если вы хотите минимизировать использование данных.

Тег <audio> 

1<audio controls>
2    <source src="sound.mp3" type="audio/mpeg">
3    <source src="sound.ogg" type="audio/ogg">
4    Your browser does not support the audio element.
5</audio>
  • Тег <audio> используется для вставки аудио-контента. Тег <source> поддерживает несколько форматов.
  • Как и тег <video>, атрибут preload может использоваться для указания того, сколько аудио должно быть загружено перед началом воспроизведения.

Тег <track> 

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
4    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
5    Your browser does not support the video tag.
6</video>
  • Тег <track> используется для указания текстовых дорожек, таких как субтитры и подписи. Его можно использовать внутри тегов <audio> или <video>.
  • Атрибут kind позволяет указать назначение дорожки (например, субтитры, подписи, главы и т.д.). Вы можете указать следующие значения.
    • subtitles предоставляют субтитры, которые переводят содержание видео или аудио и делают его более понятным для зрителей. Основная цель — прямой перевод аудио.
    • captions предоставляют дополнительную информацию, такую как музыка и звуковые эффекты, для людей с нарушениями слуха, в дополнение к аудио.
    • descriptions — это дорожки, которые описывают визуальное содержание видео, например, действия и пейзажи, для слабовидящих людей.
    • chapters предоставляют маркеры глав (названия глав), чтобы указать конкретные моменты внутри видео.
    • metadata предоставляет дополнительную информацию для анализа или обработки медиафайла, но не отображается пользователям.

Тег <iframe> 

1<iframe src="https://codesparklab.com" width="300" height="200"></iframe>
  • Тег <iframe> используется для встраивания других HTML-страниц или внешнего контента (например, веб-сайтов, видео или документов) на текущую страницу. Часто используется для встраивания видео с YouTube на страницу.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Теги, связанные с таблицамиТеги, связанные с формами