<source>: The HTML Source Element

1 Description

The HTML <source> element is used to specify the location of a file for an <audio>, <picture>, or <video> element.

The <source> element does not have any content, and it does not require a closing tag. Generally a <video>, <audio>, or <picture> element will contain multiple <source> elements each of which specifies the same file in a different format. Web browsers will attempt to load each file and play or display the first file that is compatible with the web browser.

2 Examples

<!DOCTYPE html>
<html>
    <head>
        <title>Example Page</title>
    </head>
    <body>
        <h1>Example HTML Page</h1>
        <p>A video of a penguine.</p>
        <video>
            <source src="/media/video/penguine_1.webm" type="video/webm"/>
            <source src="/media/video/penguine_2.mp4" type="video/mp4"/>
        </video>
        <p>A picture of a penguine.</p>
        <picture>
            <source srcset="/media/picture/penguine_1.png, penguine_2.png 2x"/>
            <img src="/media/picture/penguine_1.png" alt="A photo of a penguine"/>
        </picture>
        <p>An audio recording of a penguine.</p>
        <audio>
            <source src="/media/audio/penguine_1.mp3" type="audio/mpeg"/>
            <source src="/media/audio/penguine_2.ogg" type="audio/ogg"/>
        </audio>
    </body>
</html>

This document was last updated: