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
Rizki Adi Saputra
Thanks for sharing ! this is my result, https://prnt.sc/gunzg6
yee, look like yutub , for reference 🙂
Richard Claus
Thank you! My hero!
netikar sundeep
Nice video, Thanks . Can u create a tutorial for video to display in landscape mode using css and javascript.plz
SSEmery
Great video mate, really helped me
Super Khaled
hope from you to create another advanced playlist and Thank you!
Belgraas ETC
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?
Kevin Wiens
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..
mugabo jean
thank you for video and so how to make playlist video
Umakant Vfx
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;
}
shiningdark00
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
Rizky Pratama
How to display custom controls on the full screen mode?
Купстас Николай
How about loading progress?
Swapnil Sonsurkar
thnx for share this knowledge here
roinomade
Great !!! Thank you.
crashxxx
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.
Mihail Bakalov
Thank you, Adam! This was very very helpful!!! Your tutorials are great, I learned a lot very quickly!
Haftepaff
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?
Сергей Губарев
how play youtube video in this tag?
chandrasekar p
its easy… and good tutorial
Roma Yusif
Thanks..this best tutorial…sory how i can add buffering this videoplayer?and change button icons? please help me ..
merlin2437
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.
Timilehin Peniel
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.
Gideon Ofori
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.
DigitalFusionProduction
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?
Peter M. Souza Jr.
my users can now upload videos !!! thanks
Justin 1993
What if you have multiple videos on one page, the controls stop working?
Thanks,
Jay Mee
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?
Pikachyu
firefox only accepts the -webkit-appearance: none and the height value, everything else is colored by firefox itself :/
Johnny original
Is there any way to make CC/Subittels if it is could u make that tourial too pls?
bout businese
how do u put your logo on the bar like youtube
Felten Hage
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.
Nikolaj Rohwedder
Hey, is it possible you know how to make a button for subtitles work? like with the play/pause and fullscreen
Thanks.
Jose Echevarria
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.
Haris Reader
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. 🙂
Yokim Yokimsson
Great series! I have learned alot 🙂 Keep it up!
CrAzY mO
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
abo2lhish
Can u send plz the images too .. !!
Chris
hey how can I insert a watermark in the HTML5 player?
Greetings from Germany
Jamie MotoJ
how did you use mp4 for all browsers? video works on none other than chrome and i only have sound no picture help please… 🙁
Iago Beuller
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?
BrKT85
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.
Salum Sinare
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 !
OSHbots
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.
Azad Baban
Awesome series. I would suggest to use webfont icons instead of graphics. It makes things lighter and easier.
Alfy George
thanks bro really help me….
Pedro Vemba
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.
Ryan D
Awesome video's! Is there a way to have the seekbar also a progress bar?
Mouad El Bhiri
good videos you are the best men my account in facebook fb/mouad.bhiri2
Emanuel Hillberg
Great job Adam. Thanks for sharing!
smx
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?