HTML Tutorial

- HTML Global Attribute
- HTML Event Attributes

<source> Tag in HTML | Media Element

The <source> tag in HTML is used to specify multiple media resources for the <audio> and <video> elements. It allows browsers to choose the appropriate file based on the media type and supported formats.

Key Points on <source> Tag:

The <source> tag provides multiple media files (audio or video) for the <audio> or <video> elements.
Each <source> element specifies a different file format or source to ensure compatibility across various browsers.
The src attribute specifies the path to the media file, and the type attribute specifies the media type (MIME type).
If none of the provided media files are supported, the browser will use the <audio> or <video> fallback mechanisms.

Syntax of <source> Tag:

Syntax Example

<source src="mediafile.mp4" type="video/mp4">

Example of <source> Tag in HTML:

This example demonstrates how the <source> tag is used to specify multiple video formats for the <video> element.

Code Example

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>HTML Source Tag Example</title>
        </head>
        <body>
            <h1>HTML Source Tag Example</h1>
            <video controls>
                <source src="video.mp4" type="video/mp4">
                <source src="video.ogg" type="video/ogg">
                <p>Your browser does not support the video tag.</p>
            </video>
        </body>
        </html>

Output

The <source> tag is essential when embedding media content like videos or audio in HTML. It ensures that the browser can pick the right format based on the user's environment and preferences, improving compatibility and performance.