我有一个网页,其中有一个视频元素嵌套在一个div class=“video container”中,还有一个div class=“video control bar”,我使用jquery来制作动画。我还使用setinterval查询视频元素的当前时间,并在视频控制栏中包含的进度栏中反映该时间。
javascript:

$(function(){
  $(".video-container").each(function(){
    player_init($(this))
  })
})

function player_init(self)
{
  setInterval(function(){
    var video = self.find("video")[0]
    self.find(".video-control-bar").find(".video-position").find("input").val(video.currentTime / video.duration)
    self.find(".video-control-bar").find(".video-position").find("progress").val(video.currentTime / video.duration)
  }, 500)
  self.hover(function(){
    self.find(".video-control-bar").stop().animate({bottom: "0px"}, 25)
  }, function(){
    self.find(".video-control-bar").stop().animate({bottom: "-39px"}, 350)
  })
}

有问题吗?好吧,在chrome中,如果我加载页面,我的setInterval函数会像预期的那样每隔500毫秒被调用一次,直到我将鼠标移到播放器上,导致控制栏动画。之后,不再调用setinterval函数。
但是,如果我点击刷新,页面就会重新加载,我可以将鼠标移到我想要的地方,一切都会继续正常工作。但只有当我通过刷新加载页面时。
这在Firefox中不会发生。我怀疑这可能是Chrome中的一个bug,因为它类似于我提交的一个问题。
我真的不知道这是我做事方式的问题,是jquery的问题还是chrome的bug。我真的不在乎是谁出了问题,我只想让一切正常。
谢谢。

最佳答案

self.hover()可能会在完成时返回,从而结束玩家_init()。
尝试将超时函数与悬停函数分开,如下所示:

$(function(){
    $(".video-container").each(function(){
        $this = $(this);  //small optimization
        hover_init($this);
        player_init($this);

        });
});
function player_init(self){
  var a = self.find(".video-control-bar .video-position");
  var video = self.find("video")[0]
  setInterval(function(){
    a.find("input").val(video.currentTime / video.duration)
    a.find("progress").val(video.currentTime / video.duration)
  }, 500)
}
function hover_init(self){
    selfhover(
            function(){
                self.find(".video-control-bar").stop().animate({bottom: "0px"}, 25)
            }, function(){
                self.find(".video-control-bar").stop().animate({bottom: "-39px"}, 350)
            });
}

07-24 09:46
查看更多