customize video player by html 5 code doesn't working!!!help me

+2 Shourya Chowdhury · April 13, 2015
java script code is

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);

Post a Reply

Replies

Oldest  Newest  Rating
0 Dinank Vashishth · May 2, 2015
The problem is with the barSize variable, it is declared in a function so it is not available to every function in javascript file, i.e. scope of barSize is local.
To solve it just declare barSize before everything.
Ex.
var barSize=600;
// Then the rest of code.
function dofirst(){....  // the rest of the code
  • 1

HTML / CSS / Web Design

107,268 followers
About

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

Links
Moderators