MyBlogHelp– A Blog for SEO, Blogging, Web Design, Web Development
  • Home
  • About
  • Contact
  • Privacy
  • Sitemap
  • BLOG
  • BLOGGING
    • SEO
    • BlogSpot
    • WORPRESS
    • GOOGLE
    • COMPUTER TIPS
  • WEB DESIGN
    • HTML
    • CSS
    • BOOTSTRAP
    • JAVASCRIPT
    • JQUERY
  • WEB DEVELOPMENT
    • PHP
    • WORDPRESS
  • MAKE MONEY
    • ONLINE BUSINESS
    • ADSENSE
    • AFFILIATE MARKETING
  • DOWNLOADS
    • Blogger Template
    • Wordpress Theme
    • PDF

Sunday, January 6, 2019

How to use source tag in html5?

 MyBlogHelp     January 06, 2019     html     No comments   

 source tag in html5
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.

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.

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.

source tag example


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.


      << PREVIOUS                                                                                     NEXT >>





  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 comments:

Post a Comment

Thank you for reading the post.

Blog Archive

  • ▼  2019 (52)
    • ►  December (1)
    • ►  November (2)
    • ►  October (1)
    • ►  August (1)
    • ►  July (1)
    • ►  May (11)
    • ►  April (10)
    • ►  March (6)
    • ►  February (3)
    • ▼  January (16)
      • What is bootstrap and its major advantages of crea...
      • What is CSS? CSS Tutorial 01
      • How to use input attributes in html5?
      • How to use input type in html5?
      • How to use output tag in html5?
      • How to use keygen tag in html5?
      • How to use datalist tag in html5?
      • How to use svg tag in html5?
      • How to use canvas tag in HTML5?
      • How to use the track tag in html5?
      • How to use source tag in html5?
      • How to use embed tag in html5?
      • How to use the main tag in html5?
      • How to use Ruby tag in html5?
      • How to use html5 mark tag to highlight text?
      • How to use html5 footer tag?
  • ►  2018 (54)
    • ►  December (27)
    • ►  November (5)
    • ►  May (5)
    • ►  April (4)
    • ►  February (3)
    • ►  January (10)
  • ►  2017 (17)
    • ►  December (9)
    • ►  November (8)

Popular Posts

  • How to use keygen tag in html5?
  • How to use html5 mark tag to highlight text?
  • How to start Online Business without money from home?
  • What is a search engine?
  • Top 10 Plagiarism Checker Website Which Provides Free Online Tool to Check Copyright Content

Contact Us

Name

Email *

Message *

About MyBlogHelp

Most of the post, we share on this blog related to SEO, Blogging, BlogSpot(Blogger), Wordpress, Online Business, Online Make Money, Online Earnings, Training tutorials such as HTML, CSS, Bootstrap, JavaScript, PHP, and Computer Tips.

Featured Post

How to use keygen tag in html5?

Follow by Email

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © MyBlogHelp– A Blog for SEO, Blogging, Web Design, Web Development | Powered by Blogger
Design by Md. Abdussamad | Blogger Theme by MyBlogHelp.com