Html5 Video Player Element

One more powerful element of Html5 is Html5 Video. Today We will learn the basics and some advance uses of Html5 Video Player Element. After going through this tutorial you will have a solid understanding of Html5 video and it’s uses.

Working example of Html5 Video Player Element

Download This Script

What is Html5 Video Player Element?

Html5 video player element is an element which is used to play the video on the web or other html5 supported platform.

Supported tag for Html5 Video

There are basically three tag, that is being supported by Html5 video player element

Html5 video tag

To show the video in the browser we use html5 video element. The text inside the video element will be visible when browser doesn’t support the video tag.

<video width="400" height="300" controls>
 --- Another source will go here ---

Html5 source tag

Source tag is used to call the video from it’s source. There are two source, we need to call always (mp4, ogg). It depends on the browser that they catch the desired file format. Most of the current browser support mp4 format. Where there are only three major browser that support ogg file format (Chrome, Firefox, Opera)

<source src="html5video.mp4" type="video/mp4">
<source src="html5video.ogg" type="video/ogg">

Html5 track tag

The Html5 track tag is used to display the subtitles on video. Basically we use three attributes with track tag (kind, srclang, label). Below is a syntax example of track tag, which will help you to understand it in a better way.

<track src="html5_video_player_subtitles_en.vtt" kind="subtitles" srclang="en" label="English">

Browser Support for Html5 Video Player

All major browser supports Html5 video player. Below you can find the least version of browsers that supports video element.

Version 9.0 3.5 4.0 4.0 10.5

Video element media types

There are three types of file format that is used to call the video. In the below table you can find the file format and it’s media type.

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

Apart from the above given example, we can also use the controls (which is used to control the video) and autoplay (which is used to autoplay the video when browser loads). To display the video in browser in a specific size, we can also use height and width properties.

We recommend to use our try it editor to see it live, where you can edit or modify the code instantly

Leave a comment

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