How to Embed Multimedia in HTML ?
Last Updated :
25 Jul, 2024
A variety of tags such as the <img> tag, <video> tag, and <audio> tag are available in HTML to include media on your web page. Multimedia combines different media, such as images, audio, and videos. Users will have a better experience when multimedia is embedded into HTML. Early web browsers only supported text and were limited to a single font in a single color. However, later browsers introduced support for various fonts, images, and multimedia elements.
Note: Provide multiple video formats such as .wav, .mp3, .mp4, .mpg, .wmv, etc.
Syntax:
// Embedding image
<img src="geeksforgeeks.jpg" alt="Logo">
// Embedding video
<video width="500px" height="300px" controls>
<source src="Small_movie.mp4" type="video/mp4">
</video>
// Embedding audio
<audio controls>
<source src="Small_audio.mp3" type="audio/mp3">
</audio>
Embedding Image
The <img> tag is self-closing because they don't have a closing tag. The src attribute is the required attributes in the <img> tag, it helps to specify the source URL. The alt attribute provides the alternative text to an image. If the image does not load up then this message will be displayed.
Example: Illustration of embedding image in HTML .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Embedding Image in HTML Document</title>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190328185307/gfg28.png"
alt="gfglogo">
</body>
</html>
Output:
Output ScreenEmbedding Video
The <video> tag helps us to embed the required video into the webpage. The width and height properties determine the size of the video. The control property adds playback control like play, pause, volume. etc. The <source> tag specifies the specific video file and the type attribute is used to specify the MIME (Multipurpose Internet Mail Extensions) type. If the browser does not support a video tag then the content present inside will be displayed. Provide multiple video formats such as MP4, MOV, AVI, WEBM.. etc.
Example: Illustration of embedding video in an HTML Document.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Embedding video in HTML</title>
</head>
<body>
<video width="500px" height="300px" controls>
<source src="Small_movie.mp4" type="video/mp4">
<source src="Small_movie.webm" type="video/webm">
Your browser does not support this video tag.
</video>
</body>
</html>
Output:
Embedding Audio
The <audio> tag, helps us to embed the required audio into the webpage. The control property adds playback control like play, pause, volume. etc. The <source> tag specifies the specific audio file and the type attribute is used to specify the MIME (Multipurpose Internet Mail Extensions) type. If the browser does not support video a tag then the content present inside will be displayed.
Example: Illustration of embedding audio in an HTML document.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Embedding audio in HTML</title>
</head>
<body>
<audio controls>
<source src="Small_audio.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
</body>
</html>
Output:
Similar Reads
How to Embed Audio and Video in HTML? 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
4 min read
How to Embed Video in Iframe in HTML? You can use Iframe to show videos on your web page and embedding videos are very simple. To do so you can use the iframe tag directly in your HTML. Let's see how we can embed the video in the iframe.Embedding Videos in HTMLTo embed a video, use the iframe tag with the video's URL. Set the width, hei
1 min read
How to Add Video in HTML? To add a video in HTML, you use the <video> tag, which allows you to embed videos directly into your webpage for users to view without needing external players.The <video> tag supports multiple formats like MP4, WebM, and Ogg.You can include attributes such as controls, autoplay, and loo
4 min read
How to add video in HTML5 ? In This article, we will define how to add video content using a <video> element in the document. Before HTML5 came into existence, videos could only be played in a browser using a plugin like flash, but after the release of HTML5, adding a video to a web page is easy as adding an image. The H
1 min read
How to add Label above Video in HTML5 ? In HTML5, putting a label above a video is important for helping users understand and interact with the content better. There are two easy ways to do this: using the figure and figcaption elements, or just the label tag itself. By using these methods, you can easily add informative labels above your
2 min read
How to define an embedded object in HTML5 ? In this article, you will learn how to define an embedded object by using the <object> element in the document. It is used to display multimedia objects like audios, videos, images, PDFs, and Flash in web pages. The element is also used for displaying any other webpage on an HTML page. This ta
1 min read