HTML Media
In this tutorial, we will learn to implement different media formats in HTML with the help of examples.
Multimedia Formats
Media is available in many different formats. It can be defined as almost anything which one can hear or see.
Some of the Media on the web are sound, music, video, movies, and animations.
Web pages consist of media elements that belong to different types and formats.
- HTML 5 is providing different elements for Multimedia.
- Media elements are getting stored in media files.
- The easiest way to find the type of a file is to look at the extension of the file.
- Media files have their own extensions like: .avi, .wav, .swf, .mp3, .mp4, .wmv, and so on.
- Common video formats are MP4, Ogg and WebM are supports by HTML.
- Common audio formats are MP3, MP4 (It is video format but also be used for audio).
Types of element for Multimedia
- Embed Element
- Video Element
- Audio Element
- Object Element
<embed> Element
- Embed element is used to add video or audio on the web page.
- The easiest way to add media files by simply using one tag.
- It is used as a container for embedding plug-ins such as flash animations.
- It only has an opening tag.
- We can also include <noembed> element for the browser which doesn’t support the <embed> element.
Embed Elements Attributes
| Attribute | Description |
|---|---|
| height | It determines the height of the embedded item |
| src | It specifies the URL/path of the embedded content |
| width | It determines the width of the embedded content |
| type | It specifies the media type of the embedded content |
Example :
<!DOCTYPE html>
<html>
<head>
<title>Embed Element</title>
</head>
<body>
<embed src = "./html.png">
</body>
</html>Output
<video> Element
- The <video> element is used to display a video on the web page.
- The <source> tag allows us to specify alternative video files.
- Control attribute: This attribute adds video controls, like play, pause, volume, resize.
- The text inside <video> and </video> element will display when the browser doesn’t support the <video> element.
- Common video formats are MP4, Ogg and WebM are supports by HTML.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Video Element</title>
</head>
<body>
<video width = "350px" height = "200px" controls>
<source src = "./video.mp4" type = "video/mp4">
<source src = "./video.ogg" type = "video/ogg">
Your browser does not support the video format
</video>
</body>
</html>Output
<audio> Element
- The <audio> element is used to play an audio file on the web page.
- The <source> tag allows us to specify alternative audio files.
- Control attribute: this attribute adds audio controls, like play, pause, volume.
- The text inside <audio> and </audio> element will display when the browser doesn’t support the <audio> element.
- Common audio formats are MP3, MP4 (It is video format but also be used for audio).
Example :
<!DOCTYPE html>
<html>
<head>
<title>Audio Element</title>
</head>
<body>
<audio controls>
<source src = "./sound.mp3" type = "audio/mp3">
<source src = "./audio.ogg" type = "audio/ogg">
Your browser does not support the audio format
</audio>
</body>
</html>Output
<object> Element
- The <object> element is used to embed multimedia content on the web page.
- The <object> element is supported by all browsers.
- The <object> element can also include multimedia files such as video, audio, image, PDF, or another page on your page.
- Data attribute: it specifies the URL/path of the resource.
- The text inside <object> and </object> element will display when the browser doesn’t support the <object> element.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Object Element</title>
</head>
<body>
<object width = "80px" height "100px" data = "./html.png"></object>
</body>
</html>Output
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of Media in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML Marquee.