0

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

现场测试：http: //jsfiddle.net/973gT/

我尝试使用 setInterval 和 clearInterval ，但是当我计数和暂停计数时它的效果并不好。

有时它会像 2-4-6 一样计数......或无法清除间隔

有人可以帮助我吗，我做错了什么？

4

1 回答 1

1

player.ready里面添加了监听器，player_play也就是说第二次按下播放，所有的事件监听器都会重新绑定一次。正因为如此，player_pause两次暂停事件都绑定了两次，所以在第二次暂停之后开始了两个间隔。

如果您提取player.ready要添加的侦听器DOMReady而不是 at each player_play，您将摆脱这个问题。

演示

另一个问题是您在pasue_check间隔内将（拼写错误，但至少始终如此）设置为 true 。你最好在间隔之前设置它，因为就像现在一样，从点击暂停按钮开始会有一秒钟的延迟，直到它pasue_check为真。如果在该秒过去之前单击恢复，则clearInterval不会执行。因此，也将其移出区间。

演示

您的视频自动播放的原因是您正在调用.play(). player.ready如果那不是您想要的，请删除它。

演示

于 2012-09-06T08:50:00.207 回答