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

1 个答案: