 |
| USE OF EMBED TAG IN HTML5 |
Introduction of HTML5 <embed> Tag
<embed> tag is a HTML5 element which defines a container for external application or Plug-in. It is new in HTML5, you can't use in another version like HTML4. If you use, the page will not validate.
If you want to add multimedia files on your webpage such as audio, video or flash etc. HTML5 provides you <embed> tag. While using this tag, you can easily add any multimedia file on your webpage.
If you want to add multimedia files on your webpage such as audio, video or flash etc. HTML5 provides you <embed> tag. While using this tag, you can easily add any multimedia file on your webpage.
<embed> tag creates an embedded panel for the third-party application such as Flash-based object inside the webpage, in which your multimedia file is shown. When you use <embed> tag, a control panel is automatically provided by the browser.
For example, if you want to add a video on the webpage then play, pause controls etc will appear.
In HTML5, different tags are provided for every kind of media file, such as <audio>, <video> etc.
These HTML5 tags will be explained further but before that let's see what the attributes can be used with <embed> element.
Attributes of <embed> Tag
Four important attributes are used with the HTML5 <embed> tag. These are given below.
src
By this attribute, you can give the address of the file that you want to include in the webpage.
height
The height of the panel is defined by this attribute.
width
This attribute defines the width of the panel.
type
With this attribute, you can define the type of included file.
In addition to these attributes, global and event attributes are also used with <embed> tags.
How to use embed tag in html5?
Let's try to understand the <embed> tag with an example.
<!DOCTYPE html>
<html>
<html>
<head>
<title> Example of embed tag </title>
</head>
<body>
<h1> My favorite song </h1>
<embed src = "/media/video/FileName" height = "400" width = "500">
</body>
</html>
In the above example, a video file has been added to the webpage by using the <embed> tag. The height and width of the video file will be 400 and 500 respectively.
HTML5 <noembed> Tag
All browsers don’t support <embed> tag. You can use <noembed> tag for such browsers. This tag is used within the <embed> tag.
If <embed> tag does not support any browser, then with this tag you can show an image in that browser rather than that media file. Let's try to understand it with an example.
<!DOCTYPE html>
<html>
<html>
<head>
<title> example noembed tag </title>
</head>
<body>
<embed src = "/media/videos/FileName" height = "400" width = "500">
<noembed src = "/media/images/photo.jpg">
</embed>
</body>
</html>
In the above example, if a browser does not support <embed> tag then the image will be shown in the <noembed> tag.
HTML5 <audio> Tag
With the audio tag, you can add mp3 files on any webpage. This is an inline tag. That is, you can add it to a text line. The common properties of this tag are given below.
src
By this attribute, you can define the address of the audio file.
autoplay
With this attribute, you can set the audio file to play automatically as it loads.
controls
This attribute tells you which controls will be shown with the audio file.
loop
This attribute defines whether the audio file will be a repeat or not. This attribute has two values true and false.
muted
By this attribute, it is defined that the audio file will be muted when it loads.
preload
This attribute defines how and when the audio file should be loaded.
Below is the <audio> tag which has been explained by an example.
<!DOCTYPE html> <html>
<head>
<title> example of the audio tag </title>
</ head>
<body>
<h1> My favorite song </h1>
<audio src = "media/audio/example/song.mp3" controls = "controls">
</audio>
</body>
</html>
HTML5 <video> Tag
With HTML5 <video> tag you can add the video file to any webpage. This tag is used with the same attribute which is used in the <audio> tag. This tag is explained below by an example.
<!DOCTYPE html>
<html>
<head>
<title> Example of video tag </title>
</head>
<body>
<video src = "media/video/movie.mp4" controls = "controls">
</video>
</body>
</html>
1. Google Chrome
2. Firefox
3. Internet Explorer
4. Safari
5. Opera
Compatible Browser
All popular browser compatible with <embed>, <video> and <audio> tags in HTML5. These are given below.1. Google Chrome
2. Firefox
3. Internet Explorer
4. Safari
5. Opera
Posts
0 comments:
Post a Comment
Thank you for reading the post.