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>
You should use Intersection Observer
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>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>