html5视频暂停后无法播放

时间:2013-10-21 17:00:28

标签: javascript jquery html5 video

我正在努力解决自动暂停问题,然后再次播放(手动)问题。视频在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/

提前致谢。

1 个答案:

答案 0 :(得分:2)

请查看这个小提琴: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();
    });
});