How to add autoplay video when in viewport?

Question

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>

score 0 · Answer 1 · answered May 23 '22 at 15:26

0

You should use Intersection Observer

answered May 23 '22 at 15:26

delalluyah

67
4

score 0 · Answer 2 · answered May 23 '22 at 15:52

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>

score 0 · Answer 3 · answered May 23 '22 at 16:11

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 class="white"></div>
<video>
      <source
        src="https://static.videezy.com/system/resources/previews/000/018/159/original/herbst-version2.mp4"
        type="video/mp4"
      />
    </video>
<div class="white"></div>
<video>
      <source
        src="https://static.videezy.com/system/resources/previews/000/018/159/original/herbst-version2.mp4"
        type="video/mp4"
      />
    </video>

@krazyyyyyy yes it is, just remove `$(this).prop("muted", true);`, but keep in mind that if the user hasn't interacted with document first, videos already exists in viewport won't play because of user privacy concerns, [check here!](https://stackoverflow.com/questions/49930680/how-to-handle-uncaught-in-promise-domexception-play-failed-because-the-use) — Alireza, May 27 '22 at 16:50

How to add autoplay video when in viewport?

3 Answers3