Elements <source> and <track>

8.1 The <source> Element

The <source> and <track> elements play a big role in HTML5, providing support for various multimedia formats and enhancing content accessibility. Let's dive deeper into them.

The <source> element is used within <audio>, <video>, and <picture> elements to specify different sources of multimedia content. This allows browsers to pick the most suitable format for playback, ensuring cross-browser compatibility and support for different devices.

Syntax

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

Attributes

• src: specifies the path to the multimedia file
• type: specifies the file type and its MIME type. This helps the browser determine if it supports this format

Usage examples:

Example 1: Inside a <video> element

In this example, the browser will try to play the first supported format.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.webm" type="video/webm">
        <source src="movie.ogv" type="video/ogg">
        Your browser does not support video playback.
      </video>
    
  

Example 2: Inside an <audio> element

    
      <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.ogg" type="audio/ogg">
        Your browser does not support audio playback.
      </audio>
    
  

Example 3: Inside a <picture> element

    
      <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="Image example">
      </picture>
    
  

Advantages of using <source>

• Cross-browser compatibility: allows you to specify multiple formats, ensuring playback in different browsers
• Device optimization: ability to specify different files for different devices and conditions

8.2 The <track> Element

The <track> element is used to add text tracks to multimedia content, like subtitles, captions for the deaf or hard of hearing, descriptions, chapters, and metadata. It's placed inside <audio> or <video> elements.

Syntax

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

Attributes

1. src: specifies the path to the text track file.
2. kind: defines the type of text track. Possible values:
   • subtitles: subtitles for translating dialogues
   • captions: captions for the deaf or hard of hearing, including sound descriptions
   • descriptions: audio descriptions for the visually impaired
   • chapters: chapters for navigating multimedia content
   • metadata: metadata that can be used by JavaScript
3. srclang: specifies the language of the text track (e.g., en for English, es for Spanish).
4. label: a descriptive title for the text track displayed in the track selection menu.
5. default: indicates that this track should be enabled by default

Usage examples:

Example 1: Video subtitles

In this example, the video has two subtitle tracks: in English and Spanish. The user can choose the desired track from the 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">
        Your browser does not support video playback.
      </video>
    
  

Example 2: Captions for the deaf or hard of hearing

This setup adds a caption track for the deaf or hard of hearing in English.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <track src="subtitles_en.vtt" kind="captions" srclang="en" label="subtitles">
        Your browser does not support video playback.
      </video>
    
  

Advantages of using <track>

• Improved accessibility: subtitles and descriptions make content accessible to deaf, hard of hearing, and visually impaired users
• Multilingual support: ability to add subtitles in different languages
• Additional information: chapters and metadata allow you to organize and structure multimedia content

8.3 File Format for Text Tracks

Text tracks are usually saved in WebVTT (Web Video Text Tracks) format. This format is supported by most modern browsers and is easily readable by both machines and humans.

Example of a WebVTT file (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.
    
  

Examples of comprehensive use of <source> and <track> elements

    
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>Video with Multiple Sources and Text Tracks</title>
        </head>
        <body>
          <h1>Video Example with Multiple Sources and Text Tracks</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

Task

Frontend SELF EN, level 7, lesson 3

Locked

Video and Sources

Video and Sources

Open

1

Task

Frontend SELF EN, level 7, lesson 3

Locked

Video and Subtitles

Video and Subtitles

Open