Mam tę funkcję, która uruchamia wideo, gdy przewijam do niego:

var _video = document.getElementById('video-one');

function isScrolledIntoView(element) {
  var elementTop = element.getBoundingClientRect().top,
    elementBottom = element.getBoundingClientRect().bottom;

  return elementTop >= 0 && elementBottom <= window.innerHeight;
}

window.addEventListener("scroll", function() {
  if (isScrolledIntoView(_video)) {
    _video.play();
  }
});

Problem polega na tym, że po zatrzymaniu się wideo i przewinięciu go z powrotem do niego - znowu działa. Ale potrzebuję, żeby uruchomił się tylko raz, tylko przy pierwszym przewijaniu do niego. Próbowałem oflagować funkcję do uruchomienia raz, ale to nie działa:

var _video = document.getElementById('video-one');

function isScrolledIntoView(element) {
  var elementTop = element.getBoundingClientRect().top,
    elementBottom = element.getBoundingClientRect().bottom;

  return elementTop >= 0 && elementBottom <= window.innerHeight;
}

var started = false;
if (!started) {
  window.addEventListener("scroll", function() {
    if (isScrolledIntoView(_video)) {
      _video.play();
    }
  });
  started = false;
}

Co ja robię źle?

1
Ido Angel-Bohadana 21 marzec 2020, 02:48

2 odpowiedzi

Najlepsza odpowiedź

Musimy przekazać dokładnie te same argumenty w przypadku usunięcia elementu eventListener. Ta metoda ma rozwiązać problem. Powodem jest to, że removeEventListener pobiera wszystkie swoje argumenty z listy argumentów procedury obsługi.


Zmieniłem eventPhase na TRUE i to działa.

window.addEventListener('scroll', function(e){
    if (isScrolledIntoView(_video)) {
        _video.play();
        this.removeEventListener(e.type,arguments.callee,e.eventPhase);
    }
}, true); // CHANGED HERE!!!!
2
Leonid 21 marzec 2020, 12:40

Ponieważ oznaczyłeś to tagiem „jquery” (chociaż nie widzę kodu jquery), dam ci odpowiedź w jquery :)

function videoScroll() {
    if ($('#video-one').visible(true)) {
        videoPlay();
    }
}

function videoPlay() {
    $(window).off("scroll", videoScroll());
    $("#video-one").play();
}

$(window).on("scroll", videoScroll()); 
0
Brian Patterson 21 marzec 2020, 03:04