MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.
  • Home
  • About
  • Contact
  • Privacy
  • Sitemap
  • BLOG
  • AFFILIATE MARKETING
    • LeadsArk
  • MORE
    • MAKE MONEY
      • ONLINE BUSINESS
      • ADSENSE
      • AFFILIATE MARKETING
    • BLOGGING
      • SEO
      • BlogSpot
      • WORPRESS
      • GOOGLE
      • COMPUTER TIPS
    • WEB DESIGN
      • HTML
      • CSS
      • BOOTSTRAP
      • JAVASCRIPT
      • JQUERY
    • WEB DESIGN
      • HTML
      • CSS
      • BOOTSTRAP
      • JAVASCRIPT
      • JQUERY
    • WEB DEVELOPMENT
      • PHP
      • WORDPRESS
  • DOWNLOADS
    • Blogger Template
    • Wordpress Theme
    • PDF

Saturday, January 5, 2019

How to use embed tag in html5?

 MyBlogHelp     January 05, 2019     html     1 comment   

embed Tag in html5
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.

<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>
<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>
<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>

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 



     << PREVIOUS                                                                                      NEXT >>





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

1 comment:

  1. AnonymousApril 18, 2019 at 5:55 AM

    I սnderstand your business better than anyone else. Ԍiᴠen the fwct tgat
    a lot of users noow access tһee website through a myгiad of devices to accеss the internet, and it is dіfficult to get a separate websiote to respond to either onne оf
    them, it would be ɡood to just opt for weƄsites with responsive designs.
    This begins a 12 month qսest for purpose and meanin in an empty life, as
    Jason attempts to cⲟmplete the taѕks required to receive Red Stevens’ greatest
    bequest.

    ReplyDelete
    Replies
      Reply
Add comment
Load more...

Thank you for reading this post. Please do not enter any spam link in the comment box.

Followers

Blog Archive

  • ►  2020 (4)
    • ►  October (1)
    • ►  September (1)
    • ►  August (2)
  • ▼  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 the main tag in html5?
  • 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?

Contact Us

Name

Email *

Message *

About MyBlogHelp

Most of the posts, we share on this blog related to Affiliate Marketing, Organic Lead Generation, Digital Marketing, Social Media Marketing, Make Money Online, SEO, and web design.

Featured Post

LeadArk - Affiliate Marketing | Qualified Organic Lead Generation | LeadsArk Review

Copyright © MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.
Design by Md. Abdussamad | MyBlogHelp.com