Елементи <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>