HTML Multimedia

HTML5 provides robust support for multimedia elements, allowing you to easily embed audio and video content directly into your web pages without relying on external plugins.

Audio

The audio element is used to embed sound content in documents. It can contain one or more audio sources, represented using the source element. The browser will choose the first source it supports.

Attribute Description Example
src Specifies the URL of the audio file.
Try yourself 
        
            <audio src="/media/audio/sample.mp3" controls></audio>
controls Specifies that audio controls should be displayed (such as a play/pause button).
Try yourself 
        
            <audio controls>
    <source src="/media/audio/sample.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
autoplay Specifies that the audio will start playing as soon as it is ready.
Try yourself 
        
            <audio src="/media/audio/sample.mp3" autoplay></audio>
loop Specifies that the audio will start over again, every time it is finished.
Try yourself 
        
            <audio src="/media/audio/sample.mp3" loop autoplay></audio>

Video

The video element is used to embed video content in documents. It can contain one or more video sources, represented using the &lt;source&gt; element. The browser will choose the first source it supports.

Attribute Description Example
src Specifies the URL of the video file.
Try yourself 
        
            <video src="/media/video/sample_video_720x480_2mb.mp4" controls></video>
controls Specifies that video controls should be displayed (such as a play/pause button).
Try yourself 
        
            <video controls>
    <source src="/media/video/sample_video_720x480_2mb.mp4" type="video/mp4">
    Your browser does not support the video element.
</video>
autoplay Specifies that the video will start playing as soon as it is ready.
Try yourself 
        
            <video src="/media/video/sample_video_720x480_2mb.mp4" autoplay></video>
loop Specifies that the video will start over again, every time it is finished.
Try yourself 
        
            <video src="/media/video/sample_video_720x480_2mb.mp4" loop controls></video>
poster Specifies an image to be shown while the video is downloading, or until the user hits the play button.
Try yourself 
        
            <video src="/media/video/sample_video_720x480_2mb.mp4" poster="/images/common/background.jpeg" controls></video>

Using Multimedia Elements in HTML

Here is how you can use audio and video elements in your HTML:

Example: Audio Element
Try yourself 
        
            <audio controls>
    <source src="/media/audio/sample.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

This example shows an audio element with controls to play, pause, and adjust the volume.

Example: Video Element
Try yourself 
        
            <video controls>
    <source src="/media/video/sample_video_720x480_2mb.mp4" type="video/mp4">
    Your browser does not support the video element.
</video>

This example shows a video element with controls to play, pause, and adjust the volume.

Important Notes

Here are some important notes and best practices when using HTML multimedia elements: