<audio> Tag
The <audio> tag is an inline element that is used to embed sound files into a web page. Since
the release of HTML5, audio can be added to web pages using the “audio” tag. It is a useful tag
if you want to add audio such as songs, interviews, etc. on your webpage.
Previously, audio could be only played on web pages using web plugins like Flash. It is a useful
tag if you want to add audio such as songs, interviews, etc. on your webpage.
Syntax:
<audio>
<source src="sample.mp3" type="audio/mpeg">
</audio>
Attributes:
The various attributes that can be used with the “audio” tag are listed below:
Attributes Description
Designates what controls to display with the
Controls audio player.
Designates that the audio file will play
Autoplay immediately after it loads controls.
Designates that the audio file should
Loop continuously repeat.
src Designates the URL of the audio file.
Designates that the audio file should be
muted muted.
Understanding HTML Audio :
● Using the <source> element enables the specification of various audio files, allowing the
browser to choose the compatible format.
● The <audio> element allows integration with JavaScript, enabling the creation of custom
audio controls and behaviors.
● The ‘controls’ attribute provides buttons for managing audio, like play, pause, and
volume adjustment.
● Any text contained between the <audio> tags is visible only on browsers that can’t render
the <audio> element.
Three formats mp3, ogg, and wav are supported by HTML
<!DOCTYPE html>
<html>
<body>
<p>Audio Sample</p>
<!-- audio tag starts here -->
<audio controls>
<source src=
https://media.geeksforgeeks.org/wp-content/uploads/20230524142525/gfg_offline_classes_en.m
p3 type="audio/mp3">
<source src=
"https://media.geeksforgeeks.org/wpcontent/uploads/20220913101124/audiosample.ogg"
type="audio/mp3">
</audio>
<!-- audio tag ends here -->
</body>
</html>
<Video> tag
The <video> element in HTML allows you to embed video content directly into web pages.
It supports various video formats, including MP4, WebM, and Ogg. In this guide, we’ll learn
about the key features of HTML video. video and audio tags are introduced in HTML.
Syntax:
To include a video on your webpage, use the following syntax:
<video src="" controls> </video>
The src attribute specifies the URL of the video file.
The controls attribute adds default video controls (play, pause, volume, etc.).
Three different formats are commonly supported by web browsers – mp4, Ogg, and WebM.
Additional Attributes
Attributes Description
Autoplay Starts playing the video automatically.
Preload Provides a hint to the browser about the best
user experience.
Loop Automatically loops the video.
height It sets the height of the video in CSS pixels.
width It shows the default video controls like play,
pause, volume, etc.
Controls It shows the default video controls like play,
pause, volume, etc.
Muted Mutes the audio.
Poster Displays an image preview before video
loading.
<html>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>HTML video tag</h3>
<p>Adding video on the webpage
<p>
<video width="450" height="250" controls preload="auto">
<source
src="https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4"
type="video/mp4">
<source
src="https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg"
type="video/ogg">
</video>
</center>
</body>
</html>
