Open In App

How to Embed Audio and Video in HTML?

Improve
Improve
Like Article
Like
Save
Share
Report

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. 

How to embed audio 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.

Syntax:

<audio>
    <source src="file_name" type="audio_file_type">
</audio>

Attributes of <audio> tag

Attribute Value Description
autoplay autoplay When the page is loaded. It specifies to play audio as soon as possible. 
controls controls It displays audio control. 
loop loop It will start the audio again when it is finished. 
muted muted When the page is loaded audio will be automatically muted. 
preload

auto metadata

none

It specifies how the author thinks the audio will be loaded when the page is ready. 
src URL It specifies the URL of the audio file. 

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. 

How to embed video in HTML?

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

Attribute Value Description
autoplay autoplay When the page is loaded. It specifies to play video as soon as possible. 
controls controls It displays video control such as play, pause, and stop.
loop loop It will start the video again when it is finished. 
muted muted When the page is loaded video will be automatically muted. 
poster URL It specifies an image will be shown until video play. 
preload auto
metadata
none
It specifies how the author thinks the video will be loaded when the page is ready. 
src URL It specifies the URL of the audio file. 
width pixels It specifies the width of the video area. The default value of width is ‘auto’.
height pixels It specifies the height of the video area. The default value of height is ‘auto’.

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:



Last Updated : 22 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads