 |
| USE OF HTML5 SOURCE TAG |
Introduction of HTML5 <source> Tag
<source> tag is HTML5 element which specifies different type of media resources such as <picture>, <audio> and <video> tag. This is an empty tag which is used to serve as same media content in multiple formats those are supported by different browsers.
You use <audio> tag and <video> tag to add an audio or video on any webpage. With the src attribute in these tags, you specify the location of the media file that you want to include. This is a simple process as you do when adding images.
You use <audio> tag and <video> tag to add an audio or video on any webpage. With the src attribute in these tags, you specify the location of the media file that you want to include. This is a simple process as you do when adding images.
But sometimes it may happen that the user is viewing your webpage through a different web browser and that browser does not support the audio and video format you added. In such a situation, your media resource will not load in that browser.
In this situation, the mechanism is required to add alternate media file formats which can be loaded by selecting the browser appropriate supportive file format. For this, HTML5 provides you a <source> tag.
By using this element you can define multiple media resources while including media elements. This happens for situations when the browser does not support any media file type. In such a way, selecting from multiple sources loads whatever media format supports.
Syntax of HTML5 <source> Tag
The general syntax for this tag is being given.
<source src = "media-file-URL">
<source src = "other-format-media-file-URL">
As you can see in the syntax above, the <source> tag does not have any closing tag. It is compulsory to use the "src" attribute with this tag.
Attributes of HTML5 <source> Tag
The following attributes are available with <source> tag.
src
- When you use this <source> tag with video and audio tags, this attribute is used to define the location of media resources.
srcset
- When you use this <source> tag with the <picture> tag, this attribute is used to define the URL of the image.
media
- With this attribute, you can define the media queries that you normally define with CSS.
sizes
- With this attribute, you can define different image sizes for different layouts.
type
- This attribute is used to define the MIME type of media resource.
This tag also supports all HTML attributes and event attributes of HTML.
This tag also supports all HTML attributes and event attributes of HTML.
Browser Support HTML5 <source> Tag
All the popular browsers, which fully supports this tag are given below.
1. Firefox
2. Internet Explorer
3. Google Chrome
4. Apple Safari
5. Opera
How to use source tag in html5?
Example of HTML5 <source> Tag
<html>
<head>
<title> Example of Source Tag </title>
</head>
<body>
<video controls>
<source src = "videos/movie.mp4">
<source src = "videos/movie.flv">
</video>
</body>
</html>
The output of the above code is below.
As you can see in the above example, two media resources have been specified by the <source> tag. The browser which does not support mp4 format will load the flv file.
An internet site must make properly on all browsers.
ReplyDelete