How to add audio and video in a webpage using HTML

This tutorial will cover the incorporation of audio and video elements into a webpage using different HTML techniques. Prior to exploring the diverse methods for integrating audio and video content into a webpage, it is essential to have an understanding of the different formats that audio and video files can exist in.

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.

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:

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:

Develop a software application to showcase the functionality of embedding a file utilizing the <EMBED> component.

Example


<! DOCTYPE html>
<html>
<head>
<title> Embedding file using <EMBED> element </title>
</head>
<body>
<embed type = "video/webm" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" width = "400" align = ?center? border =?1? height = "100" AUTOSTART = "FALSE" >
<noembed> Browser do not support it </noembed>
           </body>
</html>

In the provided instance, when accessed through a web browser, the included audio file is downloaded and can be played by clicking the play button. The content within <noembed> tags will appear if the browser lacks support for the <embed> element.

Output:

Following is the output of this example.

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.

To illustrate, to insert an audio file using the <audio> element, the following code snippet can be utilized.

The DATA attribute specifies the location of the file to be embedded by including the assigned value in the file's URL. The TYPE attribute indicates the format and MIME type of the file. Different values that can be assigned include 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) among others.

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.

Develop a script showcasing how to utilize Embedding files with the <OBJECT> attribute:

Example


<! DOCTYPE html>
     <html>
     <head>
     <title> Embedding files using <OBJECT> element </title>
      </head>
      <body>
      <h3> Embedding files using OBJECT element </h3>
      <object data="movie.mp4" width="600" height="200"></object>
     </body>
     </html>

In the provided illustration, when accessed through a web browser, the included audio file will be downloaded and then played back.

Output:

Following is the output of this example.

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 .

Develop a script to showcase the functionality of incorporating audio by utilizing the <Audio> tag:

Example


<! DOCTYPE html>
<html>  
<head>
<title> Adding Audio using <Audio> Tag </title>
</head>
<body>  
<h1> Adding Audio using <Audio> Tag </h1>
<audio controls>  
  <source src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" type = "audio/mpeg">   
</audio>  
</body>
</html>

In the provided instance, when displayed in a web browser, the embedded audio will start playing automatically. The "controls" attribute determines which functionalities are available on the audio player. The attribute "src" within the <source> tag specifies the URL of the audio file.

Output:

Following is the output of this example.

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 .

Create a program showcasing how to incorporate a video using the < <video> tag.

Example


<! DOCTYPE html>
<html>  
<head>
<title> Adding video using <video> Tag </title>
</head>
<body>  
<video controls>  
  <source src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" type = "video/mp4">   
</video> 
</body>
</html>

In the provided instance, a video was incorporated utilizing the <video> tag.

The embedded video will start playing on its own. The presence of the "controls" attribute in the video tag indicates that the video player will have control functionalities. The attribute "src" within the <source> tag specifies the location of the video file to be loaded.

Output:

Following is the output of this example.

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.

As an illustration, to incorporate the audio file "mysong.avi" into a webpage, you can easily insert the subsequent code into your webpage.

Play song

Upon clicking the "Play Song" link on the website, the file named mysong.avi will be downloaded to the user's device and will be automatically opened using a plugin application. In case the browser does not support the plugin for the file, there is an option to download and install the necessary plugin on the local storage. Likewise, embedding a video file on a webpage can be achieved by utilizing the <video> element.

To illustrate, to incorporate the video file "myvideo.mpg" into a webpage, you can easily insert the subsequent code into your webpage.

Play Video

Input Required