Как перезапустить видео после прокрутки на определенное количество пикселей?

Question

Итак, я хочу иметь возможность останавливать и перезапускать видео после определенной точки прокрутки (скажем, 80 пикселей), и я попробовал кое-что, и это не работает.Я не очень разбираюсь в JS, так что, пожалуйста, сделайте мне немного расслабиться. LOL

Мне показалось, что это решение, но оно не остановит перезапуск, а также не работает ...

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