Multimedia on the web is sound, music, videos, movies, and animations.
What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more. Web pages often contain multimedia elements of different types and formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more. Web pages often contain multimedia elements of different types and formats.
How add media file in HTML?
The easiest way to add video or sound to your web site is to include the special HTML tag called <embed>. This tag causes the browser itself to include controls for the multimedia automatically provided browser supports <embed> tag and given media type.
Browser Support
The first web browsers had support for text only, limited to a single font in a single color. Later came browsers with support for colors, fonts, images, and multimedia! the most recent version, supports all types of multimedia, including images, music, sound, videos, records, films, animations, and more. The first web browsers only supported text and could only display a single font in a single color. Colors, fonts, images, and multimedia support were later added to browsers!
Multimedia Formats
Multimedia elements (like audio or video) are stored in media files. The most common way to discover the type of a file, is to look at the file extension. Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
The simplest approach to add video or audio to our website is to use the HTML <embed> tag. HTML provides different multimedia tags that allow you to add multimedia files to your website. audio, video, embed, and object is some of the tags that are used.
The audio tag is used to display audio files on a Web page, while the video tag is used to display video files. The embed and object tags display multimedia content on a Web page and also allow you to embed files from other websites.
Common Video Formats
 | There are many video formats out there. The MP4, WebM, and Ogg formats are supported by HTML. The MP4 format is recommended by YouTube. |
| Format | File | Description |
|---|---|---|
| MPEG | .mpg .mpeg | MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on the web. Not supported anymore in HTML. |
| AVI | .avi | AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers. |
| WMV | .wmv | WMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers. |
| QuickTime | .mov | QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware. Plays well on Apple computers, but not in web browsers. |
| RealVideo | .rm .ram | RealVideo. Developed by Real Media to allow video streaming with low bandwidths. Does not play in web browsers. |
| Flash | .swf .flv | Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web browsers. |
| Ogg | .ogg | Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML. |
| WebM | .webm | WebM. Developed by Mozilla, Opera, Adobe, and Google. Supported by HTML. |
| MPEG-4 or MP4 | .mp4 | MP4. Developed by the Moving Pictures Expert Group. Commonly used in video cameras and TV hardware. Supported by all browsers and recommended by YouTube. |
Common Audio Formats
MP3 is the best format for compressed recorded music. The term MP3 has become synonymous with digital music. If your website is about recorded music, MP3 is the choice.
| Format | File | Description |
|---|---|---|
| MIDI | .mid .midi | MIDI (Musical Instrument Digital Interface). Main format for all electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital notes that can be played by electronics. Plays well on all computers and music hardware, but not in web browsers. |
| RealAudio | .rm .ram | RealAudio. Developed by Real Media to allow streaming of audio with low bandwidths. Does not play in web browsers. |
| WMA | .wma | WMA (Windows Media Audio). Developed by Microsoft. Plays well on Windows computers, but not in web browsers. |
| AAC | .aac | AAC (Advanced Audio Coding). Developed by Apple as the default format for iTunes. Plays well on Apple computers, but not in web browsers. |
| WAV | .wav | WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems. Supported by HTML. |
| Ogg | .ogg | Ogg. Developed by the Xiph.Org Foundation. Supported by HTML. |
| MP3 | .mp3 | MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines good compression (small files) with high quality. Supported by all browsers. |
| MP4 | .mp4 | MP4 is a video format, but can also be used for audio. Supported by all browsers. |
How to add multimedia to HTML
we learn how to add multimedia to Html, in multimedia we learn how to add images, video, audio, and how to embed YouTube videos in your website.
1. how to add image to HTML
We add images in HTML using image tag, image tag used for insert image in HTML so we have 2 attributes in image tags 1tag is file tag is src=”” Where we insert file path for insert image and 2tag is alt=”” Alt tag is used for backup image tags if the image did not load for weak internet connection so alt text appears.
Code of How to add an image to HTML
<img src="./cwr.png" alt="codewithrandom">
Output
2. How to add a video to HTML
We add a video tag for inserting videos in our HTML web page. We have many attributes in the video tag. 1st tag is the source tag in this source tag we insert file path in src attributes and we have type attributes so we give mp4/Ogg.
Code of How to add a video to HTML
<video width="320" height="240" src="./Cwr.mp4"></video>
output
There is a screenshot of our video on a web page we have few more tags to control our video.
Autoplay- video start automatically when we use Autoplay attributes in our video tag.
Control – control tag gives play/pause and some other control to our video on the webpage.
3. How to add audio to HTML
We add audio to our webpage using a simple audio tag this tag is very similar to an HTML video tag.
Code of How to add audio to HTML
<audio controls>
<source src="./random.mp3" type="audio/ogg">
</audio>
output
Basically, we use an audio tag and easily put it into src but for better understanding, we use the source in our audio Or video tag. Also, we here define our audio type, and here is our music/audio ready to see on the web page. Also, we use the control tag that we use in our video tag for control so as we use in audio for play/pause control and music volume up/down.
4. How to add Youtube video to HTML
Adding YouTube video in HTML is also multimedia so first we going to youTube and copy any video link and let’s create an iframe tag I know it’s the new tag for some Beginners I am also a Beginners so create an iframe tag inside just define width & heights and use src=”” tag and paste youTube video link that’s it.
Code of How to add a youtube video to HTML
<iframe width="560" height="315" src="https://www.youtube.com/embed/Pi17hHq81D0" ></iframe>
output
In this post we learn how to add multimedia to HTML, like images, videos, audio also learn to embed youTube videos in HTML with simple coding. If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.
written by – code with random/Anki
