In this tutorial of "HTML Simplified Series" we are going to discuss that "How to add multimedia on web page". So without wasting any time let's start and see adding Multimedia on web page.
Multimedia Tags in HTML
- Multimedia Tags are used to show multimedia files on a web page.
- Media files contain multimedia elements such as audio and video.
1). Audio
<audio> element is used to add an audio file on a web page.
<audio controls>
<source src="myMusic.mp3" type="audio/ogg">
Audio Cannot play on your device
</audio>
Output:
Audio Attributes:
- autoplay: This will start the audio file automatically.
- controls: It will add audio controls like play, pause, and volume controls.
- muted: This attribute will mute the audio file.
2). Video
<video> element is used to show video on a web page.
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Output:
Video Attributes:
- controls: It will add the video controls like play, pause, and volume controls.
- autoplay: This will start the video automatically.
- muted: This attribute will mute the audio of the video file.
- width: This attribute is used to add width to the video.
- height: This attribute is used to add height to the video.
3). Embed
<embed> element is used to embed the files like audio, video, and HTML documents on the web page.
<embed width="20%" height="auto" src="video.mp4">
Output:
Embed Attributes
- width: This attribute is used to add width to the video.
- height: This attribute is used to add height to the video.
- src: This is used for the source file which will be displayed on the web page.
4). Object
<object> tag is used to add an external object, multimedia files like audio, images, pdf, flash, video, and other webpages on our webpage.
<object data="video.mp4" width="25%" height="auto">Visit Geeks Help</object>
Output:
Object Attributes
- width: This attribute is used to add width to the object.
- height: This attribute is used to add height to the object.
- data: It is used to specify the URL of the resource used in the object.
