2. HTML5 Custom Video Player Seek Controls JavaScript Programming Tutorial

Lesson Code: http://www.developphp.com/video/JavaScript/Video-Seek-Controls-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.


24 thoughts on “2. HTML5 Custom Video Player Seek Controls JavaScript Programming Tutorial”

  1. I have a great suggestion for your youtube carer and that is too not sound dull like all the funny things you said is really okay now the only thing is your voice. If your voice is too dull it is actually hard to teach them anything and I experimented on myself on this because it seems like I am the same like everyone. Have you ever heard of Mr. Anderson from youtube the teaches science well don't be like him because all he is doing is making science less interesting on people especially on the younger people because they will believe anything so if they hear that it is boring than they will dislike it until someone explains it to them when they are older and they have to be older because they will just argue because they will believe the first thing they see and it will be hard not to keep certain things that will erase there dreams so that is why or else if you tell them why and lose there hope than you will most likely will have a gothic teenager.

  2. 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

  3. 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,


  4. 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!! 

  5. 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?

Leave a Reply

Your email address will not be published. Required fields are marked *