1. HTML5 Custom Video Player Controls JavaScript Programming Tutorial




Lesson Code: http://www.developphp.com/video/JavaScript/Video-Player-Custom-Controls-Programming-Tutorial
In this first part of the tutorial series we will discuss how to set up a custom controls interface starting with the play/pause button. Customizing the HTML5 video controls interface will allow you to achieve a unique and constant look for your video player in all browser software. Different browser software display different looking default controls for the video element. You can also offer your custom programmed video players to others to use on their websites if they also do not want to use the stock controls that are native to browser software for the video element. We use JavaScript to control the video after we remove the default controls. We used to do very similar things in Flash AS3 if you remember.

We are going to begin with disabling the default control bar and setting up our own control bar design using a DIV that we can place all of our video controls into as we create them. In this part 1 we will add a play/pause button to the control bar, then in the videos that follow we will customize more aspects of video control interfacing.

Original source


47 responses to “1. HTML5 Custom Video Player Controls JavaScript Programming Tutorial”

  1. ok i know im an amature. but whenever you say "programming" i think you mean "coding" and yes there is a difference. programming is more like java and assembly while coding is html, php, javascript

  2. Hi Adam, i uploaded a video to my html is supposed to play for 3.32 but only plays for 30 seconds. Do you know why ? or could it be the video is like a 30 sec preview ??

    Many thanks

    Matt

  3. Great video Adam… Totally love your material.
    How would you make a html5 video play on display and pause when out of viewport. Similar functionality to Instagram or Vine etc
    Cheers
    Dims

  4. Hey, can you please help me?
    My video doesn't apear. I mean I have the box and the buttons but that's it. No video. and I have the video in the same folder with my html file. What can I do?

    I am waiting for an answer!
    Thank you in advance!

  5. I see that your video is not playing the video at the right size !! look at it and you see that allot is chopped off as if the video playing is too big for the screen or the player is too small to play it at the right size !! I see this when I go to a movie on youtube that played full screened and now it is cropped !!! so how do you get the video to fit the screen and not chopped it up ?! can I change it in element (Q) !?

  6. Im already subscribed I love these vids and they are def getting me threw school but… The minute you said Im gunna punch them in the face it was an insta thumbs up lol. You always make me laugh

  7. You Are Better Than The New boston >>>I believe he teaches us too its not that i am saying hes stupid but ur best by teaching simple he Just get All things messy

  8. How can I change the code from id to class and still make it work with Javascript?

    Example:
    <video class="my_video" width="550" height="300" autoplay> <source src="Tom_and_Jerry.mp4"> </video> <div class="video_controls_bar"> <button class="playpausebtn" onclick="playPause(this,'my_video')">Pause</button>

    Now I only need the javascript portion to make it run, can you wrtie the js for me?

  9. No thank you. HTML5 is the biggest piece of shit you can ever try! 
    I run on an older system but have quality components so I couldnt belive I couldnt play HD videos on youtube all of a sudden. Can you imagine my suprise when after 6 months of corrupting my viewing pleasure i found out that all videos run perfect in Internet Explorer LOL INTERNET EXPLORER, MAN! It was not my machine but this sick player combined with Chrome. Now I realized i fell into html5 beta somehow and if you want a quick fix just delete ffmpegsumo.dll, nacl_irt_x86_32.nexe and 64 from your chrome folder. I'm so mad I want to murder someone, fucking creator of this piece of shit html5 sould be burned alive! After 6 months they couldn't make it work?!? Burn them!

Leave a Reply