How To Code A Custom Html5 Video Player

Hey guys welcome to the next Lex filled this is gonna be a html5 video player and the concept here is heavily inspired by mr. West boss and basically he did a video on JavaScript 30 course where it was a full theme of a video html5 video and using the video element in particular so what we’re gonna do is.

Skin it but also control it with JavaScript based on the video you’re playing so here you.

Can have your own and like loading bar your indicator you can slow down the video or speed it up for full speed you can jump back ten seconds and play it by clicking anywhere or jump forward ten seconds etc those videos it actually doesn’t have sound I just grabbed.

It off a free resource site so feel free to experiment with whatever you want to choose there but jumping in there is some groundwork to be laid for the HTML and CSS so I would say reference this wholeheartedly.

As opposed to me telling you each every bit we’re gonna deal with but the HTML I’ll jump into I’ve so we’ve got the video itself wrapped in a giant player div which is our main wrapper and from that we are gonna create controls with CSS HTML and then buttons that will actually target with.

JavaScript to do certain functions so we have a general play button a progress button and then a div within it that’s going to be the filled process which will animate based on the video duration and playback speed and then on top.

Of that we have input sliders that are actually range sliders so these are real native range sliders that have a volume indication and a playback rate so volume won’t really apply to this video but it to whatever you use if you use a volume-based video this one is silent so it doesn’t matter but I put it in here anyways and we have data buttons to skip so these are just.

Buttons that have data attributes which hook into to use that actual value to skip ahead or rewind a little bit so this is that and all in all the HTML is basic you’re still using a basic video attribute and HTML element but.

You might want to actually do more than just the source here if you’re gonna do this in production or something so you want to use different source attributes so that would look like within the video tag you can.

Do this thing called source and then do the actual source and link to the appropriate file different browsers like different versions so you might experiment there I know mp4 is a pretty good standard but there are other limitations within Firefox and Safari and stuff so I won’t get.

Into super super much detail with that but and then up here I commented out some icons I’m going to be using inner JavaScript I didn’t want to have to actually type this by hand so that’s why you see him here and the final piece I’ll actually link this all up and it should look pretty nice so you can actually review it based on your own if you’re following along.

The CSS itself we did some just dynamic stuff with the actual background of course it’s a nice big blue gradient with some nice treatment to the video itself the.
Player has a max width so it’s set to just beat this.

Width as opposed to just like.

Fullscreen or something and then we just I just styled it however I liked on hover we’re doing an animation where the actual track bar comes up as opposed to always being in view it’s kind of a nice to have but not necessarily necessary so you could just have it like this and.

It’s fine but maybe hovering over it it would do something else but I kind of just followed Wes’s lead with this stuff so I would definitely give him most the credit here I’m just doing my own.

Take on it so don’t pick it apart because it’s it’s not really my 100% thing other than.
That we have some custom custom stuff and then we.

Have stuff to hook into the ranges which are kind of browser-specific so feel.

Free to copy and if you like this stuff some placeholder kind of content that’s just necessary for us to style these things that are would otherwise have default styling that looked pretty ugly personally so yeah so other than that we’re gonna hook into a lot of the class names that we defined in our HTML and then hook into I advanced functionality.

Of controlling that which obvious grips using mostly ESX kind of concepts and some different ways to hook into objects as well the first step is defining and.

Querying for all our actual Dom elements so let’s start there and I’ll do a lot of cons here so.

Bear with me player is going to be the main div around the actual video element and controls so we’ll do player this div here straightforward and we will do cons video cuz you can query from the previous element so say you queried to the player you can actually use.
That element to query into that Dom element too.

It’s like all these nested things in the Dom so this is that fancy way of doing that it really allows you to.

Scope things and make sure you’re selecting what you want so this will be player video and then we’ll do progress again player query selector the progress progress filled is going to be the div within.

Our progress bar which is going to be what.

Actually bills as we play the video I just called it progress filled for now so we’ll do player again query selector progress or I don’t know why I named it filled progress my mind works backwards maybe and then toggle player dot query selector toggle play and skippers I call them okay so the skippers is gonna have a query selector all and it’s gonna.

Be we’re gonna look for all the data z’ attributes that are skipped so if you remember the buttons in our HTML that were actually skipping they have this attribute data skip so you can actually query for the data attribute which is awesome so we don’t really need to query for this play button player button which is nice but I’m doing that mostly for styles and then.

We’ll do the same with ranges so this is gonna be our input sliders our ranges whatever you want to call them so player query selector all and it will be player slider which will be these here so they both have the same class all right with that done we can kind of get into the logic of everything which is it gonna mostly be adding a bunch.

