HTML5 VIDEO TAG – How to play video in html5
Earlier there were no html standard tag or way to play video on a webpage. Video could only be played with like flash. But html5 introduced a video tag.
HTML Video – Browser Support
Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:
HTML Video – Media Types
|File Format||Media Type|
HTML Video – Methods, Properties, and Events
HTML5 defines DOM methods, properties, and events for the <video> element.
This allows you to load, play, and pause videos, as well as setting duration and volume.
There are also DOM events that can notify you when a video begins to play, is paused, etc.
WORKING OF VIDEO TAG
Here is the code to play a video file.
<html> <video width="300" height="190" controls="controls" src="/magic.webm"/> If you are reading this, it is because your browser does not support the HTML5 video tag. </video> </html>
The above will work only in chrome10.0,firefox 4.0,opera 10.5.But will not work in Internet Explorer because it does not support WebM format.
IE9 only supports Mpeg4.So we change the code to make it work in all browsers.The modified code is:
<html> <video height="190" width="300" controls="controls"> <source src="/magic.ogg" type="video/ogg"/> <source src="/magic.webm" type="video/webm"/> <source src="/magic.mp4" type="video/mp4"/> If you are reading this, it is because your browser does not support the HTML5 video tag. </video> </html>
The browser picks one of the three formats available and plays the audio file.Click on the play button and listen to the song.
HTML5 VIDEO:THE CONTROL ATTRIBUTE
The control attribute of HTML5 specifies the browser to display the standard playback controls.There are various attributes in HTML5.
New in HTML5.
|autoplay||autoplay||Specifies that the video will start playing as soon as it is ready|
|controls||controls||Specifies that video controls should be displayed (such as a play/pause button etc).|
|height||pixels||Sets the height of the video player|
|loop||loop||Specifies that the video will start over again, every time it is finished|
|muted||muted||Specifies that the audio output of the video should be muted|
|poster||URL||Specifies an image to be shown while the video is downloading, or until the user hits the play button|
|Specifies if and how the author thinks the video should be loaded when the page loads|
|src||URL||Specifies the URL of the video file|
|width||pixels||Sets the width of the video player|