Resources ยป Internet & Web

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


Posted Date: 14-Jun-2011  Last Updated:   Category: Internet & Web    
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!

    Article by Tony John
    Tony John is a professional blogger from India, who started his first Weblog in 1998 at Tripod.com. Tony switched to blogging as a passion blended business in the year 2000 and currently operates several popular web properties including IndiaStudyChannel.com, Techulator.com, dotnetspider.com and many more.

    Follow Tony John or read 687 articles authored by Tony John



    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.


    Submit Article     Return to Article Index

    Online Members

    Prashant Dalal
    More...
    Awards & Gifts
    Active Members
    TodayLast 7 Daysmore...

    Talk to Webmaster Tony John