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
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 --- </video>
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.
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|
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