【问题标题】:html5 video can't play after pausehtml5视频暂停后无法播放
【发布时间】:2013-10-22 03:00:34
【问题描述】:

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

提前致谢。

【问题讨论】:

  • 如果你不清除你的时间间隔,它会一直暂停,因为 currentTime 将大于或等于 2
  • 也,而不是间隔,使用timeupdate事件
  • 好地方......它现在正在工作......非常感谢你。Fiddle 现在更新了。
  • 如何在 jquery 中使用 timeupdate 事件。不知道 :(
  • 很确定是$("video")[0].addEventListener('timeupdate', function(event){...});

标签: javascript jquery html video


【解决方案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();
    });
});

【讨论】:

  • 太棒了。我做了一些修改,所以现在我有两个控件。非常感谢您的帮助。我今天早上开始,现在是晚上 8 点。学到了很多东西。再次感谢。
  • 嘿罗尼再次感谢。我刚刚在我的原始代码中实现并完美运行。非常感谢。
  • 很高兴它为你解决了。不要忘记接受答案
猜你喜欢
  • 2012-05-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多