javascript progressbar and slider

Question

I'm having a bit of trouble I am making my own controls for a html5 video player. I have got everything working correctly but I would like for my slider to have a specified colour left of the thumb and a different colour right of the thumb. i Have seen another example on here that almost does it with jquery but I can only get it working onclick and not progessing automatically with the video. I am new to javascript and could really do with the help getting this to work.

<script>
    var 
        vid, 
        playbtn,
        mutebtn,
        fullscreenbtn,
        seekslider,
        volumeslider,
        curtimetext,
        durtimetext;

    function intializePlayer(){
        //Set object references
        vid = document.getElementById("my_player");
        playbtn = document.getElementById("playpausebtn");
        mutebtn = document.getElementById("mutebtn");
        fullscreenbtn = document.getElementById("fullscreenbtn");
        seekslider = document.getElementById("seekslider");
        volumeslider = document.getElementById("volumeslider");
        curtimetext = document.getElementById("curtimetext");
        durtimetext = document.getElementById("durtimetext");
        //Add event listeners
        playbtn.addEventListener("click",playPause,false);
        mutebtn.addEventListener("click",vidmute,false);
        fullscreenbtn.addEventListener("click",toggleFullScreen,false);
        seekslider.addEventListener("change",vidSeek,false);
        volumeslider.addEventListener("change",setvolume,false);
        vid.addEventListener("timeupdate",seektimeupdate,false);
    }

    window.onload = intializePlayer;

        function playPause(){
            if(vid.paused){
                vid.play();
                playbtn.style.background = "url(images/pause.png)";
            } else {
                vid.pause();
                playbtn.style.background = "url(images/play.png)";
            }
        }   
        function vidSeek(){
            var seekto = vid.duration * (seekslider.value / 100);
            vid.currentTime = seekto;


        }
        function seektimeupdate() {
            var nt = vid.currentTime * (100 / vid.duration);
            seekslider.value = nt;
            var curmins = Math.floor(vid.currentTime / 60);
            var cursecs = Math.floor(vid.currentTime - curmins * 60);
            var durmins = Math.floor(vid.duration / 60);
            var dursecs = Math.floor(vid.duration - durmins * 60);

            if(cursecs < 10){ cursecs = "0"+cursecs; }
            if(dursecs < 10){ dursecs = "0"+dursecs; }
            if(curmins < 10){ curmins = "0"+curmins; }
            if(durmins < 10){ durmins = "0"+durmins; }

            curtimetext.innerHTML = curmins+":"+cursecs;
            durtimetext.innerHTML = durmins+":"+dursecs;
        }
        function vidmute(){
            if(vid.muted){
                vid.muted = false;
                mutebtn.style.background = "url(images/volume.png)";
                volumeslider.value = 100;
            } else {
                vid.muted = true;
                mutebtn.style.background = "url(images/mute.png)";
                volumeslider.value = 0;
            }
        }   
        function setvolume(){
            vid.volume = volumeslider.value / 100;
        }
        function toggleFullScreen(){
            if(vid.requestFullScreen){
                vid.requestFullScreen();
            } else if(vid.webkitRequestFullScreen){
                vid.webkitRequestFullScreen();
            } else if(vid.mozRequestFullScreen){
                vid.mozRequestFullScreen();
            }

    }
</script>

Answer 1

I think what you're trying to do is update the "seektimeupdate" function every second. To do this you can use a thing called "setInterval". The code would look something like this.

var updateBar = setInterval(function(){
//You put the code you want to perform here
seektimeupdate();
},1000)

What the "1000" means is the delay, in milliseconds, between each time the code is fired. You can think of "setInterval" as a for loop that performs its code at a set rate, specified by the number at the end. Sorry if I misunderstood your question and if you want more help on the "setInterval" function then see W3 school's documentation on it here

EDIT: This Code works, assuming you can get the duration of the movie in seconds and the current time of the movie in seconds. The only problem you might encounter is changing the slider, depending on how the user moves the thumb or if they pause the movie. I would suggest using variables to buffer the function. (NOTE): Just replace the jQuery in the jsFiddle link you gave me in the comments with this.

    var movie = {
    //duration of movie, in seconds
duration:1000,
    //current time in movie, in seconds
currentTime:0
    }

    var update = setInterval(function(){
movie.currentTime += 1;
var val = movie.currentTime/movie.duration;

$("#range").css('background-image',
            '-webkit-gradient(linear, left top, right top, '
            + 'color-stop(' + val + ', #94A14E), '
            + 'color-stop(' + val + ', #C5C5C5)'
            + ')'
            );
    },1000);