HTML5 VIDEO TAG – How to play video in html5

GK | October 28, 2014 | Technology | No Comments

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:

Browser	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	NO	YES	YES

HTML Video – Media Types

File Format	Media Type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

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.

Optional Attributes

New in HTML5.

Attribute	Value	Description
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
preload	auto metadata none	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