mi objetivo es que cuando el video ingrese a la ventana gráfica, el video se reproducirá automáticamente incluso si no se hace clic en el botón de reproducción y se pausa automáticamente cuando sale de la ventana gráfica, incluso si no se hace clic en el botón de pausa
<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>Deberías usar Intersection Observer
prueba este código javascript en tu 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>Puedes usar un observador para hacer eso :)
$("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>