Question

因此，我希望能够在某个滚动点（例如80像素）之后停止并重新启动视频，并且我尝试了一些操作，但它不起作用。我对JS缺乏经验，所以请给我一些轻松的笑声

这对我来说似乎是解决方案，但它会暂停而不重启，甚至无法正常工作...

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    video.pause();
  } else {
    video.play();
  }
}

Answer 1

根据您共享的代码，这是解决方案的外观。它与我在答案结尾处共享的Codepen链接一起使用。

如果您的视频来自YouTube：

<iframe class="youtube-video" width="560" height="315" src="https://www.youtube.com/embed/glEiPXAYE-U?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>

您的JS应该如下所示：

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    $('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
  } else {
    $('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
  }
}

视频触发记入了这支笔：https://codepen.io/briangelhaus/pen/meeLRO

演示：Codepen

向下滚动一定数量的像素后，如何重新启动视频？

1 个答案: