How to Embed Audio and Video in HTML?

22 Jun, 2022
HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is a combination of Hypertext and Markup language. HTML uses predefined tags and elements that tell the browser how to properly display the content on the screen. So, in this article, we will learn how to embed audio and video in HTML. In order to insert multimedia files on web pages, we already know how to insert images in HTML. 
To embed audio in HTML, we use the <audio> tag. Before HTML5, audio cannot be added to web pages in the Internet Explorer era. To play audio, we used web plugins like Flash. After the release of HTML5, it is possible. This tag supports Chrome, Firefox, Safari, Opera, and Edge in three audio formats – MP3, WAV, OGG. Only Safari browser doesn’t support OGG audio format.
<audio>
    <source src="file_name" type="audio_file_type">
</audio>
Attributes of <audio> tag
auto metadata
none
Example: 
In this example, we will add an audio file to a webpage. To add audio files on the webpage, we need a notepad or another text editor. 
Step 1: Open your notepad by searching notepad in your application list. 
Step 2: Save a new file with a valid name following with .html extension. 
Step 3: Once the HTML file is saved, you can write HTML code inside this file. In this example, we have to embed an audio file so first keep ready an audio file and save it in the same directory where your HTML is saved. Then we write HTML code as shown below code snippet following by HTML code format. 
HTML
<!DOCTYPE html><html><head><title>Page Title</title></head><body><h2>Click play button to play audio</h2><audio src="./test.mp3" controls></audio></body></html>
Output:
Note: Before adding an audio source must be sure that the audio file is in the same directory and specified name. 
To embed video in HTML, we use the <video> tag. It contains one or more video sources at a time using <source> tag. It supports MP4, WebM, and Ogg in all modern browsers. Only Ogg video format doesn’t support in Safari browser. 
Syntax
<video>
    <source src="file_name" type="video_file_type">
</video>
Attributes of <video> tag
Example:
In this example, we will add a video to our webpage. To add video, we will use the <video> tag defining source using <source> tag. Create an HTML file just like an audio file example and save the video file in the same directory. Suppose a video file name test.mp4 save in the same directory where your HTML file was saved. 
HTML
<!DOCTYPE html><html><head><title>Page Title</title></head><body><h2>Click play button to play video</h2><video src="./test.mp4" controls></video></body></html>
or you can use the following code:
HTML
<!DOCTYPE html><html><head><title>Page Title</title></head><body><h2>Click play button to play video</h2><video controls>    <source  src="./test.mp4"></video></body></html>
Output:
omkarkhairmode99
Picked
Class 10
How To
School Learning
School Programming
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Introduction to Internet
Mobile Technologies - Definition, Types, Uses, Advantages
Metals and Non-Metals - Definition, Properties, Uses and Applications
CBSE Notes for Class 10 Physics
Rusting of Iron - Explanation, Chemical Reaction, Prevention
How to Install PIP on Windows ?
How to Find the Wi-Fi Password Using CMD in Windows?
How to install Jupyter Notebook on Windows?
Java Tutorial
How to filter object array based on attributes?