当视频位于屏幕中央时自动播放视频 JQuery

Question

我需要你的帮助。我想在视频位于屏幕中央时启动我的视频，并在它离开屏幕时暂停我该怎么做？实际上，我只有这段代码：

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

在我的 js 文件中，我有以下代码：当鼠标输入/鼠标悬停时播放/停止。

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

当视频位于屏幕中央时自动播放视频 JQuery

Autoplay video JQuery when video is in center of my screen

video

jquery