如果部分有 class 则开始播放视频

Question

请帮我在#video-section上滚动时自动播放视频.visible class名字․反之亦然，当 .visible class 名称将从部分中删除时，视频将停止。谢谢。

<section class="cd-section">
        some content
</section>
<section id="video-section" class="cd-section">
    <video>
        <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
    </video>
</section>
<section class="cd-section">
        some content
</section>

JSFiddle 在这里https://jsfiddle.net/y896ec5x/

Answer 1

你需要检查视频部分是否可见 class 如果它正在播放视频，否则停止它，你需要在滚动事件上检查这个，我已经添加了可滚动的正文，但是如果它在其他标签中使用它。

$("body").scroll(function() {
    if ($('#video-section').hasClass('visible')) {
       $("video").play();
    } else {
        $("video").pause();
    }
});

Answer 2

使用算法检测元素是否完全 Check if element is visible after scrolling，你可以

$(window).scroll(function() {
  if (isScrolledIntoView('#video')) {
    $('#video').get(0).play();
  } else {
    $('#video').get(0).pause();
  }
});

function isScrolledIntoView(elem) {
  var $elem = $(elem);
  var $window = $(window);

  var docViewTop = $window.scrollTop();
  var docViewBottom = docViewTop + $window.height();

  var elemTop = $elem.offset().top;
  var elemBottom = elemTop + $elem.height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

.cd-section {
  height: 100vh;
}

#video {
  height: 50vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="cd-section">
  some content
</section>
<section id="video-section" class="cd-section">
  <video id="video">


    <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
      <source src="http://www.w3schools.com/tags/movie.ogg" type="video/ogg">
        Your browser does not support the video tag.
  </video>
</section>
<section class="cd-section">
  some content
</section>

Answer 3

你在做什么（基于评论）：

$("video").play();
// or
$("video").pause();

无效，因为 jQuery 本身没有这些功能。

尝试使用 $.get 方法，其中 returns 元素的常规 JavaScript DOM 对象：

$("video").get(0).play();
// or
$("video").get(0).pause();

~~然后在滚动时检测到这个~~（没有滚动条的视差站点），将它包装在一个 wheel 事件中来处理：

$("html, body").bind("mousewheel", function(){
  if ($("#video-section").hasClass("visible")) {
    $("video").get(0).play()
  } else {
    $("video").get(0).pause();
  }
});

如果部分有 class 则开始播放视频

If section has class than start playing video

javascript

jquery

html5-video