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
How to set the URL of the media file in HTML?
In this article, we are going to learn about how to set the URL of the media file in HTML using the <source> element. This element allows you to specify multiple media sources with different formats, enabling browsers to choose the most suitable format they support.
The <source> element is used inside <audio>, <video>, and <picture> elements to provide alternative media resources. By offering multiple formats, you ensure better cross-browser compatibility and optimal media delivery across different devices and platforms.
Syntax
Following is the syntax for the <source> element −
<source src="media-url" type="media-type" [media="media-query"]>
The src attribute specifies the URL of the media file, while the type attribute indicates the MIME type of the media resource. The optional media attribute can be used with <picture> elements for responsive images.
Using Source Element with Audio
For audio files, you can provide multiple source formats to ensure compatibility across different browsers. Common audio formats include MP3, OGG, and WAV.
Example
Following example demonstrates using the <source> element with audio −
<!DOCTYPE html>
<html>
<head>
<title>Audio Source Example</title>
</head>
<body style="text-align: center; font-family: Arial, sans-serif; padding: 20px;">
<h2>Sample Audio File</h2>
<audio controls style="width: 300px;">
<source src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3" type="audio/mpeg">
<source src="audio/sample.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<p>Audio controls with multiple source formats for browser compatibility.</p>
</body>
</html>
The output displays an audio player with controls. The browser automatically selects the first supported format −
Sample Audio File [Audio Player Controls] ? ? ? ??????? 0:03 Audio controls with multiple source formats for browser compatibility.
Using Source Element with Video
Video elements benefit greatly from multiple source formats. Popular video formats include MP4, WebM, and OGV, each with different codec support across browsers.
Example
Following example shows the <source> element with video −
<!DOCTYPE html>
<html>
<head>
<title>Video Source Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Sample Video File</h2>
<video width="400" height="250" controls>
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
<source src="video/sample.webm" type="video/webm">
<source src="video/sample.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
<p>This video player supports multiple formats for maximum compatibility.</p>
</body>
</html>
The browser displays a video player and automatically chooses the first supported video format from the list of sources provided.
Using Source Element with Picture
The <picture> element uses <source> for responsive images, allowing different images based on screen size or device capabilities.
Example
Following example demonstrates responsive image selection using the <source> element −
<!DOCTYPE html>
<html>
<head>
<title>Picture Source Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Responsive Image Example</h2>
<picture>
<source media="(max-width: 600px)" srcset="https://via.placeholder.com/300x200/ff6b6b/ffffff?text=Mobile" type="image/jpeg">
<source media="(min-width: 601px)" srcset="https://via.placeholder.com/600x300/4ecdc4/ffffff?text=Desktop" type="image/jpeg">
<img src="https://via.placeholder.com/400x250/45b7d1/ffffff?text=Default" alt="Responsive Image" style="max-width: 100%; height: auto;">
</picture>
<p>Resize your browser window to see different images load based on screen size.</p>
</body>
</html>
The image displayed changes based on the browser window size, demonstrating responsive image delivery.
Multiple Source Formats
Providing multiple source formats ensures your media works across different browsers and devices. The browser evaluates each <source> element in order and uses the first one it can play.
Example − Complete Audio Setup
<!DOCTYPE html>
<html>
<head>
<title>Multiple Audio Sources</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Cross-Browser Audio Example</h2>
<audio controls preload="metadata">
<source src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3" type="audio/mpeg">
<source src="audio/sample.wav" type="audio/wav">
<source src="audio/sample.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. <a href="https://samplelib.com/lib/preview/mp3/sample-3s.mp3">Download the audio file</a>.</p>
</audio>
<p>The browser automatically selects the best supported audio format.</p>
</body>
</html>
This setup provides fallback options and ensures the audio plays in most browsers, with a download link for unsupported browsers.
Attributes of the Source Element
The <source> element supports several important attributes −
| Attribute | Description | Used With |
|---|---|---|
src |
Specifies the URL of the media resource | All source elements |
type |
Indicates the MIME type of the media file | All source elements |
media |
Defines media query for responsive images | Picture elements only |
srcset |
Provides multiple image sources for different resolutions | Picture elements only |
sizes |
Defines image sizes for different viewport widths | Picture elements only |
Conclusion
The <source> element is essential for providing multiple media formats in HTML5, ensuring cross-browser compatibility for audio, video, and responsive images. By offering multiple source formats, you guarantee that your media content reaches the widest possible audience regardless of their browser or device capabilities.
847 Views
