Multimedia Tags: Audio, Image, Video
You may have seen multiple websites using images, audios and videos on their web pages to make it more interactive.
To embed these elements img, audio and video elements are used.
1. Audio Element:
To embed and play audio in a web page, we use <audio> tag.
There are some of the important attributes of audio tag-
- src : used to specify the url of audio file
- controls: to display play or paise button this attribute is used
- autoplay: used to play media automatically on page load
- loop: used to play media in a loop
- muted: media will play in muted state
Example:
<audio src="./audio.mp3" controls="controls" loop>Unsupported audio file</audio>
Note: If the browsers do not support the audio file, then the text inside audio tag will be shown on the web page.
2. Video:
To embed and play video on a web page, we use <video> tag.
You can use same attribute for video tag as we have used for <audio>.
Example:
<video src="./video.mp4" controls="controls">
Unsupported Video File
</video>
Note: If the video file is not supported by the browser, then the text inside video tag will be shown on the web page.
Since all formats of video or audio files are not supported by web browsers. So, it is recommended way to use multiple sources of video or audio element of different format. To implement this feature, we use <source> tag.
3. source tag:
To allow multiple resources for audio or video elements, we use <source> tag.
Example:
<audio>
<source src="./audio.mp3" type="audio/mp3">
<source src="./audio.ogg" type="audio/ogg">
</audio>
Similarly, we can provide multiple sources to video as well
<video>
<source src="./video.mp4" type="video/mp4">
<source src="./video.ogg" type="video/ogg">
</video>
Note: The browser will use first supported audio/video file from multiple provides sources. Hence it is recommended to list sources in most desirable to least desirable resources.
Comments
Post a Comment