Course Content
HTML Introduction
0/1
HTML Editors
0/1
HTML Basic Tags
0/1
HTML Elements
0/1
HTML Attributes
0/1
HTML Headings
0/1
HTML Paragraph
0/1
HTML Text Formatting
0/1
HTML Meta Tags
0/1
HTML Quotations
0/1
HTML Comments
0/1
HTML Images
0/1
HTML Background
0/1
HTML Colors
0/1
HTML Lists
0/1
HTML Tables
0/1
HTML Forms
0/1
HTML Spell Check
0/1
HTML Media
0/1
HTML Marquees
0/1
HTML CSS
0/1
HTML Links
0/1
HTML Block & Inline
0/1
HTML Classes
0/1
HTML Id
0/1
HTML I frames
0/1
HTML Java script
0/1
HTML File paths
0/1
HTML Layout
0/1
HTML Responsive
0/1
HTML Computer Code
0/1
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

  1. Embed Element
  2. Video Element
  3. Audio Element
  4. 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


 

 

Exercise Files
No Attachment Found
No Attachment Found
error: Content is protected !!