How to add autoplay video when in viewport?-CodePudding

my goal is when the video enters the viewport the video will play automatic even is not clicked in the play button and auto-pause when leaves the viewport even is not clicked in pause button

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                      <video id="video1" played="false" style="width: 100%; height: 60vh" controls controlslist="nodownload">
                        <source src="assets\homevideo.mp4" type="video/mp4">
                        <source src="assets\homevideo.ogg" type="video/ogg">
                      </video>
<script>
$.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);</script>

CodePudding user response：

You should use Intersection Observer

CodePudding user response：

try this javascript code in your script.

document.addEventListener("webkitfullscreenchange", function () {
     var vid = document.getElementById("video1");
     if(document.webkitIsFullScreen == true){
            vid.play();
     } else {
            vid.pause();
     }
     
}, false);

document.addEventListener("fullscreenchange", function () {
     console.log(document.fullscreen);
     var vid = document.getElementById("video1");
     if(document.fullscreen == true){
            vid.play();
     } else {
            vid.pause();
     }
}, false);
document.addEventListener("mozfullscreenchange", function () {
     console.log(document.mozFullScreen);
     var vid = document.getElementById("video1");
     if(document.mozFullScreen == true){
            vid.play();
     } else {
            vid.pause();
     }
}, false);

<!DOCTYPE html>
<html>
<head>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<video id="video1" style="width: 100%; height: 60vh" controlslist="nodownload" controls="controls">
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
</body>
</html>

CodePudding user response：

You can use an observer for doing that :)

$("video").each(function() {
  $(this).prop({
    controls: true,
    controlslist: "nodownload"
  });
  const observer = new window.IntersectionObserver(
    ([entry]) => {
      if (entry.isIntersecting) {
        if (this.paused) {
          $(this).prop("muted", true);
          this.play();
        }
      } else {
        this.pause();
      }
    }, {
      threshold: 0.5,
    }
  );
  observer.observe(this);
});

video {
  width: 100%;
}

.white {
  height: 1000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ></div>
<video>
      <source
        src="https://static.videezy.com/system/resources/previews/000/018/159/original/herbst-version2.mp4"
        type="video/mp4"
      />
    </video>
<div ></div>
<video>
      <source
        src="https://static.videezy.com/system/resources/previews/000/018/159/original/herbst-version2.mp4"
        type="video/mp4"
      />
    </video>