Автовоспроизведение видео JQuery, когда видео находится в центре моего экрана

Question

Мне нужна ваша помощь. Я хочу запустить свое видео, когда видео находится в центре моего экрана, и поставить паузу, когда его вокруг экрана Как я могу это сделать? На самом деле, у меня есть только этот код:

<%= video_tag 'Garden.mp4', :height =>"350px", :class => "video", :controls => true, :muted => true, :autoplay => true%> 

И на мой файл JS, у меня есть следующий код: Play/Stop когда MouseEnter/наведении курсора мыши.

$(document).on({ 
    mouseenter: function() { this.play(); }, 
    mouseleave: function() { this.pause(); } 
}, '.video'); 

Благодаря мне помочь :)

Answer 1

Этот следующий код работы. Между 33% сверху и снизу будет воспроизводиться ваше видео.

$(window).scroll(function(e) 
    { 
    var offsetRange = $(window).height()/3, 
     offsetTop = $(window).scrollTop() + offsetRange + $("#header").outerHeight(true), 
     offsetBottom = offsetTop + offsetRange; 

    $(".video").each(function() { 
     var y1 = $(this).offset().top; 
     var y2 = offsetTop; 
     if (y1 + $(this).outerHeight(true) < y2 || y1 > offsetBottom) { 
     this.pause(); 
     } else { 
     this.play(); 
     } 
    }); 
});