Embedding Multimedia on a Web Page

Nowadays, several websites require plug-ins, such as Flash, to render media files. However, with the advent of HTML 5, websites no longer need to rely on third party plug-ins to render media files. HTML 5 has introduced new media elements, such as audio or video, which can be used to play media files on a Web page without downloading any plug-ins.

In this section, you learn how to embed multimedia on a Web page, such as sound or video.

Let’s now learn to embed a multimedia on a Web page.

Apart from text and images, you can also embed multimedia objects, such as audio and video clips, on a Web page. For example, you can embed a YouTube video in your Web page. There are various ways, such as the <audio> and <video> tags, to embed multimedia files on a Web page.

In this section, you learn how to embed media files on a Web page by using the new media elements, such as audio, video, and source. In addition to this, you also learn to embed multimedia by using the <embed> tag.

The <audio> Tag

HTML 5 has introduced a new audio element to embed a sound or audio file into HTML document. There are various websites, such as YouTube, that facilitates the user to play, listen or download the music files. Therefore, to play music on a Web page, you can embed music files that can be listened by the users.

Sometimes, a browser does not support the <audio> tag. In that case, you can display some content to the user, which informs the user that the browser does not support the tag. This content is placed between the opening and closing tag of <audio> and is termed as a fallback content. If the browser does not provide a support to the <audio> tag, fallback content is displayed on a Web page.

The element-specific attributes of the audio tag are listed in below table:

Attributes of the <audio> Tag

Attribute	Value	Description
autoplay	autoplay	Playes the sound the immediately or automatically on the loading of a Web page
controls	controls	Displayes the controls on a Web page, such as a play button or a stop button
preload	None metadata auto	Starts the buffering of the file
src	URL	Specifies the path of an audio fiel to be played
loop	Loop	Indicates to reply the audio file once it is finished

Let’s do the following steps to embed an audio file:


<!DOCTYPE html>
<head>
    <title>Using the Audio Tag </title>
</head>
<body>
    <h1>Simple Audio Example</h1>
    <h2>Playing MP3 File</h2>
    <audio controls=”controls” autoplay=”autoplay” src=”music\audio.mp3”></audio>
    <!—[if IE]>
    <bgsound src=”music\audio.mp3”>
    <! [endif] -->
</body>
</html>

Note: that you need to change the location of the audio file that is provided in the src attribute according to the location of file on your system.

Save the document with the name PlaySound.html and open on browser.

Note: This tag is only compatible with some of the browsers, such as Firefox 3.5+ and Safari 3.1+ and Google Chrome.

The <video> Tag

You can play a video file by using the <video> tag that has been introduced as a media element in HTML 5. With the <video> tag, you can add the functionality to manipulate the videos and built-in video controls in a Web page. Along with this, you can also include a video player without installing a plug-in, such as Flash. The attributes of the <video> tag are listed in below table:

Attributes of the <video> Tag

Attribute	Value	Description
autoplay	autoplay	Playes a video file immediately or automatically on the loading of a Web page
controls	controls	Displays the controls on a Web page, such as a play button or a stop button
poster	Image URL	Displays an image in case the video in unavailable or not loaded yet
preload	preload	Starts the buffering of the file
src	URL	Specifies the path of the video fiel to be played
loop	Loop	Indicates to reply the video file once it is finished
height	pixels	Specifies the height for the video player displayed on a Web page
width	pixels	Specifies the width for the video player displayed on a Web page

Note: Internet Explorer does not provide support to the <video> tag. This tag is only compatible with some of the browsers, such as Firefox 3.5+ and Safari 3.1+, Embedding a video on a Web page can be done by using file <embed> tag, which you learn later in this section.

The <source> Tag

HTML 5 has introduced the <source> tag to embed two or more audio or video files of different media types. The browser may choose the type of file to play based on its media type of codec support. The <source> tag is used inside the media element, such as audio or video, to embed audio or video files. In other words, you can include more than one <source> tag within the media element. The <source> tag contains three element-specifies attributes for specifying video or audio files, which are listed in below table:

Attributes of the <source> Tag

Attribute	Value	Description
src	URL	Specifies the path of the file name to play an audio or video file
type	Numeric value	Indicates the type of content that is embedded on a Web page
media	Media query	Specifies the type of media resource, which is to be downloaded on the browser or not

Let’s do the following steps to use the <source> tag and embed media file on a Web page:


<!DOCTYPE html>
<head>
    <title>Using the Audio Tag </title>
</head>
<body>
    <h1>Simple Audio Example</h1>
    <h2>Playing MP3 File</h2>
    <source controls=”controls” autoplay=”autoplay” src=”music\audio.mp3”></audio>
    <!—[if IE]>
    <bgsound src=”music\audio.mp3”>
    <! [endif] -->
</body>
</html>

Save the document with the name SourceAudio.html and open on browser.

The <embed> Tag

There is another way to embed an audio file or a video file on a Web page by using the <embed> tag. Inside the <embed> tag, the src attribute is used to specify the path of the audio or video file you want to embed.

The element-specific attributes of the <embed> tag are listed in below table:

Attribute	Value	Description
src	URL	Specifies the path of the file name to play an audio or video file
type	MIME type	Indicates the type of content that is embedded on a Web page
height	Pixels	Specifies the height to display content on a Web page
width	Pixels	Specifies the width to display content on a Web page

Let’s learn to embed the sound and video files using the <embed> tag in detail.

Embedding an Audio File using the <embed> Tag

You can embed an audio file by using the <embed> tag to play a sound on the browser. Inside the <embed> tag, use the src attribute to specify the path of the audio file you want to embed on a Web page.

Let’s do the following steps to embed an audio file:


<!DOCTYPE html>
<html>
<head>
    <title> Embedding Audio file </title>
</head>
<body>
<center>
    <h1>Embedding Audio Example</h1>
    <h2>Playing MP3 File</h2>
    <embed src=”mysong.mp3” >
    <h2> Playing Sound </h2>
    <embed src=”mysong.mp3” width=”150” height=”100”>
</center>
</body>
</html>

Note: in the src attribute of the <embed> tag ,we have specified the path of the audio file (in our computer)that we are embedding on our Web page. You need to specify the path of the audio file (in your computer or other web server address) that you want to embed on your web page. The audio file that you want to embed on your web page must reside in your computer.

Save the document with name EmbeddingSound.html and open on browser.

Embedding a Video file using the <embed> Tag

You can also embed a video file to a Web page by using the <embed> tag. Inside the <embed> tag, use the src attribute to specify the path of the video file you want to embed.

Let’s do the following steps to embed a video file:


<!DOCTYPE html>
<html>
<head>
    <title> Embedding Video file </title>
</head>
<body>
<center>
    <h1>Embedding Video Example</h1>
    <h2>Playing Video File</h2>
    <embed src=”myvideo.mov” type=”video/quicktime” width=”350” height=”250” >
</center>
</body>
</html>

Save the file with name embeddingVideo.html and open on browser.

PRV MENU NEXT