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”
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
sir please add new video i mean add new hd like 270 360 480 hd system in custom video player please
THANKS BROTHER YOUR SAVE MY LIFE 🙂
it will be my_video
vid is undefined
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
One problem I'm encountering is that I cannot see the video, but I can hear the audio. Did anyone else have this issue?
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.
How do center a 1infosoft html5 audio player?
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
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
do i really need a script tag for this or can i do the code without it ?
hey. can any one help me. i want a video quality switch option in my html5 video player
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?
how to add this player in to the bloger
it's not working in bloger
is it the same with <audio> tags?
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
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
hello i need some help so when i click the pause it dose not change to play thx it you do help 🙂
i have to create a video streaming system…please help me out how to create
i have to create a video streaming system…please help me out how to create
Excellent lesson, five stars. Keep up the good work, thank you.
how do i connected it with mysql as url source??
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.
nice sir u got a follow from me
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!
how to enable my plugins in my chrome browser please help me!
because my video is not playing only audio is playing
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.
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) !?
Can you make HD VIDEO CUSTOM PLAYER???
Randall graves?
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
I just subbed because I like to hear people threaten random violence.
i need your help please!
in my program,I get to play the video but the picture is not displayed
I love tom and jerry
How can customize a youtube video embedded on my web page?
you missed preload or autobuffer functionaltiy.can you upload that video too?
Will this fix the ugly "thick Bar" in videos?
Good lesson.
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
Great job.
You saved my day,, Thanks 🙂
You deserve a medal, you are the man.
what is that tool name?
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?
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!
Thanks for this tutorial.