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 VideoThere are basically three tag, that is being supported by Html5 video player element
Html5 video tagTo 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 tagSource 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 tagThe 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 PlayerAll major browser supports Html5 video player. Below you can find the least version of browsers that supports video element.
Video element media typesThere 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|
Swapnil Raja is a technophile. He writes on scripting language, designing software, web technology, CMS and other technology related stuff. He is aregular contributor on html5andcss3.org. Want to know more about him ? feel free to get in touch with him on different social platform.