How to Embed Audio and Video in HTML? - Coding

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:

Reffered: https://www.geeksforgeeks.org

Class 10

Related
Ask(), Wait() and Answer() Block in Scratch Programming
What is Dispersion of Light?
Variables in Scratch Programming
Difference between Blogs and News Groups
HTML Forms

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	10