HTML Media

HTML Tutorial

About Lesson

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