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:
The various video formats available are:
There are following three ways to include audio and video in a webpage.
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:
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. 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:
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. 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. 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. 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> Next TopicHTML Accessibility |