如果视频在视口中/不在视口中，则自动播放/暂停视频

Question

如果视频在视口中/不在视口中，我需要播放/暂停视频。

到目前为止它有效。问题是，如果用户按下暂停，视频就会再次开始播放。

// Limitation: Does not work if the element is
// out of view because it is too far right or left
$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

setInterval(function() {
    $('video').each(function(){
        if ($(this).isInViewport()) {
            $(this)[0].play();
        } else {
            $(this)[0].pause();
        }
    });
}, 1000);

#right {
  position: absolute;
  top: 2000px;
}
#video1 {
  position: absolute;
  left: 0px;
  top: 1000px;
}
#video2 {
  position: absolute;
  left: 0px;
  top: 2000px;
}

body {
  width: 500px;
  height: 3000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="info"></div>

<div id="down">
  scroll down please...
</div>

<video id="video1" controls muted>
  <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<video id="video2" controls muted>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"/>
  Your browser does not support the video tag.
</video>

我尝试观察播放/暂停按钮，以便我可以挂钩事件，但视频标签是一个影子 dom，我不知道如何处理它。

https://jsfiddle.net/6agbqjsL/

Answer 1

我想通了。这样，视频只有在离开视口并再次进入视口时才会重新开始播放：

// Limitation: Does not work if the element is
// out of view because it is too far right or left
$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

setInterval(function() {
    $('video').each(function(){

        let id = $(this).attr("id");
        let played = $(this).attr("played");

        if ($(this).isInViewport()) {
            if (played == "false") { 
                $(this)[0].play();
                $(this).attr("played", "true");  
            }
        } else {
            if (played == "true") { 
                $(this)[0].pause();
                $(this).attr("played", "false");  
            }
        }
    });
}, 1000);

#right {
  position: absolute;
  top: 2000px;
}
#video1 {
  position: absolute;
  left: 0px;
  top: 1000px;
}
#video2 {
  position: absolute;
  left: 0px;
  top: 2000px;
}

body {
  width: 500px;
  height: 3000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="info"></div>

<div id="down">
  scroll down please...
</div>

<video id="video1" controls muted played="false">
  <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<video id="video2" controls muted played="false">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"/>
  Your browser does not support the video tag.
</video>

这样视频暂停后就不会再自动播放了：

// Limitation: Does not work if the element is
// out of view because it is too far right or left
$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

setInterval(function() {
    $('video').each(function(){

        var id = $(this).attr("id");
        let played = $(this).attr("played");

        if ($(this).isInViewport()) {
            if (played == "false") { 
                $(this)[0].play();
                $(this).attr("played", "true");
            }
        } else {
            $(this)[0].pause();
        }
    });
}, 1000);

#right {
  position: absolute;
  top: 2000px;
}
#video1 {
  position: absolute;
  left: 0px;
  top: 1000px;
}
#video2 {
  position: absolute;
  left: 0px;
  top: 2000px;
}

body {
  width: 500px;
  height: 3000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="info"></div>

<div id="down">
  scroll down please...
</div>

<video id="video1" controls muted played="false">
  <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<video id="video2" controls muted played="false">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"/>
  Your browser does not support the video tag.
</video>

Answer 2

IntersectionObserver 是用于检测与视口元素交互的最有效的 API。

我为页面上的单个视频元素提供了这样的解决方案，该解决方案放置在页面的最顶部部分。

function playVideoInViewport() {
  let video = document.querySelector("video");

  if (!video) return;

  video.muted = true;
  let playPromise = video.play();

  let observer;

  if (playPromise !== undefined) {
    playPromise
      .then((_) => {
        observer = new IntersectionObserver(
          ([entry]) => {
            if (entry.isIntersecting) {
              video.play();
            } else {
              video.pause();
            }
          },
          { threshold: 0.3 }
        );

        observer.observe(video);
      })
      .catch((error) => {
        console.error(error);
      });
  }
}