Question

HTML :

<video id="player" class="video-js vjs-default-skin" controls
  preload="auto" width="400" height="264"
  data-setup="{}">
  <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
  <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
</video>

<a href="#">Click to play video</a>    
<br>
<code></code>

JS :

var player = _V_("player");
var pasue_check = false;

$("a").click(function() {
  player_play();
});


function player_play() {
$("#player").fadeIn();
$("a").fadeOut();

player.ready(function(){
player.play().addEvent("ended",player_ended);
player.addEvent("pause",player_pause);
player.play().addEvent("play",player_resume);
});

}


function player_ended() {
$("#player").fadeOut();
$("a").fadeIn();

    if(pasue_check== true) {
     clearInterval(countInterval);
     pasue_check = false;
    }
    pasue_check = false;
}


function player_pause() {
    count = 1;

    countInterval = setInterval(function() {
        $("code").html(count);
         pasue_check = true;
        if (count==5) {
            player_ended();
        }
         count++
    }, 1000);

}


function player_resume() {
   if(pasue_check== true) {
     clearInterval(countInterval);
     pasue_check = false;
    }
}

Live test : http://jsfiddle.net/973gT/

I try to use setInterval & clearInterval , but it dosen´t work so good when i counting & pause counting.

Sometime it doble count like 2-4-6 … or cant clearInterval

Can some one help me, what i did fail ?

Answer 1

The player.ready listener is added inside player_play, which means that the second time, play is pressed, all the event listeners will be bound once more. Because of this, player_pause is bound twice to the pause event, so that two intervals are started, after the second pause.

If you extract the player.ready listener to be added at DOMReady rather than at each player_play, you will get rid of this problem.

Demo

Another issue is that you’re setting pasue_check (which is misspelled, but at least consistently so) to true within the interval. You would be better off setting this before the interval, because as it is right now, there will be a one second delay from the click of the pause button, until the pasue_check is true. If resume is clicked before that second has elapsed, then clearInterval will not execute. So move that out of the interval as well.

Demo

The reason your video is auto-playing, is that you’re calling .play() upon player.ready. Remove that if that’s not what you want.

Demo