Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM source object
The HTML DOM source object represents the HTML <source> element in the Document Object Model. The <source> element is used to specify multiple media resources for media elements like <video>, <audio>, and <picture>. We can create and access source elements using DOM methods like createElement() and getElementById() respectively.
The source object allows developers to dynamically add media sources to enhance browser compatibility by providing alternative formats for different devices and browsers.
Syntax
Following is the syntax for creating a source object −
var sourceElement = document.createElement("SOURCE");
Following is the syntax for accessing an existing source element −
var sourceElement = document.getElementById("sourceId");
Properties
The source object supports several important properties −
src − Specifies the URL of the media resource
type − Specifies the MIME type of the media resource
media − Specifies media queries for responsive images (used with
<picture>)sizes − Specifies image sizes for different viewport widths (used with
<picture>)srcset − Specifies multiple image sources for responsive images (used with
<picture>)
Creating Source Objects Dynamically
Example − Adding Audio Source
Following example demonstrates creating and adding a source element to an audio element dynamically −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Source Object - Audio</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Source Object Example</h2>
<audio id="audioPlayer" controls>
Your browser does not support the audio element.
</audio>
<p>Click the button to add an audio source:</p>
<button onclick="addAudioSource()">Add Audio Source</button>
<p id="status"></p>
<script>
function addAudioSource() {
var audioElement = document.getElementById("audioPlayer");
var sourceElement = document.createElement("SOURCE");
sourceElement.setAttribute("src", "https://www.soundjay.com/misc/sounds/bell-ringing-05.wav");
sourceElement.setAttribute("type", "audio/wav");
audioElement.appendChild(sourceElement);
document.getElementById("status").innerHTML = "Audio source added successfully!";
}
</script>
</body>
</html>
The output shows an audio player with controls. Clicking the button dynamically adds a source element −
Source Object Example [Audio Player Controls] Click the button to add an audio source: [Add Audio Source] (After clicking: "Audio source added successfully!")
Example − Adding Multiple Video Sources
Following example shows how to add multiple video sources for better browser compatibility −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Video Sources</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video with Multiple Sources</h2>
<video id="videoPlayer" width="400" height="300" controls>
Your browser does not support the video tag.
</video>
<br><br>
<button onclick="addVideoSources()">Add Video Sources</button>
<p id="videoStatus"></p>
<script>
function addVideoSources() {
var videoElement = document.getElementById("videoPlayer");
// Add MP4 source
var mp4Source = document.createElement("SOURCE");
mp4Source.setAttribute("src", "sample-video.mp4");
mp4Source.setAttribute("type", "video/mp4");
videoElement.appendChild(mp4Source);
// Add WebM source
var webmSource = document.createElement("SOURCE");
webmSource.setAttribute("src", "sample-video.webm");
webmSource.setAttribute("type", "video/webm");
videoElement.appendChild(webmSource);
// Add OGG source
var oggSource = document.createElement("SOURCE");
oggSource.setAttribute("src", "sample-video.ogg");
oggSource.setAttribute("type", "video/ogg");
videoElement.appendChild(oggSource);
document.getElementById("videoStatus").innerHTML = "Multiple video sources added for better compatibility!";
}
</script>
</body>
</html>
This example adds three different video formats, allowing browsers to choose the format they support best −
Video with Multiple Sources [Video Player - 400x300 with controls] [Add Video Sources] (After clicking: "Multiple video sources added for better compatibility!")
Accessing Source Object Properties
Example − Reading Source Properties
Following example shows how to access and display properties of existing source elements −
<!DOCTYPE html>
<html>
<head>
<title>Source Object Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Audio with Predefined Sources</h2>
<audio controls>
<source id="source1" src="audio.mp3" type="audio/mpeg">
<source id="source2" src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<br><br>
<button onclick="showSourceInfo()">Show Source Information</button>
<div id="sourceInfo" style="margin-top: 15px;"></div>
<script>
function showSourceInfo() {
var source1 = document.getElementById("source1");
var source2 = document.getElementById("source2");
var info = "";
info += "<h3>Source 1:</h3>";
info += "Source URL: " + source1.src + "<br>";
info += "Type: " + source1.type + "<br><br>";
info += "<h3>Source 2:</h3>";
info += "Source URL: " + source2.src + "<br>";
info += "Type: " + source2.type + "<br>";
document.getElementById("sourceInfo").innerHTML = info;
}
</script>
</body>
</html>
The button displays detailed information about each source element −
Audio with Predefined Sources [Audio Player Controls] [Show Source Information] (After clicking, displays source URLs and MIME types for both sources)
Browser Compatibility
The HTML DOM source object is supported in all modern browsers that support the HTML5 <source> element. This includes Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. The source element provides fallback mechanisms, so if one format is not supported, browsers automatically try the next available source.
Conclusion
The HTML DOM source object provides a powerful way to dynamically manage media sources for audio, video, and picture elements. By creating source elements programmatically, developers can enhance cross-browser compatibility and provide multiple format options for optimal media playback across different devices and browsers.
158 Views
