Source

The media source specifies the location of an audio or video resource.

Syntax

The syntax for representing this component varies depending on the authoring format:

Authoring format Syntax and example
XDITA

<media-source>

<audio autoplay="false" controls="true" loop="false"
       muted="false">
        <desc>Theme song for the LwDITA podcast</desc>
        <fallback>
          <p>The theme song is not available.</p>
        </fallback>
        <media-source href="theme-song.mp3"/>
        <media-track srclang="en" href="theme-song.vtt"/>
</audio>
HDITA

<source>

<audio title="Theme song for the LwDITA podcast" controls>
  <source src="theme-song.mp3">
  <track src="theme-song.vtt" kind="captions" srclang="en">
  <p data-class="fallback">The theme song is not available.</p>
</audio>
MDITA

There is no specific support in the MDITA core profile. If needed, use an HDITA snippet.

Usage information

The media source is modeled on the <source> element used in HTML5 media elements.

Rendering expectations

When multiple <media-source> components are present, the user agent evaluates them in document order and selects the first resource that can be played.

Attributes

The available attributes vary based on the authoring format:

XDITA and HDITA
The following attributes are available on this element: link relationship attributes, localization attributes, universal attributes, and @keyref.
MDITA
For the MDITA core profile, the equivalent of the XDITA @keyref attribute is supported. For the MDITA extended profile, attributes can be specified by using the HDITA representation.

Examples

Figure 1. XDITA example

The following example demonstrates the use of source in an XDITA topic.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE topic PUBLIC "-//OASIS//DTD LIGHTWEIGHT DITA Topic//EN" "lw-topic.dtd">
<topic id="sensei-promise">
  <title>The Sensei Sushi Promise</title>
  <body>
    <video height="300px"
      loop="false"
      muted="false"
      poster="sensei-video.jpg"
      width="400px">
      <desc>Video about the Sensei Sushi promise.</desc>
      <fallback>
        <image href="video-not-available.png">
          <alt>This video cannot be displayed.</alt>
        </image>
      </fallback>
      <media-source href="sensei-video.mp4"/>
      <media-source href="sensei-video.ogg"/>
      <media-source href="sensei-video.webm"/>
      <media-track srclang="en" value="sensei-video.vtt"/> 
    </video>    
  </body>
</topic>
Figure 2. HDITA example

The following example demonstrates the use of source in an HDITA topic.

<!DOCTYPE html>
<title>The Sensei Sushi Promise</title>
<body>
  <article id="sensei-promise">
  <h1>The Sensei Sushi Promise</h1>
  <video height="300" width="400" title="Video about the Sensei Sushi promise" controls poster="sensei-video.jpg">
  <source src="sensei-video.mp4"/>
  <source src="sensei-video.ogg"/>
  <source src="sensei-video.webm"/> 
  <track srclang="en" src="sensei-video.vtt"/>
  <img src="video-not-available.png" alt="This video cannot be displayed."/>
  </video>
  </article>
</body>