How To Add Multimedia Content With HTML

Introduction

In this article, we will describe the way to add music and videos to your web page in order to make it more interactive and attractive with the help of HTML.

What is HTML?

HTML stands for "HyperText Markup Language" which Sir Tim Berners-Lee created in 1991. HTML begins with (<tagname>) and ends with (</tagname>).

For example

<html>...</html>

This HTML tag tells the browser that the document is written and marked up in standard HTML. This is used to display data in a browser. HTML 5 is the advanced version of HTML, and it is used to develop 3D or multimedia applications. Multimedia can be anything you can hear or see, like images, sound, videos, films, animations, and more. Web pages often contain multimedia elements of different types. Sometimes, to make your web page more attractive and interactive, you apply music or video.

Ways to Add Multimedia Files in HTML

HTML introduces Media tags to embed videos, images, sound, etc., into HTML Pages. Here are some of them.

Using an Audio tag in HTML

The <audio> tag is an HTML element used to embed audio content in web pages. It allows web developers to include audio files such as music or sound effects directly on a web page without requiring third-party plugins like Flash. This tag is supported in all modern web browsers, including Chrome, Firefox, Safari, and Edge. It provides several attributes that can be used to control the playback of the audio file, such as autoplay, loop, controls, muted, volume, preload, and src.

Attribute	Values	Description
controls	attribute	This attribute is used to control the audio.
height	pixels	This specifies the height of the audio file.
src	URL	This defines the resource location of the audio file.
type	media-type	This specifies the MIME type.
width	pixels	This determines the width of the audio or music.

MIME(Multipurpose Internet Mail Extensions) Types for Audio Formats.

MEDIA TYPE	DESCRIPTION
audio/mpeg	Mp3 audio format
audio/ogg	Ogg audio format
audio/wav	Waveform audio format

Syntax

<audio src=""></audio>

Example


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multimedia Content</title>
    <style>
        * {
            padding: 10px;
            text-align: center;
            background-color: rgb(252, 196, 155);
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }
    </style>
</head>
<body>
    <div>
        <h2>Audio and Music</h2>
        <audio controls="pause">
            <source src="Dahuk Bird Sound.mp3" type="audio/mpeg">
        </audio>
        <br>
        <audio controls="pause">
            <source src=" cardinal-37075.mp3" type="audio/mpeg">
        </audio>
    </div>
</body>
</html>

Output

Audio_Tag_image

Using Video tag in HTML

The HTML <video> tag is used to embed a video file into a web page. This tag can be paired with the <source> tag to specify alternative video file formats that can be used in case the browser doesn't support the primary file format. The video can be played, paused, and stopped using the controls provided.

Attribute	Values	Description
controls	attribute	This attribute is used to control the video, like play and pause.
height	pixels	This specifies the height of the video file.
src	URL	This defines the resource location of the video file.
type	media-type	This specifies the MIME type.
width	pixels	This determines the width of the video.

MIME(Multipurpose Internet Mail Extensions) Types for Video Formats.

MEDIA TYPE	DESCRIPTION
video/mp4	Mp4 format
video/mpeg	Mp3 or other Mpeg format
video/ogg	A variety of formats inside an Ogg container

Syntax

<video src=""></video>

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multimedia Content</title>
    <style>
        * {
            /* universal selector */
            background-color: darkcyan;
            text-align: center;
        }
    </style>
</head>
<body>
    <video width="320" height="240" controls>
        <source src=" mixkit-seagulls-flying-over-the-sky-at-sunset-9317-large.mp4 " type="video/mp4">
    </video>
    <h2> Video is added</h2>
</body>
</html>

Output

Video_Tag_image

Conclusion

Overall, we can conclude that with these tags, web developers can create more dynamic and engaging web pages. Here images, music, and videos are added to the web page document. It is very easy, as described above.

FAQ's

Q 1- What are some best practices for optimizing images for web display?

A- Some best practices for optimizing images for web display include.

Large image files can slow down page load times, so it's important to compress images before uploading them to your website.
Different file formats (e.g. JPEG, PNG, GIF) are suited for different types of images. JPEG is best for photographs, while PNG is better for graphics with transparent backgrounds.
It's important to resize images to the appropriate dimensions before uploading them to your website. This will help ensure that images display correctly on different devices and screen sizes.
When saving images, use descriptive file names that accurately reflect the content of the image.
Alt tags should accurately describe the content of the image and include relevant keywords.

Q 2- What is the difference between using the <img> element and the CSS background-image property to display images on a webpage?

A- The main difference between using the <img> element and the CSS background-image property to display images on a webpage is that the <img> element is used to insert images as content within the HTML document. In contrast, the CSS background-image property is used to add images as a background to an HTML element.

Q 3- What is the main difference between the <audio> and <video> elements in HTML?

A- The main difference between the <audio> and <video> elements in HTML is the type of media they are designed to play. The <audio> element is used to embed audio files, such as music or podcasts, on a webpage, while the <video> element is used to embed video files, such as movies or TV shows. Also, with this, the <video> element allows you to specify the dimensions of the video display area using the width and height attributes, whereas the <audio> element does not have such attributes.

Q 4- How do you add captions or subtitles to video content using HTML?

A- In the below example, the src attribute in the <source> element specifies the path to the video file, while the src attribute in the <track> element specifies the path to the captions or subtitles file.

<video controls>
        <source src="" type="">
        <track src="" kind="captions" label="English" default>
</video>

Q 5- How do you embed a YouTube video on a webpage using HTML?

A- You can embed a YouTube video on a webpage using the <iframe> element and the URL of the video.

<iframe width="560" height="315" src="https://www.youtube.com/embed/[video_ID]" frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>