Skip to content
Related Articles

Related Articles

Improve Article

How to Embed Audio and Video in HTML?

  • Last Updated : 05 Aug, 2021
Geek Week

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 to embedded audio and video in HTML. In order to insert multimedia files on web pages, we already know to insert images in HTML. 

How to embed audio in HTML?

To embed audio in HTML, we use the <audio> tag. Before HTML5, audio can not 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

AttributeValueDescription
autoplayautoplayWhen the page is loaded. It specifies to play audio as soon as possible. 
controlscontrolsIt displays audio control. 
looploopIt will start the audio again when it is finished. 
mutedmutedWhen 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. 
srcURLIt 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 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

AttributeValueDescription
autoplayautoplayWhen the page is loaded. It specifies to play video as soon as possible. 
controlscontrolsIt displays video control such as play, pause, and stop.
looploopIt will start the video again when it is finished. 
mutedmutedWhen the page is loaded video will be automatically muted. 
posterURLIt specifies an image will be shown until video play. 
preloadauto
metadata
none
It specifies how the author thinks the video will be loaded when the page is ready. 
srcURLIt specifies the URL of the audio file. 
widthpixelsIt specifies the width of the video area. The default value of width is ‘auto’.
heightpixelsIt specifies the height of the video area. The default value of width 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:

Attention reader! All those who say programming isn’t for kids, just haven’t met the right mentors yet. Join the  Demo Class for First Step to Coding Coursespecifically designed for students of class 8 to 12. 

The students will get to learn more about the world of programming in these free classes which will definitely help them in making a wise career choice in the future.




My Personal Notes arrow_drop_up
Recommended Articles
Page :