• Wednesday , 15 November 2017

6. HTML5 Custom Video Player Controls JavaScript CSS Design Tutorial

Code Canyon



Lesson Code: http://www.developphp.com/video/JavaScript/Video-Player-Controls-CSS-Design-Tutorial
6th and final part of customizing the HTML5 video controls. In this video we will show some design tips for customizing the video player to match your specific brand or site design. I want to remind everyone that HTML5, CSS3 and some JavaScript functionality cannot yet be depended on to work in all browser software the same. Once these technologies are standardized you can then depend on them to work across the board. Old browsers will most certainly not handle this code well, so we will discuss using browser prefixes and alternatives to the range slider component.

Original source

3d Ocean

Related Posts

50 Comments

  1. Rizki Adi Saputra
    October 18, 2017 at 11:22

    Thanks for sharing ! this is my result, https://prnt.sc/gunzg6
    yee, look like yutub , for reference 🙂

  2. Richard Claus
    October 18, 2017 at 11:22

    Thank you! My hero!

  3. netikar sundeep
    October 18, 2017 at 11:22

    Nice video, Thanks . Can u create a tutorial for video to display in landscape mode using css and javascript.plz

  4. SSEmery
    October 18, 2017 at 11:22

    Great video mate, really helped me

  5. Super Khaled
    October 18, 2017 at 11:22

    hope from you to create another advanced playlist and Thank you!

  6. Belgraas ETC
    October 18, 2017 at 11:22

    Great Series of tutorials!, but I have one concern: is it that this is only for one video? if it not how to target two or more videos play on the same player?

  7. Kevin Wiens
    October 18, 2017 at 11:22

    P.S I have already made all this work in Adam's HTML-5 audio player so I assume it is
    a very similar process..Thanks again..

  8. mugabo jean
    October 18, 2017 at 11:22

    thank you for video and so how to make playlist video

  9. Umakant Vfx
    October 18, 2017 at 11:22

    for more style video player put code in css
    video#my_video{
    border: 0px solid;
    border-radius: 35px;}
    div{
    background-color:red;
    }
    div#video_player_box{background-color:red;
    border: 2px solid;
    border-radius: 25px;}
    div{
    background-color:red;
    border: 2px solid;
    border-radius: 25px;
    }
    input#volumeslider{
    background-color:red;
    border: 2px solid;
    border-radius: 25px;
    }
    button#mutebtn{
    background-color:red;
    border: 2px solid;
    border-radius: 25px;
    }
    button#fullscreenbtn{
    background-color:green;
    border: 2px solid;
    border-radius: 25px;
    }

  10. shiningdark00
    October 18, 2017 at 11:22

    Thanks for the great tutorial series. It all works, except the play / pause button is not visible. I copied all code exactly… It does work, just doesn't show. So how can I get it to show? thanks

  11. Rizky Pratama
    October 18, 2017 at 11:22

    How to display custom controls on the full screen mode?

  12. Купстас Николай
    October 18, 2017 at 11:22

    How about loading progress?

  13. Swapnil Sonsurkar
    October 18, 2017 at 11:22

    thnx for share this knowledge here

  14. roinomade
    October 18, 2017 at 11:22

    Great !!! Thank you.

  15. crashxxx
    October 18, 2017 at 11:22

    Hey guys, here something to think about how would you make play/pause in one line at 10:59? You can see the code Adam took 6-7 lines, perfectly fine tho, but today I was implementing exactly play/pause in 1line(not counting updating html 2 lines if we count updating html.

  16. Mihail Bakalov
    October 18, 2017 at 11:22

    Thank you, Adam! This was very very helpful!!! Your tutorials are great, I learned a lot very quickly!

  17. Haftepaff
    October 18, 2017 at 11:22

    I've a video that has been encoded with softsub (ssa/ass), but the subtitles is disabled by default whenever I play the clip. Is there a viable solution to this issue by any chance?

  18. Сергей Губарев
    October 18, 2017 at 11:22

    how play youtube video in this tag?

  19. chandrasekar p
    October 18, 2017 at 11:22

    its easy… and good tutorial

  20. Roma Yusif
    October 18, 2017 at 11:22

    Thanks..this best tutorial…sory how i can add  buffering this videoplayer?and change button icons? please help me ..

  21. merlin2437
    October 18, 2017 at 11:22

    You have a wonderful conciseness and clarity. I've learnt so much. Thank you. Got my player working, Firefox OK, Chrome OK, but IE looks like their style not mine. Hoped HTML5 would get rid of all this browser specific code after years of trying to code for all the browsers.

  22. Timilehin Peniel
    October 18, 2017 at 11:22

    Thanks. Not just to this series of video, but to all other video tutorials that you have made. They are really helpful. Thanks a million times.

  23. Gideon Ofori
    October 18, 2017 at 11:22

    Thanks for your great tutorials, i like this series because it has numbering which makes it easier to follow. I wish the css3 series and html5 were also numbered.

  24. DigitalFusionProduction
    October 18, 2017 at 11:22

    Is there a way to create chapters in the video have them linked. ex. Chapter 1, Chapter 2 and the link would jump the player play head?

  25. Peter M. Souza Jr.
    October 18, 2017 at 11:22

    my users can now upload videos !!! thanks 

  26. Justin 1993
    October 18, 2017 at 11:22

    What if you have multiple videos on one page, the controls stop working?

    Thanks,

  27. Jay Mee
    October 18, 2017 at 11:22

    how do i get this to play on click (when i click the video)? Also #RewriteRule ^watch/([0-9]+)/([0-9a-zA-Z_-] +)$ /apps/vids/index.php?title=$1 [NC,L]

    doesn’t seem to work any ideas?

  28. Pikachyu
    October 18, 2017 at 11:22

    firefox only accepts the -webkit-appearance: none and the height value, everything else is colored by firefox itself :/

  29. Johnny original
    October 18, 2017 at 11:22

    Is there any way to make CC/Subittels if it is could u make that tourial too pls?

  30. bout businese
    October 18, 2017 at 11:22

    how do u put your logo on the bar like youtube

  31. Felten Hage
    October 18, 2017 at 11:22

    Thanks for the video, it was really helpful.

    Is there also a way that the video is going to pause if you scroll away from the video?
    Hope you can help me with that.

  32. Nikolaj Rohwedder
    October 18, 2017 at 11:22

    Hey, is it possible you know how to make a button for subtitles work? like with the play/pause and fullscreen 
    Thanks.

  33. Jose Echevarria
    October 18, 2017 at 11:22

    How eliminate the default html5 controls, after customized the video controls if you do right click you can select show controls and will stay showing the default controls especially in a full screen mode.

  34. Haris Reader
    October 18, 2017 at 11:22

    Hello Adam

    I would like after you finish the video, the seekbar return to start, and the time to zero. How can I do this? 

    Thank you very much for your answer and for your tutorial. 🙂

  35. Yokim Yokimsson
    October 18, 2017 at 11:22

    Great series! I have learned alot 🙂 Keep it up!

  36. CrAzY mO
    October 18, 2017 at 11:22

    Hello everyone is it possible to let visitors that come into my site upload their own videos? someone please help! i've been trying to figure this out for a long time now!! Thank you

  37. abo2lhish
    October 18, 2017 at 11:22

    Can u send plz the images too .. !! 

  38. Chris
    October 18, 2017 at 11:22

    hey how can I insert a watermark in the HTML5 player?

    Greetings from Germany

  39. Jamie MotoJ
    October 18, 2017 at 11:22

    how did you use mp4 for all browsers? video works on none other than chrome and i only have sound no picture help please…  🙁

  40. Iago Beuller
    October 18, 2017 at 11:22

    Could you make a tutorial for html5 <video> Gamma Correction, i'm looking for to my already done Video Player, but i dont find, maybe a tutorial using a flash plugin for gamma correction?

  41. BrKT85
    October 18, 2017 at 11:22

    Adam, can you please do a tutorial on how to insert an image in an HTML 5 video tag. The image is a link and displays before the video plays, when the video is paused or when the video ends.

    Thanks.

  42. Salum Sinare
    October 18, 2017 at 11:22

    This tutorial series was the one  i was looking for
    and you made it easy for me to understand how to make my own video player on my websites 
    thanks a lot there !

  43. OSHbots
    October 18, 2017 at 11:22

    It might be better to have some of the players background color in your button images so you have a bigger target to click on. I don't think browsers make the transparent parts "click-able", so maybe just leave a strip between the rectangles of the "pause" button and it might be easier to use.  My 2 cents…   Great series.

  44. Azad Baban
    October 18, 2017 at 11:22

    Awesome series. I would suggest to use webfont icons instead of graphics. It makes things lighter and easier. 

  45. Alfy George
    October 18, 2017 at 11:22

    thanks bro really help me….

  46. Pedro Vemba
    October 18, 2017 at 11:22

    Adam, I just want say thank u for the time u devote to give free tutorials that benefit a large number of students n professionals. u probably have no idea how the work u do helps us.
    Very few people have that passion of sharing their knowledge with others and u r one of this few guys.
    Thanks once again.

  47. Ryan D
    October 18, 2017 at 11:22

    Awesome video's! Is there a way to have the seekbar also a progress bar?

  48. Mouad El Bhiri
    October 18, 2017 at 11:22

    good videos you are the best men my account in facebook fb/mouad.bhiri2

  49. Emanuel Hillberg
    October 18, 2017 at 11:22

    Great job Adam. Thanks for sharing!

  50. smx
    October 18, 2017 at 11:22

    I used your code and used the slider to set the volume to 0 and effectively muted the video, but the Mute did not change to Unmute. What can I do about this?

Leave A Comment

You must be logged in to post a comment.