Make a Html 5 video player with custom controls

As we know HTML 5 has introduced many new elements including video element, which we are using to display videos on our web pages.Since 2014, the year of a released 5th version of HTML, browsers have also slowly adopted themselves into HTML 5 and now, we are going to see make a media player with our own custom controls.

SOMETHING THAT YOU MUST KNOW OF FRONT-END
#1.We're going to build this media player in HTML 5, controlled by JavaScript and with use CSS to make it more beautiful.Therefore you must have some knowledge of these languages.


#2.HTML 5 is not supported in the most of the older browsers, so we either have to make a fallback of updating browser or use flash.


#3.To force Internet Explorer to recognize some HTML 5 elements, just directly add the HTML5 Shiv in the head section of the document.


#4.Some browsers like Firefox support .ogg file format, whereas, chrome supports Mp4.The exact table is given below.But now all the browsers support most of the file formats.

That means, we have to convert our file types at least into two types.

<div id="container">
      <h1> HTML5 Video Player</h1>
      <div id="video_container">
        <video>
            <source src="http://yourwebsite.com/videos/test.mp4" type="video/mp4">
            <source src="http://yourwebsite/videos/test.ogg" type="video/ogg">
                         <!-- YOU CAN ADD FLASH FALLBACK PLAYER HERE.
 COULD BE EMBED OR OBJECT ELEMENT. OR JUST GIVE MESSAGE TO UPDATE BROWSER -->
        </video>
    </div>
  </div> 

WHY WE ARE BUILDING THIS CUSTOM MEDIA PLAYER?
This is quite an old question.But yes! it is actually our own style and branding.As you have been noticed if you are using different browsers, that every different browser has its own player and it implements its own control style and colors.


↠CREATING MARKUP

As for building any web material first, we have to create necessary markup.
Ok. So just we now have to add src to our video files.If you are testing files locally on the computer, then add the path like this path/to/file.mp4.
↠ABOUT VIDEO AND SOURCE TAG

The video is a tag which displays raw video to the webpage.We can use height, width, src attributes to this tag.But in the many cases, we had to add many files to support the browser's familiar version, we use the source tag.In source tag we, an add the different source files of audio and video tag.One more tag related to this used to add the subtitles to the video.We will see that in the other parts of this tutorial.

↠INSIDE VIDEO TAG

I had made the list of attributes here-.


Controls-You can use this to make visible the default controls by the browser.We didn't have to use it here because we are making our own controls.


Poster-At the starting of the video, if you want to add a poster of your video to visible, you can use poster attribute. But note that this is not implemented in all the browsers.Use it like this -

<video poster="path/to/file.png">.

Preload-Instructs the browser to load the video as the page load.If you have many videos on one page, and you had added this attribute, then there is a risk of the user's bandwidth can get wasted.There is no actual need for adding this attribute.The supported values for this are none, metadata and auto.Hints browser that user will likely not play the video.So, the browser unnecessary didn't load the video.metadata loads the video dimensions, first frame, list of all the tracks and many things.

• Height-As usual determines the height of the video.
• Width-This attribute adds width to the video.
• loop-Using this attribute enables the loop of the video.
• muted-If you want to mute the video at the startup, you can use this attribute to mute it.But a user can change it in the video controls.

MARKUP FOR THE CUSTOM CONTROLS

We don't want to use browser's default controls, so we have to make it with HTML markup, and give them functionality using the JavaScript.But what if the JavaScript is disabled? So here we are using controls attribute for them.Now controls attribute also came for the users whose JavaScript is enabled.To solve this we have to disable controls attribute in JavaScript.

In this second part of the tutorial, we will add play/ pause, stop, timings and progress bar functions.And remaining volume, option button and more we will see in next parts.So we will first design the elements rather than adding its functionalities because we had added the right named ids that leads to the easy understanding of the buttons and their functions.

HERE YOU GO

This is a whole bunch of series that will continue on this blog.Update of next article will be on our FB page.The next part will be available here.

• Tweet
• Share
• Share
• Share
• Share