Create a video in your HTML5 page, here is the javascript code you needed it

Here i put the java script source code make your video work.

here the final file you needed it.

function doFirst(){
    barSize=600;
    myMovie=document.getElementById(‘myMovie’);
    playButton=document.getElementById(‘playButton’);
    bar=document.getElementById(‘defaultBar’);
    progressBar=document.getElementById(‘progressBar’);
    
    playButton.addEventListener(‘click’,playOrPause,false);
    bar.addEventListener(‘click’,clickedBar,false);
}
function playOrPause(){
   if(!myMovie.paused && !myMovie.ended ) {
       myMovie.pause();
       playButton.innerHTML=’Play’;
       window.clearInterval(updateBar);
   }else{
       myMovie.play();
       playButton.innerHTML=’Pause’;
       updateBar=setInterval(update,500);
   }
}

function update(){
    if(!myMovie.ended){
        var size=parseInt(myMovie.currentTime*barSize/myMovie.duration);
        progressBar.style.width=size+’px’;
    }else{
         progressBar.style.width=’0px’;
          playButton.innerHTML=’Play’;
          window.clearInterval(updateBar);
    }
}

function clickedBar(e){
    if(!myMovie.paused && !myMovie.ended){
        var mouseX=e.pageX-bar.offsetLeft;
        var newtime=mouseX*myMovie.duration/barSize;
        myMovie.currentTime=newtime;
        progressBar.style.width=mouseX+’px’;
        
    }
}
window.addEventListener(‘load’,doFirst,false);

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s