Необъяснимое поведение в Chrome, это мой код или их?
У меня есть веб-страница с видеоэлементом, вложенным в видео-контейнер div class=, а также панель видео-контроля div class=, которую я использую для анимации 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.
HOWEVER, если я нажму обновить, перезагрузится страница, и я могу навести на нее все, что хочу, и все продолжает работать правильно. Но только если я загружу страницу с помощью обновления.
Это не происходит в Firefox. Я подозреваю, что это может быть ошибка в Chrome, так как она похожа на проблему, которую я представил здесь.
Я действительно понятия не имею, если это проблема с тем, как я делаю, проблема с JQuery или ошибка в Chrome. Мне действительно все равно, какая ошибка, я просто хочу, чтобы все работало.
Спасибо.
Ответы
Ответ 1
self.hover() может быть возвращен, когда заканчивается, таким образом заканчивая player_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)
});
}
Ответ 2
self.hover(function(){
self.find(".video-control-bar").stop().animate({bottom: "0px"}, 25)
}, function(){
self.find(".video-control-bar").stop().animate({bottom: "-39px"}, 350)
})
заменить или удалить stop(). Это может исправить это.