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