HTML – Media
Html Media (Audio and Video) are used to embed media files like mp3 and mp4 in the web document.
It is a part of multimedia that includes audio or video visualization in the document as per requirement. Multimedia on the web documents like audio – sound, video, animation, graphics, images, etc. Multimedia element used with source files which are stored and used as a source.
Example formats mp3, mp4, wave, Ogg, are some common extensions.
Audio Media Tag
The audio tag is used for inserting an audio file with an audio player in the web document. This element will generate an audio media with the sound player and controls.
Below is the Html Code for Using Audio Media.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML TUTORIALS</title>
</head>
<body>
<h1>HTML MEDIA - AUDIO tag</h1>
<hr>
<audio controls>
<source src="file_name.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Here the audio element is used with source element inside it, where the audio element is for an audio player and source element is for providing a path to an actual audio/sound file. In the above example, the mp3 extension is used in source and audio/mp3 is used for specifying the typical format of the file. The audio tag is a paired tag and it is used with a source tag which is an unpaired tag.
The “controls” attribute is used for adding features in an audio player like play & pause button, sound control button, seek bar, timer, and with a menu option to download that file from the browser.
Supportable Audio Formats
There are some supportable audio file formats.
| Audio Formats | Media Type Format | Chrome | Edge/IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|---|
| MP3 | audio/mpeg | Yes | Yes | Yes | Yes | Yes |
| WAV | audio/wav | Yes | No | Yes | Yes | Yes |
| OGG | audio/ogg | Yes | No | Yes | No | Yes |
Video Media Tag
The video tag is used for inserting a video file in the web document. It is a web media tag for web-based documents similar to the audio tag. The video-tag is used with attributes like width, height ( for specifying video player width and height), and controls. It is also a paired tag and used with a source tag inside it, which provides a path to the actual video file.
Below is the Html Code for Using Video Media.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML TUTORIALS</title>
</head>
<body>
<h1>HTML MEDIA - Video tag</h1>
<hr>
<video width="500" height="500" controls>
<source src="video_file_name.mp4" type="video/mp4">
</video>
</body>
</html>
Here this code will display a video player and its controls for video. The attribute controls will generate play & pause button, volume button, full screen, and out of the full-screen button, menu with download option.
Supportable Video Formats
There are some supportable video file formats.
| Audio Formats | Media Type Format | Chrome | Edge/IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|---|
| MP4 | video/mpeg | Yes | Yes | Yes | Yes | Yes |
| WebM | video/webm | Yes | No | Yes | No | Yes |
| OGG | video/ogg | Yes | No | Yes | No | Yes |