In this tutorial, we will be building a custom a custom video player with JavaScript. It will consist entirely of black and white controls. We will create an object that when initialized will add controls to all video tag containers with a particular class. You can then continue to improve it and re-factor it to better serve your needs and patch various bugs.

The controls would look like this:

To keep it short, the control buttons would have fixed width and height so we must make our video tags to have a certain fixed width as well.

Browser Support

The HTML5’s <video> tag is supported in IE >= 9, Firefox and Chrome >= 31, Safari >= 7 and Opera >= 27. It has a pretty decent support with 91.77% of people worldwide being able to run <video> tags.

Making the Video Player

First, we style a general .control class which all buttons will have:

.control {
            background-color: transparent;
            background-image: url("img/play.png");
            background-repeat: no-repeat;
            background-size: contain;
            width: 60px;
            height: 60px;
            border: 0;
            outline: 0;
            cursor: pointer;
            margin-right: 5px;

        }

We give the buttons a little bit of breathing room, give them the fixed size of 60px and set the background. Now, we just have to change the background-image of each button except for the play button (which will inherit only from the .control class)

We add the images for the other buttons:

.pauseVideo {
            background-image: url('img/pause.png');
        }
          .volume, .time {
            background-image: url("img/volume.png");
            cursor: auto;
        }
           .time {
            margin-right: -10px;
            margin-left: 10px;
            background-image: url("img/time.png");
        }

Notice that we change the margins a bit for the time button and remove the pointer cursor for the volume and time buttons since they will not be clickable (there will be a range input for them)

Then, we give a fixed width to the video, the wrapper for the whole page and set a utility class:

.container {
            width: 960px;
            margin: 0 auto;
        }
 video {
            width: 800px;
        }
 .inline {
            display: inline-block;
        }

Next, we deal with the markup. We add each video in a container of its own.

<div class="container">
    <div class="media-wrapper">
        <video src="videos/steam-whistle.mp4">
            Your browser does not support HTML5 Videos

        </video>
    </div>
    <div class="media-wrapper">
        <video src="videos/us-combat.mp4">
            Your browser does not support HTML5 Videos

        </video>
    </div>
</div>

We will create our Video Player to receive a parameter which stipulates what the class of the container of each video is. In this demo, we will be using a class of media-wrapper.

Conclusion

In the next and final part, we are going to build the JavaScript API that will allow us to interact with the added videos.