code has no effect on updation part of progressbar

+1 kushan singh · March 27, 2015
THIS IS THE HTML CODE:
<!DOCTYPE html>
<html lang = "en">
<head>

<link rel = "stylesheet"  type = "text/css" href = "main2.css" />
<script src = "kushan.js">
</script>
</head>
<body>
   <section id = "skin">
      <video id = "mymovie"  width = "640" height = "360">
    <source src = "D:/web development/3-Way (The Golden Rule) (feat. Justin Timberlake & Lady Gaga) - Copy - Copy.mp4">
   
   </video>
   <nav>
      <button type = "button" id = "playbutton">play </button>
  <div id = "defaultbar">
      <div id = "progressbar"></div>
   </div>
      
 
 <div style = "clear:both"></div>
 </nav>
  </section>
</body>
</html>

THIS IS JAVASCRIPT CODE:

function doFirst()
{
   
  var barsize  = 600;
  var mymovie = document.getElementById('mymovie');
  var playbutton = document.getElementById('playbutton');
  var bar = document.getElementById('defaultbar');
  var progressbar = document.getElementById('progressbar');
  
   playbutton.addEventListener('click', pauseOrplay, false);
bar.addEventListener('click', clickedbar, false);
}


   function pauseOrplay()
   {
     
     if(!mymovie.paused&&!mymovie.ended)
 {
    mymovie.pause();
playbutton.innerHTML = 'play';
window.clearInterval(updatebar);
 }
 else{
    mymovie.play();
playbutton.innerHTML = 'pause';
 var 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);

THIS IS CSS CODE:

body { text-align:center;
         }

 
 section,nav,article,footer,hgroup,header,aside{
                          display:block;
     }
#skin {   border:4px solid black;
background:green;
padding:10px;
margin:5px auto;
width:700px;
height:400px;
border-radius:25px;
           }
nav {   margin:5px 0px;

      }
#playbutton {  float:left;
            width:60px;
height:20px;
         }
#defaultbar {    position:relative;
float:left;
width:600px;
 height:16px;
  padding:5px;
  background-color:yellow;
 
              }
#progressbar {  position:absolute;
                   width:0px;
  height:16px;
  background:blue;
                }

Post a Reply

Replies

Oldest  Newest  Rating
0 muhtar muhtar · March 28, 2015
Hello

  <meta charset="utf-8"/>
                   <title>Moj primjer za vjezbanje</title>
                   <link rel="styleeshet" href="main.css">


                   <link rel="stylesheet" type="text/css" href="main2.css">

                                                           or

ex:                 <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
                      </head>



                                       
0 kushan singh · March 29, 2015
i tried this still it wont work
0 Bhaskar Thakur · March 29, 2015
Come on man!!! for progress bar you use Java Script,  AJAX would do the job perfectly.
0 kushan singh · March 29, 2015
i dont know AJAX yet .
0 kushan singh · March 30, 2015
i got the bug .
i was using all the variables in my function doFirst as local variables thats why my update was not working.
now its good to go,working fine.
thank you guys for your suggestions though
  • 1

HTML / CSS / Web Design

107,101 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators