Unexplainable behavior in Chrome, is it my code or theirs?

Question

I have webpage with a video element nested in a div class="video-container" along with a div class="video-control-bar" which I am using JQuery to animate. I am also using setInterval to query the currentTime of the video element and reflect that in the progress bar contained in the video-control-bar.

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

Problem? Well, in Chrome, if I load the page, my setInterval function gets called every 500ms like expected, until I mouse over the player, causing the control-bar animation. After that no further calls are made to my setInterval function.

HOWEVER if I hit refresh, the page reloads and I can mouse over it all I want and everything continues working correctly. But only if I load the page via a refresh.

This doesn't happen in Firefox. I suspect it may be a bug in Chrome, as it is similar to a problem I submitted here.

I really have no idea if it's a problem with the way I'm doing things, an issue with JQuery or a bug in Chrome. I really don't care who's bug it is, I just want things to work.

Thanks.

Answer 1

self.hover() might be returning when finished thus ending the player_init()

Try something that separates the timeout function from the hover function, like this:

$(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)
            });
}