windows 8
 
Login Login    Register      

Technology ArticlesGiveawaysArticle TopicsAndroid PhonesOperating SystemsForumAsk ExpertsProduct ReviewsPractice Tests
Join our online Google+ community for Bloggers, Content Writers and Webmasters




Resources ยป Internet & Browsers

Syntax for <video> tag in HTML5 to embed video in web pages


Posted Date:     Category: Internet & Browsers    
Author: Member Level: Diamond    Points: 100


Thanks to HTML5, we do not need Flash and Silverlight anymore to display video in web pages. In this article, I will discuss how to use HTML5 to embed video files in web pages. Also, I have given the syntax to use video tag.



 


HTML5 offers a lot of new tags to add rich controls to the web pages. So far, we had to use a lot of plug-ins like Flash and Silverlight to display videos in web pages. HTML 5 is still not an official standard yet and not fully supported by any browsers. But some of the tags like VIDEO are supported by most browsers.

New video tag in HTML5


HTML 5 introduces the new VIDEO tag which can be used to display videos in web pages.

Syntax of VIDEO tag in HTML 5
Here is the syntax of VIDEO tag in HTML 5

<video
src="/videos/myvideo.mp3"
poster="/images/myvideo.pg
preload=none|metadata|auto
autoplay
loop
muted
controls
width="400"
height="400"
>
Your browser does not support video tag in HTML5.
<video>

Attributes of video tag explained:
src: specifies the url of the video file.
poster: indicates the url of an image which will be displayed when there is no video to display.
preload: this is an enumeration with 3 possible values. 'none' indicates the media need not be loaded upfront to reduce server load. 'metadata' indicates only meta data need to be download. 'auto' lets the browser decide how to load it.
autoplay: automatically starts playing the video when the page is loaded.
mediagroup:
loop: Restarts the video automatically when the video finish playing.
muted: the audio will be turned off
controls: display the video controls in the screen
width: width of the video control
height: height of the video control

Anything between the <video></video> will be processed by browsers that do not recognize the <video> tag. So, you may use some text to display an error message or use some other html controls as a fallback mechanism to display an image or video.

Which browsers support VIDEO tag


The following browsers currently support the video tag:

  • Safari 3

  • Google Chrome

  • Internet Explorer 9

  • Opera 10.5

  • Firefox 3.5


  • Since not all web browsers support the <video> tag yet, you must have a fall back mechanism for your video. One of the approaches you can follow is, if the browser does not support HTML5 or does not support <video> tag, then use Flash to play the video. It can be done by using the object tag within the <video> tag. Since the browsers that do not support <video> will skip it, but executes anything that it recognizes, the object tag can be used between <video> tags to show video using Flash. Browsers that recognize the <video> tag knows it has to skip anything between tags <video> and </video>.
    Related Resources:


    Read related articles: HTML 5 Tutorials    HTML 5 tag reference    HTML 5    


    Did you like this resource? Share it with your friends and show your love!





    Responses to "Syntax for <video> tag in HTML5 to embed video in web pages"
    Feedbacks      

    Post Comment:




  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:   Sign In to fill automatically.
    Email: (Will not be published, but required to validate comment)



    Type the numbers and letters shown on the left.


    Next Resource: Compare Apple iCloud with Google Docs
    Previous Resource: How to convert selected text into hyperlinks in Google spreadsheets?
    Return to Resources
    Post New Resource
    Category: Internet & Browsers


    Post resources and earn money!
     
    More Resources
    Popular Tags   Tag posting guidelines   Search Tags  
    (No tags found.)


    Subscribe to our upcoming monthly newsletters and learn about the new opportunities in Techulator.com

    Sign up for our Newsletter!
    Subscribe to RSS Feeds by Email
    Online MembersHafeezur Rahman P
    More...
    Awards & Gifts
    Active Members
    TodayLast 7 Daysmore...

    Talk to Webmaster
    Tony John

    Facebook
    Google+
    Twitter
    LinkedIn
    RSS Feeds Resource Feeds
    Forum Feeds
    Job Feeds


    About Us    Trademark Disclaimer    Contact Us    Copyright    Privacy Policy    Terms Of Use    Revenue Sharing sites   Advertise   Talk to Tony John