How to add audio and video in a webpage using HTML?

In this article, we will discuss how to add audio and video in a webpage using various methods of HTML. Before discussing the various ways available for adding audio and video in webpage, we should be aware of various audio and video formats.

The various audio formats available are:

  • MIDI (Musical Instrumental Digital Interface)
  • WAV (Waveform Audio)
  • MP3 or MPEG (Motion Picture Experts Group)
  • AIFF (Audio Interface File Formats)

The various video formats available are:

  • AVI (Audio/Video Interleaved)
  • MOV (Quick Time)
  • MPG etc.

There are following three ways to include audio and video in a webpage.

  • Embedding file using <EMBED> element
  • Embedding files using <OBJECT> element
  • Adding audio using Audio Tag
  • Adding Video using Video tag
  • Linking using <A> element

Let us explain one by one.

1. Embedding file using <EMBED> element: The <EMBED> element is used to include a file in a webpage that requires a special plug-in or helper application such as audio, video and flash animations etc. The <EMBED> element is supported by both the Netscape Navigator and MS-Internet Explorer but not supported by any other browser. While working with the <EMBED> element, it is essential to include SRC attribute with value set to the Audio/Video filename that you want to include.

For Example:

<EMBED SRC ="myvideo.mpg">

In addition to the "SRC" attribute you can also include a number of optional attribute such as:

  • WIDTH: This attribute is used to specify the width of an object. It is specified in pixels.
  • HEIGHT: The height attribute is used to specify the height of an object. It is also specified in pixels.
  • HIDDEN: This attribute is to specify whether to hide the object or not. The possible values are TRUE and FALSE.
  • ALIGN: It is used to specify the alignment of an object. The possible value of align attribute is LEFT, RIGHT and Center.
  • HSPACE: This is used to specify the amount of space to the left and right of an object.
  • VSPACE: It is used to specify the amount of space to the top and bottom of an object.
  • BORDER: As a name indicates, border attribute is used to specify the width of the border of an object. It is specified in pixels.
  • AUTOSTART: This attribute is used to specify whether the object is automatically start or not. The possible values that can be assigned to this attribute are TRUE (default) and FALSE.

For Example:

<EMBED SRC = "movie.mp4" AUTOSTART = "FALSE" HEIGHT = "20" WIDTH = "150">

Write a program to demonstrate the working of Embedding file using <EMBED> element.

Explanation: In the above example, on viewing it in a web browser, the embedded audio file will be downloaded and you can execute it when you click the play button. The text enclosed in <noembed> tags will be displayed if the browser does not supports <embed> element.

Output:

Following is the output of this example.

How to add audio and video in a webpage using HTML

2. Embedding files using <OBJECT> element: The <OBJECT> element is a standard element used for embedding objects (files) in your webpage. It is a replacement for already existing <EMBED> element. In addition to audio and video files, it is useful for including ACTIVE-X controls, text, java applets and even some video files and other WebPages in your page. The <OBJECT> element is like an empty element but a closing tag is required.

For Example: In order to include an audio file using <OBJECT> element, we will write.

<OBJECT DATA = "song.mp4" type = "video/mpg">

The DATA attribute tells the browser where to locate the file that you want to embed the value assigned to this attribute in the URL of the file to be embedded. The TYPE of a file to be embedded along with its MIME type. Various values that can be assigned to it are audio/basic (for all), audio/wav( for .wav), audio/mpeg( for .mp3),video/quicktime( for .mov), video/mpeg( for .mpg) and video/msvideo( for .avi) etc.

In addition to the "DATA" and "TYPE" attribute you can also include a number of optional attribute such as:

  • WIDTH: This attribute is used to specify the width of an object. It is specified in pixels.
  • HEIGHT: The height attribute is used to specify the height of an object. It is also specified in pixels.
  • AUTOSTART: This attribute is used to specify whether the object is automatically start or not. The possible values that can be assigned to this attribute are TRUE (default) and FALSE.

Write a program to demonstrate the working of Embedding files using <OBJECT> element:

Explanation: In the above example, on viewing it in a web browser, the embedded audio file will be downloaded and played.

Output:

Following is the output of this example.

How to add audio and video in a webpage using HTML

3. Adding Audio using <Audio> Tag: The <audio> tag is used to add audio directly into HTML webpage. The <source> used with the "src" attribute to add the source of audio in a webpage. For more information we can refer HTML Audio Tag.

Write a program to demonstrate the working of Adding Audio using <Audio> Tag:

Explanation: In the above example, on viewing it in a web browser, the embedded audio file will be played automatically. The controls attribute is specify which controls on the audio player is played. The <source> tag attribute "src" defines the URL of the audio file.

Output:

Following is the output of this example.

How to add audio and video in a webpage using HTML

4. Adding Video using <Video> Tag: The <video> tag is used to add video directly into HTML webpage. The <source> used with the "src" attribute to add the source of video in a webpage. For more information we can refer HTML Video Tag.

Write a program to demonstrate the working of Adding video using < <video> Tag:

Explanation: In the above example, we added a video using <video> tag.

The embedded video file will be played automatically. The video "controls" attribute is specifying the video controls player is played. The <source> tag attribute "src" defines the URL of the video file.

Output:

Following is the output of this example.

How to add audio and video in a webpage using HTML

5. Linking using <A> element: The <A> element is one of the most reliable ways to add multimedia to your WebPages. Just as you use <A> element to link HTML files, similarly you can use it to link audio and video files to a webpage. The only change to be made is in the value of HREF attribute which is assigned an audio or video filename instead of a HTML file.

For Example: In order to add audio file "mysong.avi" to a webpage. We will simply include the following code in your webpage.

<A HREF = "mysong.avi"> Play song </A>

When a user clicks the link "Play Song" on the webpage the file mysong.avi is downloaded on the visitor computer and automatically played with a plug-in application. If the browser is unable to load the plug-in correspondence to the file then option is available to download the required plug-in on your hard disk. Similarly, you can include a video file on a webpage using <A> element.

For Example: In order to add video file "myvideo.mpg" to a webpage. We will simply include the following code in your webpage.

<A HREF = "myvideo.mpg"> Play Video </A>






Latest Courses