html

Handling Multimedia files in HTML

Multimedia is a way of communication that includes audio, visual, and graphical representations. Multimedia plays a significant role in web development as it reduces literacy difficulties and makes a website more user-friendly. Therefore, HTML provides several multimedia tags to embed any multimedia file on a website. In this write-up, we will present how to add a multimedia file to a website, to do so you have to understand the following fundamentals of multimedia:

  • Multimedia in HTML
  • HTML-Supported Multimedia Formats
  • How to Add Images in HTML
  • How to Play Audio on a Website
  • How to Play Video on a Website
  • How to Play a YouTube Video Using HTML

Let’s explore each of the above-mentioned concepts one by one:

Multimedia in HTML

Multimedia is a way of transferring information from one source to the other. It can be anything like audio, video, etc. Through the power of HTML, we can add audio, video, or any other kind of multimedia files to our websites.

HTML-Supported Multimedia Formats

Every file has a file format and a file extension and these extensions let us know about the file formats. There are numerous file formats but in web development, the thing that matters the most is whether the file format is supported by the HTML standards or not?

Here is a list of HTML-supported file formats for different multimedia types:

Audio: mp3, Ogg, and wav have the support of all significant browsers.

Video: mp4, Ogg, and WebM are supported by HTML as well as by all major browsers like Google, chrome, Microsoft Edge, etc.

Image: jpg/jpeg, png, and gif are supported by HTML for images.

How to Add Images in HTML

HTML provides a <img> tag to add an image to a website; it takes two primary attributes i.e. src to specify the image’s path and alt to display some alternated text if an image is unable to load.

Example

Following piece of code will embed an image to a website:

<img src="cover1.jpg" alt= "Welcome to linuxhint">

Following will be the output for the above line of code:

How to Add Audio in HTML

In HTML <audio> tag is used to add an audio file to any webpage. Multiple attributes can be used within the audio tag to specify the working of the <audio> tag.

Example

Let’s assume an example to understand how <audio> tag works:

<body>

<audio controls>

<source src="song1.mp3" type="audio/mp3">

mp3 file not supported!

</audio>

</body>

Following will be the output for the above snippet:

Output verifies that the mp3 file is working perfectly.

How to Add Video in HTML

In HTML a <video> tag is used to add a video to any website. The HTML <video> tag can have multiple attributes like controls, autoplay, poster, etc. These attributes explore the working of the <video> tag.

Example

Let’s consider the below snippet for the profound understanding of HTML <video> tag

<html>

<body>

<video controls autoplay muted>

<source src="vid.mp4" type="video/mp4">

<source src="vid.ogg" type="video/ogg">

not supported!!

</video>

</body>

</html>

Inside <video> tag we specify the attributes to control the behavior of video:

  • The controls attribute will display the video options like play, pause, mute, etc.
  • The autoplay attribute will restart the video once it’s completed.
  • The muted attribute will enable the mute option.

Next, we utilize the source tag to insert the address of the video. We specify two video formats so that if the first video is unable to work then the browser will play the second one. And if for some reason the browser is unable to play both videos then the text “not supported! ” will appear on the screen. The output will be something like this:

How to embed a YouTube Video in a webpage using HTML

The <iframe> tag is used to embed any other document within the current HTML page. You have to follow the below-given steps to embed a youtube video in HTML:

Just go to the youtube video you want to embed on your site and click on the Share button:

Select embed:

A pop-up window will appear, copy the link from the right corner:

Paste the code in your HTML document

<iframe width="560" height="315" src="https://www.youtube.com/embed/e7BufAVwDiM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Just save the HTML code, and now you can play the youtube video on your website:

The youtube video is embedded on your site successfully.

Conclusion

HTML provides various tags to handle multimedia files to embed an audio, video, and image on a website using <audio>, <video>, and <img> tags respectively. To embed any other document within your website <iframe> tag can be used. This write-up demonstrates what is multimedia, and what are HTML supported multimedia formats. Moreover, it explains how to handle multimedia files in HTML such as images, videos, audios, and youtube videos.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.