Table of contents
No headings in the article.
Audio and Video elements are the media elements introduced in HTML5 that make our life very easy when it comes to including audio and video on the web. Let's learn them with examples.
Audio:-
The audio tag or element allows you to embed any audio on the web very easily.
Example:
<audio src="./audio.mp3" title="Sample audio" controls autoplay muted loop>Sample Audio</audio>
Output:
Video:-
The video tag or element allows you to embed any video on the web browser very easily.
Example:
<video src="./video.mp4" title="Sample video" width="500" controls autoplay muted loop>Cartoon video</video>
Output:
This is how easy it is to add audio on the web. Now let's take a look at some of the attributes that are responsible for this audio to work.
Attributes: Some common attributes are
src: It means source. To play the audio/video you should provide the address of the audio/video file located on your desktop in the src attribute. Not all audio/video formats are supported by the browser. Mostly use .mp3 or .wav files for audio and .mp4 or .webm for video.
title: It is mostly used for screen readers. On hovering over the audio/video player on the browser a popup appears with the name or title of the audio/video player and this happens because of the title attribute. In the title attribute, we give the name like title="audio/video player".
controls: It adds controls to the audio/video player like a play button, timeline, speaker, etc which gives us the ability to control the audio/video.
autoplay: When autoplay is used then the audio/video will start as soon as you load or open the browser, you don't need to manually click the play button to play the audio/video.
muted: It mutes the audio/video. The audio/video will play but the noise will be muted, we won't be able to hear anything.
loop: It will make sure your audio/video will play continuously even after it ends. It will play again and again in the loop after it ends.