javascript - html5视频暂停后无法播放

Question

我正在努力解决自动暂停然后再次播放（手动）的问题。视频在 2 秒后暂停，这很好。现在有另一个按钮，单击该按钮，视频应该从暂停的位置开始播放。

这是我的代码（html）：

<div class="restart">Restart after pause</div>
<video id="video" width="400" height="400" id="video" src="http://media.w3.org/2010/05/sintel/trailer.mp4" controls autoplay />

jQuery：

jQuery(document).ready(function ($) {

    $('#video').get(0).play();


    setInterval(function () {
        if ($('#video').get(0).currentTime >= 2) {
            $('#video').get(0).pause();
        }
    }, 100);


    $(".restart").click(function(event){

         $('#video').get(0).play();


    setInterval(function () {
        if ($('#video').get(0).currentTime >= 6) {
            $('#video').get(0).pause();
        }
    }, 100);
    });

});

关于当前时间和设定时间，我绝对不在正确的道路上。请提出建议。

JSFiddle 是

http://jsfiddle.net/squidraj/KmQxL/10/

提前致谢。

Answer 1

请查看这个小提琴：http: //jsfiddle.net/VZuuF/1/

我摆脱了您的 setIntervals ，因为它们对于timeupdate可用的事件是不必要的。

$(document).ready(function()
{
    var checkedFirst = false;
    var checkedSecond = false;
    $player = $('#video').get(0);
    $player.play();

    $player.addEventListener('timeupdate', function(event)
    {
        console.log($player.currentTime); 
        if ($player.currentTime >= 2 && !checkedFirst)
        {
            checkedFirst = true;
            $player.pause();
        }

        if ($player.currentTime >= 6 && !checkedSecond)
        {
            checkedSecond = true;
            $player.pause();
        }
    });


    $(".restart").click(function(event)
    {
        $player.play();
    });
});