• Thursday , 17 August 2017

1. HTML5 Custom Video Player Controls JavaScript Programming Tutorial

Code Canyon



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

3d Ocean

Related Posts

47 Comments

  1. Deepanshu Aggarwal
    June 24, 2017 at 17:31

    i want to make my video pause when new window tab overlay it and second thing , i want that no one can forward my video by controls on video

  2. Jai developers
    June 24, 2017 at 17:31

    sir please add new video i mean add new hd like 270 360 480 hd system in custom video player please

  3. Jose Martinez Carrasco
    June 24, 2017 at 17:31

    THANKS BROTHER YOUR SAVE MY LIFE 🙂

  4. Diptesh Mukherjee
    June 24, 2017 at 17:31

    it will be my_video

  5. Diptesh Mukherjee
    June 24, 2017 at 17:31

    vid is undefined

  6. Bitshawn Games
    June 24, 2017 at 17:31

    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

  7. Kay Dashty
    June 24, 2017 at 17:31

    One problem I'm encountering is that I cannot see the video, but I can hear the audio. Did anyone else have this issue?

  8. Kevin Calle
    June 24, 2017 at 17:31

    Very nice. Please, I would like to know if it is possible to addapt the quality of video (240p, 1080p) in function of the internet velocity.

  9. Collective Soundwaves
    June 24, 2017 at 17:31

    How do center a 1infosoft html5 audio player?

  10. Matt Nilsen
    June 24, 2017 at 17:31

    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

  11. Dimitri Gbo
    June 24, 2017 at 17:31

    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

  12. framingan
    June 24, 2017 at 17:31

    do i really need a script tag for this or can i do the code without it ?

  13. vishal ranjan
    June 24, 2017 at 17:31

    hey. can any one help me. i want a video quality switch option in my html5 video player

  14. Eric Torres
    June 24, 2017 at 17:31

    Hi bro, I'm seeing your tutorial, I'd like to create a custom videoplayer like that but using typescript and angular2. Do you have some help about that?

  15. Vejeta Blaze
    June 24, 2017 at 17:31

    how to add this player in to the bloger
    it's not working in bloger

  16. The_Neon_Lord
    June 24, 2017 at 17:31

    is it the same with <audio> tags?

  17. John Ryder
    June 24, 2017 at 17:31

    I have a doubt if i wanna display many vids that i have and display them as thumbnails like youtube does what should i do??? pls anyone help me

  18. John Ryder
    June 24, 2017 at 17:31

    i dunno what he has against tom but he made that poor cat 6 times seriously 6times punched on the face and 4 times it got knocked off to that wall… poor cat, nice vid tho

  19. Jack conceprio
    June 24, 2017 at 17:31

    hello i need some help so when i click the pause it dose not change to play thx it you do help 🙂

  20. Azhar Jamil
    June 24, 2017 at 17:31

    i have to create a video streaming system…please help me out how to create

  21. Azhar Jamil
    June 24, 2017 at 17:31

    i have to create a video streaming system…please help me out how to create

  22. Matilde Ribeiro
    June 24, 2017 at 17:31

    Excellent lesson, five stars. Keep up the good work, thank you.

  23. esp heroz
    June 24, 2017 at 17:31

    how do i connected it with mysql as url source??

  24. Dario Hernandez
    June 24, 2017 at 17:31

    Does anyone know how to keep the default video player controls on screen and prevent them from disappearing? I've tried several attempts with no luck.

  25. Fredy Animation
    June 24, 2017 at 17:31

    nice sir u got a follow from me

  26. Adriana Isaila
    June 24, 2017 at 17:31

    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!

  27. Seemant shekhar Tiwari
    June 24, 2017 at 17:31

    how to enable my plugins in my chrome browser please help me!
    because my video is not playing only audio is playing

  28. Telectones Oficial
    June 24, 2017 at 17:31

    Thanks, i am here for thank a help who you me he gave. Thanks again. hehe
    Here in Brazilian no have videos about that subject. Sorry , but my english no is more good.

  29. Stephen Salamone
    June 24, 2017 at 17:31

    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) !?

  30. Arcilion Venuture Samagoar Gumich
    June 24, 2017 at 17:31

    Can you make HD VIDEO CUSTOM PLAYER???

  31. 42/11 Video
    June 24, 2017 at 17:31

    Randall graves?

  32. Ashley Faith
    June 24, 2017 at 17:31

    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

  33. Râistlìn Majere
    June 24, 2017 at 17:31

    I just subbed because I like to hear people threaten random violence.

  34. Meryama Baidi
    June 24, 2017 at 17:31

    i need your help please!
    in my program,I get to play the video but the picture is not displayed

  35. Saifuddin Makati
    June 24, 2017 at 17:31

    I love tom and jerry

  36. Yulio
    June 24, 2017 at 17:31

    How can customize a youtube video embedded on my web page?

  37. Siva Charan
    June 24, 2017 at 17:31

    you missed preload or autobuffer functionaltiy.can you upload that video too?

  38. SpaceManMonster
    June 24, 2017 at 17:31

    Will this fix the ugly "thick Bar" in videos?

  39. Cr Sundar
    June 24, 2017 at 17:31

    Good lesson.

  40. GRI NS
    June 24, 2017 at 17:31

    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

  41. valentin vali
    June 24, 2017 at 17:31

    Great job.

  42. Samya Albaloshi
    June 24, 2017 at 17:31

    You saved my day,, Thanks 🙂

  43. Edwin Ochoa
    June 24, 2017 at 17:31

    You deserve a medal, you are the man.

  44. 이민욱
    June 24, 2017 at 17:31

    what is that tool name?

  45. Juan Rosas
    June 24, 2017 at 17:31

    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?

  46. Disco
    June 24, 2017 at 17:31

    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!

  47. KiKz
    June 24, 2017 at 17:31

    Thanks for this tutorial.

Leave A Comment

You must be logged in to post a comment.