时间戳

首页 > 解决方案 > 向下滚动一定数量的像素后如何重新启动视频？

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

问题描述

所以我希望能够在某个滚动点（比如说 80 像素）之后停止并重新启动视频，并且我尝试了一些东西但它不起作用。我对 JS 非常缺乏经验，所以请让我放松一下，哈哈

这对我来说似乎是解决方案，但它会暂停而不是重新启动，而且它甚至不起作用......

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

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

标签： javascripthtml

解决方案

根据您共享的代码，解决方案应如下所示。它适用于我在答案末尾共享的 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

推荐阅读