HTML5 Video Player Tutorial

html5 player

You may come to know about the inbuilt player coming with HTML5. If you don’t know then this will be a good reason to learn this new stuff in HTML5.
This is the tag <video>

Attributes are width, height, controls. <video width=”720″ height=”480″ controls=”controls”></video>
Give width and height to display the size of the video to play on the browser whereas controls will display the default controls like play, pause, mute etc.,

And only <video> tag is not enough to play a video because we need to give a source of a video! for that HTML5 comes with a new tag called <source>

<source> is the tag to include the source of a video
Here is the example to show how it is working.


<!DOCTYPE html>
<html lang="en">
<head>
<title>video tag example</title>
</head>
<body>
<video width="728" height="480" controls>
<source src="TheMummyReturns.mp4" type="video/mp4">
<source src="TheMummyReturns.ogg" type="video/ogg">
Video tag is not supported in your browser. Use Firefox or Chrome or IE9
</video>
</body>
</html>

The above code will diplay a player in your browser and the video will play if you click the play button (video should be present in your hard drive with the same name eg.video.mp4).

NOTE: MP4 format not supported by Firefox. Better work this example with Google Chrome.

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *