How To Code A Custom Html5 Video Player

Function on so function toggle play this is gonna be a fancy one where we can do it all in line and we’re gonna set a play state so it’s either gonna be player.

Pause and we can hook into the video based on that so we could say video dot paused so if it’s paused we’ll toggle the play state to play or or else paused so that’s a one-liner that’s basically saying if the video is paused show the place or yep basically show the place date otherwise show the pause date and then we can hook into this new way of doing it’s not new but it’s another way of doing object modifiers so.

Typically I would write like video dot play state.

And then fire that function this way you can do I think West did it this way video that plays state and then from that you could fire the function.

So we’re passing in this descanse tellement and then firing the function based on the video state so it’s fancy but it does work so hopefully if I click this now should get some activity it doesn’t look like it’s working now okay so function skip is the next function let’s do we’ll take the video dot current time and you can.

Access that by console logging the video if you want to see so we can just go to our dev tools we get the video element within it said that you can’t see it in this editor.

Cuz I use Firefox but let me see if I can open it go and there’s the.

Video class so we can actually go into this element and look for current time which is actually a attribute which is right here and of course is at 0 because it hasn’t started.

Yet the the indication here is literally just CSS there’s not actually anything hooked up to it so we have that to access and we could find that in our.

Function itself so let me go I’ll just use Firefox and also function skip is gonna be open those brackets type and it’s gonna have the video at current times the one we just looked at.

And that we’re gonna set that or adjust it based on the skipping so we can actually hook into that API and tell it where to skip and our numbers we have to do it afloat so it needs to be a dot decimal kind of typical.

Scenario so you take the video data set dots skip actually it’s not the video it’s gonna be the button because we’re gonna pass this into the skipper’s which are doing the for each four so this is kind of confusing but for each button we’re actually hooking.

Into the data attribute on it which is this and then grabbing that attribute and then using it to parse integer that figure and then update the current time of the video which is relative to it so that’s a mouthful but that is working let.

Me close that with a semicolon the next function is going to be the range updates and this will look like video of the object of the video you know this that name equals this dot value so for the range update we’re doing the same for each and when you pass that through we have this instance of range and where I take the video of this particular thing and of course we can say name.

Which is on the slider element itself so we got volume then playback rate and then we’re gonna set that to the value for each range update we take and we’re passing through each of these ranges it should update the video finally let’s do function progress update so we call this one for the actual timed event.

Update so we’re actually gonna update the timeline based on that so this yellow bar will actually be dynamic which is the beautiful thing so we’re gonna have to do some math with this one so we’re gonna say percent equals we’ll take the video dot current time divided by the video duration so we’re getting some math based on that and then multiply by 100.

For the seconds we need so these curly brackets or parentheses mean perform this bit first and then multiply it in JavaScript and most programming languages so I’m gonna finally access that progress filled variable you set getting and we’ll set a style dot Flex faces and camelcase for styles is a JavaScript standard so that is something to remember it’s a big gotcha if you forget something we could just say.

Percent so if you want to console.log the percent see if this works so the progress update is being called on the timeline so see if it does anything looks like I can’t type this in nerd subscribe is not defined no duh okay let’s see if this works it might air out because I haven’t defined those functions yeah there we go so we’re getting.

That actual float integer going from the video itself which is great but you notice our CSS CSS isn’t updated yet and our video play state is not working either so let’s debug that stuff will do a scrub function this will be the final function and we’re gonna this one we do require the event so you can pass it in the event itself and we could get the scrub time just call it that and the events important here because we’re gonna.

Get the offset X of it and divided by the progress offset a video doctor ation is the actual algorithm behind all that so the scrub.

Time will actually be events offset so wherever we click divided by the width already or the actual progress width and then multiplied by the whole videos duration so it’s kind of a conundrum there some video dot current time will equal that so that’s how we updated okay let’s double check our work I want to make sure I have everything spelled right for sure because I.

Think I do that often I forget and mess it all up and one little bug I saw is I didn’t have a % there so we need that to actually be the CSS that transcends into where we click where we see the video playing so.

Now it’s updating automatically so that’s cool I’m still getting the issue with the place stopping but we do have our skipping working which is great I think I can control playback speed as well here’s full speed you’re slow see it’s.

Can pretty neat so we’re very close let me double check the play state and see if I can figure out what’s wrong hopefully it’s just like a typo or something so I will come right back and see if I can get that hooked up all right guys I’ve figured it out finally and it was typos so a important thing I overlooked is I had paused here and it couldn’t find the video element based.

Off of that anyway so fixing that toggles the playback just by clicking this button which is good but we can also click the video so that’s cool too for like mobile that would be very handy and updating the button was also an issue because I put the opposite here.

I had pause and it should be paused and to me that’s like why are those are different I have no idea but that.

Threw me for a loop and they should be the same personally but yeah so in any way we can play and the button switches and.

We can adjust the volume of course and the range slider slows the video down as you can see and I could jump back.

10 seconds this video is like only maybe 20 seconds so this is gonna jump all the way to the end but so far so good we got everything hooked up it’s working great.

So yeah I think that’s about it though for the how it works kind of concept you could extend this further this is a very object.

Oriented approach I think like I said it’s heavily influenced by West bosses tutorial on one of his JavaScript 30 course excerpt but I thought this one was neat and.

Worth redoing and seeing what I could do to put my own take on it I use my own rock icons and did a different the toggling technique as opposed to just HTML characters that he.

Used among that I changed the naming convention Styles accents here and there but most of all it’s it’s very similar to what he did so it’s neat that you could hook into pretty much all the HTML elements and do things like this so like things to come to mind or like select fields you.

Can hook into and do things with inputs checkboxes all that stuff while you can do a ton of it with CSS you can do things with JavaScript too I plan to do another video on actual form elements and.

Manipulating those based on like maybe you’re checking a.

Box something should show otherwise it shouldn’t or if you check something or input something maybe some front-end validation kind of things so I’ll hook into that coming up this series I’ll probably just continue on and on as I discover new concepts or ideas.

If you fat if you have your own ideas feel free to comment on each of these videos I’ll see it I read every comment so other than that I’ll keep cracking and hopefully you learn something from this stuff because I am as well this that’s the whole point of this series is for me to learn.

More and more I learn by doing and also by teaching so I enjoy it and I hope you do too alright that’s it for now peace you.