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

实时测试：http://jsfiddle.net/973gT/

我尝试使用setInterval＆amp; clearInterval，但是当我计算时它不会那么好用暂停计数。

有时候，它的数量可能会达到2-4-6 ......或者无法清除那个间隔

有人可以帮助我，我失败了吗？

Answer 1

在player.ready内添加了player_play侦听器，这意味着第二次按下播放时，所有事件侦听器将再次绑定。因此，player_pause绑定到暂停事件两次，因此在第二次暂停后会启动两个间隔。

如果您在player.ready而非每个DOMReady提取player_play侦听器，则可以解决此问题。

Demo

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

Demo

您的视频自动播放的原因是您在.play()上呼叫player.ready。如果那不是你想要的那样，那就删除它。

Demo

VideoJS：在5秒内暂停后执行功能

1 个答案: