HTML5 Video Element

Earlier you used to write lengthy scripts with the use of object and elements in order to play a video clip which was quite cumbersome. With HTML5 supporting <video> tag, it has become very easy and simple for you to play any video file in any browser.

HTML5 uses <video> tag for embedding video in HTML file as a native element as <img> tag . It works same as <video> and the only difference is that it has three attributes poster, width and height. Poster is a non moving or still image file displayed on the screen before the video is played and screen size of the vidoe is determined by the two attributes width and height.

You can usually use video formats like mp4, webm, ogg, H.264, AAC, Theora which are supported by different web browsers. You can incorporate these varied video formats to HTML using <source> tag and the browser will use the format it recognises first and will run the video file.

Syntax

<video width="250" height="300" controls autoplay>
<source src="clip.ogg" type="video/ogg" poster="image1.png"/>
<source src="clip.mp4" type="video/mp4" poster="image1.png"/>
<source src="clip.webm" type="video/webm" poster="image1.png"/>
</video>

Example

<!DOCTYPE HTML>  
<html>  
<head>  
    <meta charset=UTF-8" />  
    <title>HTML5 Audio Element Example</title>  
</head>  
<body bgcolor="#fvvyee">
<video controls style="width:540px;height:250px;" 
poster="../images/nature.png">
<source src="../sounds/Ducks_Preview.mp4" 
type='video/mpeg;codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</body>
</html>

This will produce following result

In above example, src is the URL of your video file. Providing MIME type i.e. type="video/mpeg" is optional but it is good to provide it for faster working of the browser. With the use of autoplay, the browser will play the video file without asking for visitor's permission. You should be using the poster attribute if you don't want the user to see nothing at the start of the video clip.

As of writing, only few browser is providing support this new feature.

Browser Supports

Video Attributes

AttributesValueDescription
controlsBoolean attributeThis is used to make the native video player appear.
autoplayBoolean attributeThis is used to automatically play an video clip.
loopBoolean attributeThis is used to keep repeating your video clip.
srcURLThis is used to set url of video clip.
preloadNone | Metadata | AutoThis is used to set buffering of video clip :
none - do not buffer video file automatically.
metadata - only buffer the metadata of video file.
auto - buffer video file before it gets played.
widthWidth in pixelsThis is used to set width of video player.
heightHeight in pixelsThis is used to set height of video player.
posterURL of a image fileThis is used to display poster image until the first frame of video has downloaded.

See Also

HTML5 Web Storage
HTML5 Audio Tag
HTML5 Video Tag
HTML5 Canvas
HTML5 SVG Tag


 
 
SHARE THIS IF YOU LIKE!
submit to reddit

SUBSCRIBE FOR LATEST UPDATES
HAVE WE CONNECTED ON FACEBOOK?
TOP TUTORIALSTOP CODE EXAMPLESTOP LIVE DEMOLINKSSTAY CONNECTED
HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
PHP Tutorial
Developer Tools
Javascript
AngularJS
Google MAP API V3
ASP.NET
Javascript
AngularJS
Google MAP API V3
Contact Us
Advertise with Us
Privacy Policy
Disclaimer
Stay connected. We actually like you. If you want to get up to the minute updates, then connect with us on your fav below.
 
Twitter   Linkedin   Facebook   Google+    RSS   Pinterest
 
Protected by Copyscape Original Content Checker
 
 
Copyright ©2017 www.techstrikers.com Unauthorized reproduction/replication of any part of this site is prohibited.