Video Tag in HTML5

In this article I am going to describe about video tag in HTML5.

Video Tag

One of the exciting feature of HTML5 is <video>tag.Video Tag was introduced in HTML5. Video tag is used for adding video or media file in HTML document. It is not present in HTML 4.01. Before this , it was not possible to show a video/movie on the Web Page.For example, you can embed music video or a movie on your web page for the visitor to listen and watch it.

HTML5 video tag accept attribute that specify how the video should be played. You can write content in <video> tag. <video> tag always occur in pair. Any content between opening and closing tag is "fallback content". this content is displayed only by those browsers that does not support video tag. Now, most of the video are shown by plug-in.

Syntax

Syntax of <video>tag in HTML5

<video src="URL"></video>

OR

<video>

<source src="URL">

<source src="URL">

</video>

Browser Support

Browsers such as Opera, Chrome, Internet Explorer 9, Firefox and Safari support the <video> tag in HTML5.

Internet Explorer 8 and earlier versions do not support the <video> tag in HTML5.

Currently, there are three supported video formats available for the <video> element : MP4, WebM and Ogg.

     Browsers     MP4     WebM     Ogg
 Internet Explorer 9+      YES       NO      NO
 Chrome 6+      YES       YES      YES
 Firefox 3.6+      NO       YES      YES
 Safari 5+      YES       NO      NO
 Opera 10.6+      NO       YES      YES

Mime Types for Video Format

    Format     MIME type
      MP4      video/mp4
     WebM      video/webm
       Ogg      video/ogg

Attributes of the <video> tag

    Attribute     Value     Description
    autoplay     autoplay     Video will start playing automatically.
    autobuffer     autobuffer     Video will start buffering automatically.
    loop     loop     Video automatically start over again when done.
    controls     controls     In order to show the controls.
    poster     URL of the image     URL(address) of the image.
    src     URL     Address of the video.
    width     pixel     Defining the width of the video.
    height     pixel     Defining the height of the video.

Example of the <video> tag in HTML5

Step 1

Coding of the <video> tag in HTML5

!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>Video Tag in HTML5</title>

</head>

<body>

    <h1 syyle="color:gray">Implementation of Video Tag in HTML5</h1>

<video width="350" height="400" controls loop>

<source src="C:\Users\ashwani\AppData\Local\Temp\wht_parrot.mp4" type="video/mp4">

<p>You are reading because your browser does not support HTML5 video element</p>

</video>

 

</body>

</html>

Step 2

Output

video.jpg

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now