HTML DOM Source Object: Accessing Source Elements

The HTML DOM Source object represents an HTML <source> element, which is used to specify multiple media resources for <picture>, <audio>, and <video> elements. These elements allow you to provide alternative media formats for different browser compatibilities or device sizes. By utilizing the DOM Source object, you can dynamically manipulate and retrieve information about these source files using JavaScript. This article explores how to effectively access and modify <source> elements using the DOM.

What is the HTML Source Element?

The <source> element is crucial for delivering the correct media content to a webpage user. It’s primarily used within <picture>, <audio>, and <video> tags to provide different media files based on browser support, device resolution, or other conditions. This allows web developers to ensure media content is accessible and optimized for a variety of devices and browsers.

Purpose of the Source Object

The primary purpose of the HTML DOM Source object is to:

• Access Source URLs: Obtain the URL of the media file specified in the src attribute.
• Access Source Types: Retrieve the MIME type specified in the type attribute.
• Access Source Media Queries: Get the media query specified in the media attribute.
• Modify Source Attributes: Dynamically change attributes such as src, type, and media.
• Add/Remove Source Elements: Dynamically add or remove <source> elements based on various conditions.

Accessing and Manipulating <source> Elements

Let’s explore how to access and modify <source> elements using JavaScript.

Basic Structure of a <source> Element

Before we dive into examples, here’s a reminder of how <source> elements are typically structured within an HTML document.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

In this case, there are multiple source tags. The browser will use the first <source> tag it supports.

Accessing Source Elements

To access a <source> element using the DOM, you typically use methods like getElementById(), getElementsByTagName(), or querySelector(). Let’s look at some examples:

<video id="myVideo" width="320" height="240" controls>
    <source id="source1" src="video1.mp4" type="video/mp4" media="screen and (min-width: 600px)">
    <source id="source2" src="video2.webm" type="video/webm" media="screen and (max-width: 599px)">
    Your browser does not support the video tag.
</video>

<p id="output1"></p>

<script>
  const videoElement1 = document.getElementById("myVideo");
  const sourceElement1 = document.getElementById("source1");
  const outputElement1 = document.getElementById("output1");

  if(sourceElement1) {
      outputElement1.textContent = "Source URL: " + sourceElement1.src + ", Type: " + sourceElement1.type + ", Media: " + sourceElement1.media;
  } else {
    outputElement1.textContent = "Source element not found.";
  }
</script>

Output:

In this example:

• We obtain the <video> element using its ID.
• We retrieve the first <source> element using its ID.
• We then display the src, type, and media attributes of the <source> element.
• Note that browser does not allow to get full URL. You will see only the path.

Accessing All Source Elements within an Audio Element

You can also retrieve all the <source> elements within an <audio> or <video> tag.

<audio id="myAudio" controls>
  <source src="audio1.mp3" type="audio/mpeg">
  <source src="audio2.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>
<ul id="sourceList1"></ul>

<script>
  const audioElement2 = document.getElementById('myAudio');
  const sourceElements2 = audioElement2.getElementsByTagName('source');
  const outputList2 = document.getElementById('sourceList1');

  for (let i = 0; i < sourceElements2.length; i++) {
    const source = sourceElements2[i];
      const listItem = document.createElement('li');
      listItem.textContent = "Source " + (i+1) + ": " + source.src + ", Type: " + source.type;
      outputList2.appendChild(listItem);
  }
</script>

Output:

Here:

• We obtain the <audio> element using its ID.
• We use getElementsByTagName('source') to retrieve all <source> elements within the <audio> element.
• We loop through the retrieved sources and display the src and type attributes of each.
• Note that browser does not allow to get full URL. You will see only the path.

Modifying Source Attributes

You can modify the attributes of a <source> element using JavaScript.

<picture>
  <source id="source3" srcset="image1.jpg" type="image/jpeg" media="(min-width: 600px)">
  <img src="image2.jpg" alt="Example Image" style="width: 200px;">
</picture>

<button id="changeSourceBtn">Change Source</button>
<p id="output3"></p>

<script>
  const sourceElement3 = document.getElementById('source3');
  const buttonElement3 = document.getElementById('changeSourceBtn');
  const outputElement3 = document.getElementById('output3');

  buttonElement3.addEventListener('click', () => {
      sourceElement3.srcset = 'image3.webp';
      sourceElement3.type = 'image/webp';
    outputElement3.textContent = "New Source: " + sourceElement3.srcset + ", Type: " + sourceElement3.type ;
  });
</script>

Output:

In this example:

• We select the <source> element using its ID.
• When the button is clicked, we change the srcset and type attributes of the <source> element.
• We update the text to show the new values.

Dynamically Adding and Removing Source Elements

You can dynamically add and remove <source> elements using JavaScript.

<video id="myVideo4" width="320" height="240" controls>
  Your browser does not support the video tag.
</video>

<button id="addSourceBtn">Add Source</button>
<button id="removeSourceBtn">Remove Source</button>
<p id="output4"></p>

<script>
  const videoElement4 = document.getElementById("myVideo4");
  const addSourceButton4 = document.getElementById("addSourceBtn");
  const removeSourceButton4 = document.getElementById("removeSourceBtn");
  const outputElement4 = document.getElementById("output4");
  let addedSource = null;

  addSourceButton4.addEventListener("click", () => {
    if(!addedSource) {
        const sourceElement4 = document.createElement("source");
        sourceElement4.src = "new_video.mp4";
        sourceElement4.type = "video/mp4";
        videoElement4.appendChild(sourceElement4);
        addedSource = sourceElement4;
        outputElement4.textContent = "Source element added.";
    } else {
        outputElement4.textContent = "Source element already added. Remove it first."
    }
  });

  removeSourceButton4.addEventListener("click", () => {
    if (addedSource) {
      videoElement4.removeChild(addedSource);
        addedSource = null;
      outputElement4.textContent = "Source element removed.";
    } else {
       outputElement4.textContent = "No source element added yet.";
    }
  });
</script>

Output:

Here:

• We start with a <video> element that has no source.
• The “Add Source” button creates a new <source> element, sets its src and type attributes, and appends it to the <video> element.
• The “Remove Source” button removes the added <source> element from the <video> element.
• Added source is tracked to avoid adding again and to remove existing source only.

Use Cases

The HTML DOM Source object is incredibly useful for:

• Adaptive Streaming: Dynamically changing video or audio sources based on network conditions or user preferences.
• Responsive Images: Providing different image sources based on device screen size using <picture> elements.
• Accessibility: Providing different video or audio sources for users with various browser compatibilities or network condition.
• Dynamic Media Switching: Changing the media source on the fly based on user interaction.

Browser Support

The HTML DOM Source object is supported by all modern browsers, ensuring consistent functionality across different platforms.

| Browser | Support |
|—————-|———|
| Chrome | ✅ |
| Firefox | ✅ |
| Safari | ✅ |
| Edge | ✅ |
| Opera | ✅ |
| Internet Explorer | ❌ (Partial Support)|

Note: For older browsers like IE, always include a fallback mechanism or polyfills for reliable operation. ⚠️

Conclusion

The HTML DOM Source object is essential for web developers looking to manage media content dynamically. By understanding how to access and manipulate <source> elements, you can create websites that are more responsive, accessible, and user-friendly. With the examples provided, you should be well-equipped to use the HTML DOM Source object effectively in your web projects.