0Pricing
HTML Academy · Урок

Элемент source для нескольких форматов

Предоставляйте резервные форматы с помощью элемента source

«Элемент source для нескольких форматов» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Зачем нужно несколько форматов

Разные браузеры поддерживают разные аудио- и видеокодеки:

  • WebM (VP9/VP8) — Chrome, Firefox, Edge (но не Safari)
  • MP4 (H.264) — все браузеры (универсальный формат)
  • OGG — Firefox, Chrome (но не Safari)
  • OPUS — Chrome, Firefox, Edge (но не Safari)

Элемент <source> позволяет указать несколько форматов для запасного варианта.

Элемент «источник» внутри аудио

Указывайте несколько аудиоформатов:

<audio controls>
  <!-- Browser picks the first format it supports: -->
  <source src="podcast.opus" type="audio/ogg; codecs=opus">
  <source src="podcast.ogg" type="audio/ogg; codecs=vorbis">
  <source src="podcast.mp3" type="audio/mpeg">
  <!-- Fallback text if none supported: -->
  <p>Download: <a href="podcast.mp3">podcast.mp3</a></p>
</audio>

Элемент «источник» внутри видео

Указывайте несколько видеоформатов:

<video controls width="1280" height="720" poster="thumbnail.jpg">
  <source src="tutorial.webm" type="video/webm">
  <source src="tutorial.mp4" type="video/mp4">
  <p>Your browser doesn't support HTML5 video.
     <a href="tutorial.mp4">Download the video</a></p>
</video>

Атрибут type у элемента «источник»

Атрибут type сообщает браузеру тип MIME и кодек:

<!-- Full MIME type with codec parameter: -->
<source src="video.webm" type="video/webm; codecs=vp9,vorbis">
<source src="video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
<source src="audio.ogg" type="audio/ogg; codecs=vorbis">

<!-- Simplified (browser may need to probe): -->
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">

Как работает выбор источника

Браузер проверяет элементы источников по порядку:

  1. Читает значение type первого источника
  2. Если он может воспроизводить этот тип, загружает его и использует
  3. Если нет, переходит к следующему источнику
  4. Если ни один источник не подходит, отображает запасное содержимое

Ставьте предпочтительный формат первым (например, WebM для производительности в Chrome и Firefox).

Атрибут media у элемента «источник»

Атрибут media позволяет предоставлять разные форматы для разных областей просмотра:

<video controls>
  <!-- Mobile: smaller file -->
  <source
    src="video-480.mp4"
    type="video/mp4"
    media="(max-width: 768px)"
  >
  <!-- Desktop: full quality -->
  <source
    src="video-1080.mp4"
    type="video/mp4"
  >
</video>

Рекомендуемый порядок форматов

Оптимальный порядок источников для максимальной совместимости и производительности:

<video controls>
  <!-- AV1 in WebM: best compression, modern browsers -->
  <source src="video.av1.mp4" type="video/mp4; codecs=av01">

  <!-- VP9 in WebM: Chrome/Firefox/Edge -->
  <source src="video.webm" type="video/webm">

  <!-- H.264 in MP4: universal fallback -->
  <source src="video.mp4" type="video/mp4">
</video>

Рекомендации по аудиоформатам

Рекомендации по аудиокодекам:

  • OPUS в WebM — лучшее соотношение качества и размера; Chrome, Firefox, Edge
  • AAC в MP4 — универсальный вариант; Safari, Chrome, Firefox, Edge
  • MP3 — самая широкая совместимость; используйте в качестве последнего запасного варианта

Адаптивное видео с srcset

Для видео используйте media у элемента источника, чтобы адаптировать загрузку к пропускной способности:

<video controls poster="thumbnail.jpg">
  <source
    src="video-720.webm"
    type="video/webm"
    media="(min-width: 1024px)"
  >
  <source
    src="video-360.webm"
    type="video/webm"
  >
  <source src="video-720.mp4" type="video/mp4" media="(min-width: 1024px)">
  <source src="video-360.mp4" type="video/mp4">
</video>

Проверка canPlayType

Проверяйте поддержку браузером кодеков с помощью JavaScript:

const video = document.createElement('video');

console.log(video.canPlayType('video/webm; codecs=vp9'));
// '' = no, 'maybe' = possibly, 'probably' = likely yes

console.log(video.canPlayType('video/mp4; codecs=avc1.42E01E'));
// 'probably' on most modern browsers

Запасное содержимое

Всегда добавляйте запасное содержимое внутрь audio/video:

<video controls width="800" height="450">
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">

  <!-- Fallback for browsers without video support: -->
  <p>
    Your browser does not support HTML5 video.
    <a href="demo.mp4">Download the video</a> instead.
  </p>
</video>

Быстрая проверка

В каком порядке следует перечислять элементы источников?

Итоги: элемент «источник»

Основные сведения об элементе «источник»:

  • <source src type> внутри audio/video предоставляет альтернативные форматы
  • Браузер выбирает первый подходящий источник
  • Сначала указывайте самый современный формат; MP4/AAC используйте как универсальный запасной вариант
  • После всех источников добавляйте запасной текст или ссылку внутри audio/video
  • Используйте media у элемента источника для выбора видео с учётом области просмотра

Часто задаваемые вопросы

Урок «Элемент source для нескольких форматов» бесплатный?

Да — полный текст урока «Элемент source для нескольких форматов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Элемент source для нескольких форматов»?

Предоставляйте резервные форматы с помощью элемента source Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Элемент source для нескольких форматов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Элемент audio: src controls loop autoplay
  2. Элемент video и соотношение сторон
  3. Элемент source для нескольких форматов
  4. Субтитры с track и WebVTT
← Назад к HTML Academy