Элементы <source> и <track>

8.1 Элемент <source>

Элементы <source> и <track> играют важную роль в HTML5, обеспечивая поддержку различных форматов мультимедиа и улучшая доступность контента. Рассмотрим их подробнее.

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

Синтаксис

    
      <source src="URL" type="MIME-type">
    
  

Атрибуты

• src: указывает путь к мультимедийному файлу
• type: указывает тип файла и его MIME-тип. Это помогает браузеру определить, поддерживает ли он данный формат

Примеры использования:

Пример 1: Внутри элемента <video>

В этом примере браузер попытается воспроизвести первый поддерживаемый формат.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.webm" type="video/webm">
        <source src="movie.ogv" type="video/ogg">
        Ваш браузер не поддерживает воспроизведение видео.
      </video>
    
  

Пример 2: Внутри элемента <audio>

    
      <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.ogg" type="audio/ogg">
        Ваш браузер не поддерживает воспроизведение аудио.
      </audio>
    
  

Пример 3: Внутри элемента <picture>

    
      <picture>
        <source srcset="image-320w.jpg" media="(max-width: 320px)">
        <source srcset="image-640w.jpg" media="(max-width: 640px)">
        <source srcset="image-1280w.jpg" media="(max-width: 1280px)">
        <img src="image-1280w.jpg" alt="Пример изображения">
      <picture>
    
  

Преимущества использования <source>

• Кросс-браузерная совместимость: позволяет указать несколько форматов, что гарантирует воспроизведение в разных браузерах
• Оптимизация под устройства: возможность указать разные файлы для разных устройств и условий

8.2 Элемент <track>

Элемент <track> используется для добавления текстовых дорожек к мультимедийному контенту, такому как субтитры, субтитры для глухих или слабослышащих, описания, главы и метаданные. Он располагается внутри элементов <audio> или <video>.

Синтаксис

    
      <track src="URL" kind="type" srclang="language" label="label">
    
  

Атрибуты

1. src: указывает путь к файлу текстовой дорожки.
2. kind: определяет тип текстовой дорожки. Возможные значения:
   • subtitles: субтитры для перевода диалогов
   • captions: субтитры для глухих или слабослышащих, включающие описания звуков
   • descriptions: аудиоописания для слабовидящих
   • chapters: главы для навигации по мультимедийному контенту
   • metadata: метаданные, которые могут быть использованы JavaScript
3. srclang: определяет язык текстовой дорожки (например, en для английского, es для испанского).
4. label: описательное название текстовой дорожки, которое отображается в меню выбора дорожек.
5. default: указывает, что данная дорожка должна быть включена по умолчанию

Примеры использования:

Пример 1: Субтитры к видео

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

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
        <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
        Ваш браузер не поддерживает воспроизведение видео.
      </video>
    
  

Пример 2: Субтитры для глухих или слабослышащих

Эта конфигурация добавляет дорожку субтитров для глухих или слабослышащих на английском языке.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <track src="subtitles_en.vtt" kind="captions" srclang="en" label="subtitles">
        Ваш браузер не поддерживает воспроизведение видео.
      </video>
    
  

Преимущества использования <track>

• Улучшение доступности: субтитры и описания делают контент доступным для глухих, слабослышащих и слабовидящих пользователей
• Поддержка многоязычности: возможность добавления субтитров на разных языках
• Дополнительная информация: главы и метаданные позволяют организовать и структурировать мультимедийный контент

8.3 Формат файлов для текстовых дорожек

Текстовые дорожки обычно сохраняются в формате WebVTT (Web Video Text Tracks). Этот формат поддерживается большинством современных браузеров и легко читается как машинами, так и людьми.

Пример файла WebVTT (subtitles_en.vtt)

    
      WEBVTT
      1
      00:00:00.000 --> 00:00:05.000
      Welcome to our video presentation.

      2
      00:00:05.000 --> 00:00:10.000
      We hope you find this informative and enjoyable.
    
  

Примеры комплексного использования элементов <source> и <track>

    
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>Видео с несколькими источниками и текстовыми дорожками</title>
        </head>
        <body>
          <h1>Пример видео с несколькими источниками и текстовыми дорожками</h1>
          <video controls width="600" poster="posterimage.jpg">
            <source src="movie.mp4" type="video/mp4">
            <source src="movie.webm" type="video/webm">
            <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
            <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
            <track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions">
            <track src="descriptions_en.vtt" kind="descriptions" srclang="en" label="English Descriptions">
            Your browser does not support the video element.
          </video>
        </body>
      </html>
    
  

1

Задача

Модуль 1: Web Core, 4 уровень, 7 лекция

Недоступна

Видео и источники

Видео и источники

Открыть

1

Задача

Модуль 1: Web Core, 4 уровень, 7 лекция

Недоступна

Видео и субтитры

Видео и субтитры

Открыть