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

This section is non-normative.

Example 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>
Example 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>