2. HTML5 Custom Video Player Seek Controls JavaScript Programming Tutorial

Welcome to part 2 of customizing the HTML5 video element controls interface. In this video we are going to more intelligently initialize the video player's programming so that our HTML5 markup stays slim and clean. We will use JavaScript to add event listeners and initialize all variables needed for the entire video player script. In this part 2 we will also apply the HTML5 range slider input as the custom seek bar for our video player. We will focus on making the player controls sexy in later videos, first we just want to program working controls, after that we will use CSS3 to make it pretty.

[jdsebastian]

Right now there's a budding programmer who is thankful as all getout to have discovered your very friendly, fun and totally well explained enough teaching for a person who doesn't know javascript to being to warm up to the language and really "get it" for the first time as I'm going through these videos... thanks so much, Adam, I've gotta new virtual friend... that's how I do it with my jazz piano music videos, just give it away, pay it forward, and you have certainly done a lot of that my friend!! 

[antoniograndepalle]

Cannot thank you enough. There is no one better on youtube by light years.

[WittCode]

I really like your teaching style! Great video!

[VirtualVisitor]

Very nice presentation, clear style, good depth, easy to understand you as well. Well done.

[StephandeVries]

The Arnold Schwarzenegger impression made me subscribe to this channel

[hloesilen]

the best tutorial ever! easy and clear!

[Quirby_QC]

Thank you so much, it's still really useful on 2020 :D

[reymondvillasenor]

Hey Adam great videos! Question if I'm creating a UI for a video game that I created in After Effects that has some fairly advanced graphics and the video has several "trigger points" that are in the timeline. For Example: Click Left Button video plays seconds 1-5 or click right button and video plays seconds 6-10.

Currently I'm attempting to make a "Tony Stark" type UI interface that video is about 3 Minutes with all the different states and animation points so my questions is....

For performance, control, and maximum smooth user experience is it better to

A. Upload Video and create javascript to jump to different animation points on the timeline?

B. Export the entire video into individual frames (24 Frames per second) & set them to animate like a sprite?

C. Create ONE svg file with ALL images layed out on it and have it work like a sprite from their?

I've been trying to think it out and feel there are benefits to each method and would appreciate your thoughts and also where could I purchase your sprite animation work book my friend?!

Thank you for any feedback you provide and keep up the great work Amigo,

Reymond

[winnerincrease]

immediately tom's cousin punched tom he said beautiful 4:53

[santunu]

nice tutorial adam help me lot of to understand the concept thanks man.

[developerfabi]

Thank you very much for the cool video.

[Null_DreiAcht]

The code doesn't work, when I want to pause it's says that "vid" is "undefined", then I've tried to resolve by adding paranthesis after "window.onload=initializePlayer", then it's become "vid" is "null". I've reread, rewrite, recheck each element but NO I can't find anything that could've make my code go nuts

[Scooterboy_and_others]

If the function "initializePlayer()" is defined after "window.onload" will that error out or browser is smart enough to handle it?

[clashclan]

Hey the defulat controls look the same when i full screen the video

[BattleBoy]

Can you make an video editing with html, css and JavaScript

[grahampawar]

If you remove autoplay, the button shows pause button instead of play button :(

[violetasmus]

Hai there, good video but i have some issues. My seekslider is nog working..

[AllPssuck]

Firefox isn't working? 22 has support for the range value on the input element. Bugzilla

[EezyVideos]

Damn! I had it right once. But every time I refresh my page the btn still starts with "Pause". I can click it to play. and only then the buttons switch between "play" / "pause". Anyone got an idea?

[aravindhanradhakrishnan]

how to disable download also using third party application in php
Eg: Internet download manager