VideoJS : Do function after paused in 5 secs
-
30-06-2021 - |
質問
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 ?
解決
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.
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.
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.