1. Html5 Custom Video Player Controls Javascript Programming Tutorial

Hey you’re my good friends we’re going to embark on a full series of videos all about how to customize the HTML video controls interface now if you run an experiment and you put up html5 video tag on your page and you’re playing a video you can go to that page with Chrome Internet Explorer and Firefox and guess what.

You’re going to get a different look for the interfacing for that video I don’t know why they do that they keep putting differences in all these browsers and.

I’m going to punch them in the face but it.

Doesn’t matter because we’re going to show you how to customize it to where it looks the same no matter if the user is in Firefox Internet Explorer Chrome.
And plus you might own a site like bar be.

Calm and you might have to have an all pink video control bar so you just knock out the default controls and you customize your nice new pink control bar.

With pink buttons and it can be totally pink or maybe you’re somebody who sells guns and you want like a metal steel looking controls or whatever you want you can make.

A look whatever you want and don’t matter what browser the person’s coming in this first video I’m going to show you how to knock out the default controls put in a div that’s going to serve as our new control bar and I’ll show you how to program the pause and play button to where it changes its look or the words that would be on it pending on whether or not the video is.
Playing or not you know what I mean.

So when you press play it should turn to a pause symbol when you press pause that same button should turn to a play symbol that’s what we’re covering and video number one let’s go and we’re going to start with the bare-bones we’re going to put our CSS here in the style element our JavaScript is going to go in the script element and our HTML is.
Going to go into the body element so the first thing we’ll do.

Is pop a video tag into the page and this is how you would just get the default controls by saying controls equals controls or I think you can just have it say controls like that and you’ll still get the controls and you just want to make sure that you have a video file sitting in the same folder with this file if you want to refer to it.

In a videos folder you can just go videos forward slash and then a to.

That file so let me press f12 and we’ll see what we get so you.

Can see how you get a video with the default controls here this can even say controls equals controls and you’ll get the same effect.

Refresh that page see you have the controls see how the controllers work in which when you press pause that turns to a play symbol when you press.

Play turns to a Pollock symbol you see that pause and it turns back to a play simple we have cool things.

Like the seek bar the time duration volume mute control and of course the volume slider here and then.

You have your fullscreen button if I press fullscreen you see it goes into full-screen mode so those are some of the controls.

That we are going to be customizing because if you look at this same file let’s close this and look at the same file in Internet Explorer you’re going to see that you have a totally different look to the controls and you might want to have the same exact player controls look from one browser to the.

Next and now in case somebody asks you can just put autoplay into the tag and then when you test.

That see that the video plays by itself don’t have to press play alright so we’ll have our default player set up just like that now let’s knock out the controls so if.

You test this in your favor let’s.

See you have no control over video you can actually leave the controls in while you’re programming new controls if.

You want to have those controls available while you’re testing and programming but when you’re done you just remove the controls attribute now let’s give this video tag or this video element and ID equal to my underscore video and.

Now right under the video we’re going to put our own control bar and that’s going to be a div element that’s going to be the containing box for all of the controls that we’re going to add so the first thing we’ll add to that div is a button.

Element make sure we close that button element and since our video is set to autoplay the default thing that we want our button to say is pause because the video is going to be auto playing if.

You didn’t have autoplay set here this would say play now let’s give our little control bar an actual ID of video controls.

Bar now let’s give our play pause button and.

ID equal to play pause button and since this element is going to control the playing and pausing of our video we’re going to give it an on click event so every time it’s clicked we’re going to fire off a function in JavaScript named play pause open closed parenthesis and we’re going to send two arguments through this function the first argument is going to be this this represents whatever element that is calling the function to run so.

In our case it’s going to be this.

Button element so this is a parameter or an argument that we’re going to pass through the function and it’s going to be the object reference for this button element and we put a comma.

And in between single quotes.

We’re going to put the string that represents the ID of our video player right there as the second argument so two arguments passing through this play pause function so let’s just copy all that ctrl C and go up into our JavaScript and we’re going to type in function and then paste open a curly brace and go down a couple of lines and put in your closing curly brace now we’re going to scoop up those two parameters not as this and.

My video we’re going to scoop it up as BTN and vid that way we can have access to those two things now since.

We already have an object reference for the button element let’s get an object reference now for that video ID string so let’s use document get element by ID on that video ID string to make a variable an object reference named vid and that’s going to represent this video element right here now right under that we want an if and else condition statement so we type in if open closed parenthesis opening curly brace go down put in closing curly brace and.

Then put else opening curly brace and closing curly brace and we want to evaluate to.