45 lines
1.4 KiB
JavaScript
45 lines
1.4 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const videos = document.querySelectorAll('.video-slide video');
|
|
|
|
// Toggle play/pause on click
|
|
videos.forEach(video => {
|
|
video.addEventListener('click', () => {
|
|
if (video.paused) {
|
|
video.play();
|
|
} else {
|
|
video.pause();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Observer to play/pause videos when they enter/leave the viewport
|
|
const observerOptions = {
|
|
root: document.querySelector('.video-feed'),
|
|
rootMargin: '0px',
|
|
threshold: 0.8 // Trigger when 80% of the video is visible
|
|
};
|
|
|
|
const videoObserver = new IntersectionObserver((entries, observer) => {
|
|
entries.forEach(entry => {
|
|
const video = entry.target;
|
|
if (entry.isIntersecting) {
|
|
// Use a promise to avoid errors if play() is interrupted
|
|
const playPromise = video.play();
|
|
if (playPromise !== undefined) {
|
|
playPromise.catch(error => {
|
|
// Auto-play was prevented, which is common in some browsers.
|
|
// The user can still click to play.
|
|
});
|
|
}
|
|
} else {
|
|
video.pause();
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
videos.forEach(video => {
|
|
videoObserver.observe(video);
|
|
});
|
|
});
|