Elementy <source> i <track>

8.1 Element <source>

Elementy <source> i <track> odgrywają ważną rolę w HTML5, zapewniając wsparcie dla różnych formatów multimediów i poprawiając dostępność treści. Poznajmy je bliżej.

Element <source> używa się wewnątrz elementów <audio>, <video>, i <picture> do wskazywania różnych źródeł treści multimedialnych. Pozwala to przeglądarkom wybierać najbardziej odpowiedni format do odtwarzania, zapewniając kompatybilność między przeglądarkami i wsparcie dla różnych urządzeń.

Składnia

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

Atrybuty

• src: wskazuje ścieżkę do pliku multimedialnego
• type: wskazuje typ pliku i jego MIME-type. Pomaga to przeglądarce określić, czy wspiera dany format

Przykłady użycia:

Przykład 1: Wewnątrz elementu <video>

W tym przykładzie przeglądarka spróbuje odtworzyć pierwszy wspierany format.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.webm" type="video/webm">
        <source src="movie.ogv" type="video/ogg">
        Twoja przeglądarka nie wspiera odtwarzania video.
      </video>
    
  

Przykład 2: Wewnątrz elementu <audio>

    
      <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.ogg" type="audio/ogg">
        Twoja przeglądarka nie wspiera odtwarzania audio.
      </audio>
    
  

Przykład 3: Wewnątrz elementu <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="Przykład obrazu">
      <picture>
    
  

Zalety użycia <source>

• Kompatybilność między przeglądarkami: pozwala wskazać kilka formatów, co gwarantuje odtwarzanie w różnych przeglądarkach
• Optymalizacja dla urządzeń: możliwość wskazania różnych plików dla różnych urządzeń i warunków

8.2 Element <track>

Element <track> służy do dodawania ścieżek tekstowych do treści multimedialnych, takich jak napisy, napisy dla niesłyszących lub słabosłyszących, opisy, rozdziały i metadane. Umieszcza się go wewnątrz elementów <audio> lub <video>.

Składnia

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

Atrybuty

1. src: wskazuje ścieżkę do pliku ścieżki tekstowej.
2. kind: określa typ ścieżki tekstowej. Możliwe wartości:
   • subtitles: napisy do tłumaczenia dialogów
   • captions: napisy dla niesłyszących lub słabosłyszących, zawierające opisy dźwięków
   • descriptions: audiodeskrypcje dla słabowidzących
   • chapters: rozdziały do nawigacji po treściach multimedialnych
   • metadata: metadane, które mogą być używane przez JavaScript
3. srclang: określa język ścieżki tekstowej (np. en dla angielskiego, es dla hiszpańskiego).
4. label: opisowa nazwa ścieżki tekstowej, która wyświetla się w menu wyboru ścieżek.
5. default: wskazuje, że dana ścieżka powinna być włączona domyślnie

Przykłady użycia:

Przykład 1: Napisy do video

W tym przykładzie wideo ma dwie ścieżki napisów: w języku angielskim i hiszpańskim. Użytkownik może wybrać potrzebną ścieżkę z menu.

    
      <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">
        Twoja przeglądarka nie wspiera odtwarzania video.
      </video>
    
  

Przykład 2: Napisy dla niesłyszących lub słabosłyszących

Ta konfiguracja dodaje ścieżkę napisów dla niesłyszących lub słabosłyszących w języku angielskim.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <track src="subtitles_en.vtt" kind="captions" srclang="en" label="subtitles">
        Twoja przeglądarka nie wspiera odtwarzania video.
      </video>
    
  

Zalety użycia <track>

• Poprawa dostępności: napisy i opisy sprawiają, że treści są dostępne dla niesłyszących, słabosłyszących i słabowidzących użytkowników
• Wsparcie dla wielu języków: możliwość dodania napisów w różnych językach
• Dodatkowe informacje: rozdziały i metadane pozwalają zorganizować i ustrukturyzować treści multimedialne

8.3 Format plików dla ścieżek tekstowych

Ścieżki tekstowe zazwyczaj zapisywane są w formacie WebVTT (Web Video Text Tracks). Ten format jest wspierany przez większość współczesnych przeglądarek i łatwo czytelny zarówno przez maszyny, jak i ludzi.

Przykład pliku 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.
    
  

Przykłady kompleksowego użycia elementów <source> i <track>

    
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>Video z kilkoma źródłami i ścieżkami tekstowymi</title>
        </head>
        <body>
          <h1>Przykład video z kilkoma źródłami i ścieżkami tekstowymi</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>