Different ways to add media in HTML page

Different ways to add media in HTML page

Last Updated : 30 Jan, 2022

These days one of the most important things on the web is media. So all the developers and websites owners want to make their websites attractive and interactive. For they need to include media in their sites. There are lots of media types, audio, video, etc. There are different ways to include those media into the websites. Each type of media required a specific way. All the possible ways are mentioned and described below one by one.

Different ways to add media to the HTML page:

Using HTML Audio tag: This tag is used to include the audio media type into the websites.
Using HTML Video tag: This tag is used to include the video media type into the websites.

Example 1: Below example illustrate adding audio media type into the HTML page. The developer can use their own src file for implementation.

HTML

<!DOCTYPE html>
<html>

<body>
    <p>Audio Sample</p>

    <!-- Audio tag starts here -->
    <audio controls>
        <source src="test.mp3" type="audio/mp3">
        <source src="test.ogg" type="audio/ogg">
    </audio>
    <!-- Audio tag ends here -->
    
</body>

</html>

Output:

Using HTML Audio tag

Example 2: Below example illustrate adding video media type into the HTML page.

HTML

<!DOCTYPE html>
<html>

<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        
        <h3>HTML video tag</h3>

        <p>Adding video on the webpage

        <p>
            <video width="450" height="250" 
                controls preload="auto">
                <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4"
                    type="video/mp4">
                    
                <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg"
                    type="video/ogg">
            </video>
    </center>
</body>

</html>

Output:

Using HTML Video tag

Different ways to add media in HTML page

S

skyridetim

Improve

Article Tags :

Similar Reads

What are the media element tags introduced by HTML5 ?

HTML5 introduced 5 most popular media element tags i.e. <audio>, <video>, <source>, <embed>, <track>. These media element tags changed the entire development using HTML. In this article, you will get to know about these five media element tags briefly.Media Tags:Media T

HTML DOM Link media Property

The HTML DOM link media property is used to set or return the value of the media attribute of an <link> element. The media attribute is used to specify what type of media devices the target resource is optimized. Syntax: It is used to return the media property. linkObject.media; It is used to

How to define media type of style tag in HTML5 ?

In this article, we learn how to define the media type of the style tag in HTML5. In HTML5, the media type of a style tag can be defined using the "media" attribute. By specifying the media type, such as "screen" for displaying on a screen or "print" for printing, the style rules within the style ta

How to Add Image in HTML Table ?

Adding images to an HTML table can enhance the visual appeal and functionality of your webpage. Whether it is for displaying product images in an e-commerce website or adding profile pictures in a user list, images in tables are a common requirement. In this article, we will explore two methods to a

What are different video formats supported by browsers in HTML ?

In modern web development, videos play a crucial role in enhancing the user experience on websites. Browsers support different video formats, such as MP4, WebM, and Ogg, but each has its own compatibility and use cases. In this article, we'll explore the most commonly supported video formats in HTML

How to Add GIF in HTML?

GIFs (Graphics Interchange Format) are the popular image format that supports both animated and static images. Adding the GIFs to the HTML document enhances the visual appeal and the user interaction of the web pages. They are commonly used for loading animations, fun illustrations, or visual explan

How to Embed Multimedia in HTML ?

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 we

How to define the type of media resource in HTML5 ?

We can define or specify the type of media file (audio, video, etc) in HTML by the <source> tag. It defines the multimedia resources and gives the browser multiple and alternative types of that media file from which the browser can choose according to its compatibility with that media type. No

Which media format is supported by the browser in HTML ?

HTML supports various media elements such as audio or video. It uses media tags such as <audio>, <video>, <source>, <embed> and <track> to include media files in HTML documents. Multimedia files can be in different formats (example- MP3, MP4, WEBM) which can be identifi

Difference between <figure> & <img> tags in HTML

In this article, we will learn about the <figure> & <img> tag along with its implementation. We will also learn the differences between them. Let's begin the discussion with the figure tag in HTML.Table of Content HTML <figure> Tag: HTML <img> Tag: Difference between <