- 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.
Following piece of code will embed an image to a website:
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.
Let’s assume an example to understand how <audio> tag works:
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.
Let’s consider the below snippet for the profound understanding of HTML <video> tag
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:
A pop-up window will appear, copy the link from the right corner:
Paste the code in your HTML document
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.
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.