Of event listeners on most of these things and then when each thing happens we can hook into the video API in the browser and do things.

So like play and pause are part of that API we don’t have to like invent what that is which is why video in HTML is so great wait so what we’ll do eventually is mostly target the video itself which we’ve.

Set here is the actual video.

Is on the video element so player video and add a bunch of event listeners so let me just go ahead and add these and then we’ll add functions that do the logic so 1 1 4 click so clicking on the video itself we want to actually toggle play probably get some errors in this console just because and we want one to actually play.

So add eventlistener play and we’ll say we need to update the button to show the.

Pause state instead of the play state and then an event listener pause will do the same thing so we’re gonna the function is basically gonna toggle the state of the button icon which I haven’t in comments up here I’ll show you what that looks like soon and then.

We want to of course update the timeline so I could show.

You this there’s an event called time update which is actually part of the video API so we can do progress update and then again going down the Dom we can go and find the toggle which is going to be the actual button to toggle playback as opposed to the video itself so instead of just clicking on the video to play it’ll.

Be the actual button so it’ll do the same function as our first event listener where you put there and then our skippers will do a fancy for each we’re getting into some arrow functions here which are new to.

Me and I like them but there are a little hard to read personally so typically.

Write function and then pass in something in this case maybe a button and then open your curly braces come down here and do logic inside well if it’s just minimal what you’re doing you can actually minimize that into just being that button and then an arrow function which basically symbolizes that function remove wrote that function empty function and then.

Do our actual button instance which is this this is what the logic we’re gonna do and then we’ll add an event listener for each of those click and then we’ll call a function skip so all these functions I defined already so I.

Know what they’re called you probably need to do like if you’re doing this inventing this probably need to do each one like pretty grossly and then come back and refactor so it looks like something like this I’m just saving time just to show you how this is all.

Gonna hook up so ranges will do this similar thing range button excuse me range add eventlistener change so anytime you move the slider or range.

I call it a slider will update a function called range update and I’ll probably copy that paste that we just want to do the same thing on mouse move for good measure and then we can set a variable called mouse down equals false and this just initializes.

What that actual value is going to be when we first fire the app or the video and basically what we’re gonna do is update it to be true as we’re scrubbing the.

Timeline or something with the mouse itself so the progress element which we defined right here is related to this div and then inside that’s that filled progress div which we defined below so we can access that element and emit listener will call it.

Click and a scrub function we want to be able to like click on the timeline and just skip ahead any which way based on the length of the video divided by the actual place you click so it’s gonna be an actual math that we’re gonna end up doing it’s kind of complicated but I think in the end it’s as you read it it makes sense for us so we’ll do.

Another one with just capturing all these different events that could take place now smooth there’s a fancy one you can capture the event and do the same arrow function like this instead of writing a new function and opening your curly braces so we could do two all in line and you can just do Mouse down and scrub II so onmousemove will pass the event end and mousedown will be false in that.

Capturing the event itself so once we pass in the scrub function we’re gonna be using what the output of that function is in this place so it doesn’t make sense yet but it will it’s a progress addeventlistener mousedown can’t spell and again.

With the arrow functions we could just do it click mouse down set it to true in this case and one more looks like I have an issue there and should be that and that and then mouse up will toggle it off so.

The progress line won’t update in that case so there’s all of our crazy event listeners I know it’s a lot of takin but what’s we’ll do now is define all these functions we.

For those so the basic one toggle play is pretty much a nope no brainer we can go and swap create a function guitar go play pass in some logic here.

So this is going to be we’re gonna query for the actual play button in this case document not a query selector oops yeah this will be toggle play which is you find that right here it’s the actual icon the button wrapping the icon is gonna do the magic here for us so then we could say if this which refers to what we’re.

Calling in the event listener so video in this case since we’re calling it here this refers to this at its high its scope probably confusing but this.

Doesn’t refer to anything in this function because the function is being called here which is the sub entity of the video so that’s why.

That is the thing so we could just say this pause we could do toggle play button got innerhtml equals I’m gonna do yes six backticks here and that way we can pass in some crazy HTML and.

It will render just fine as opposed to doing to the typical string which would not so there’s that and then I’m actually.

The string might render okay but I still want to do those back ticks cuz that’s how I did it so then we get to an else and then just say if it’s not pause we’ll just say the button that’s gonna be have the play state so toggle play button or toggle play button enter HTML equals the other icon which is going to be this one which if you look at the title tags on these it says pause and.

Play it’s kind of gives you something indication there in case you’re following along great so I can go and click that so I’m writing the wrong function right now this is the update function excuse me update button okay so let’s go and write the toggle play.