jquery scroll 질문 드립니다.
본문
안녕하세요
아래 video 문이 반복적으로 10개 생성되어 있습니다.
<div class="relative w-full h-full overflow-hidden flex flex-col gap-y-14">
<video>dfsdfds</vide>
</div>
스크롤이 되면서 2번째 video에 스크롤이 오면 자동으로 video가 실행되게
하고 싶은데 실행이 안되네요.
1. 스크롤을 했을때 $('.relative.w-full.h-full.overflow-hidden.flex.flex-col.gap-y-14') 몇번째 index에 위치해 있는가?
2. index를 가져와서 $(this).find("video").eq(idx).get(0).play(); 실행해도 실행이 안되네요
eq(idx). 이부분을 빼야 실행되서 모든 동영상이 실행이 됩니다.
감사합니다.
$(document).on('scroll','',function(e){
idx = $('.relative.w-full.h-full.overflow-hidden.flex.flex-col.gap-y-14').index();
$(this).find("video").eq(idx).prop('muted', true); // 음소거
$(this).find("video").eq(idx).get(0).pause(); // 일시 정지
$(this).find("video").eq(idx).get(0).currentTime = 0;
$(this).find("video").eq(idx).get(0).play();
});
답변 2
$(document).on('scroll', function () {
var scrollTop = $(this).scrollTop();
var windowHeight = $(window).height();
$('.relative.w-full.h-full.overflow-hidden.flex.flex-col.gap-y-14 video').each(function (idx, video) {
var videoTop = $(video).offset().top;
var videoHeight = $(video).outerHeight();
if (scrollTop + windowHeight / 2 > videoTop && scrollTop + windowHeight / 2 < videoTop + videoHeight) {
video.muted = true;
video.currentTime = 0;
video.play();
} else {
video.pause();
}
});
});
안녕하세요.
스크립트 실행 너무 잘되네요. 감사합니다.
스크롤 아래로 내렸을때 하나씩 실행이 잘되는데
반대로 스크롤을 위로 올렸을때는 실행이 안되네요.
실행할수 있는 방법이 있을까요?
감사합니다.
$(document).on('scroll', function () {
var scrollTop = $(window).scrollTop(); // 현재 스크롤 위치
var windowHeight = $(window).height(); // 창 높이
$('.relative.w-full.h-full.overflow-hidden.flex.flex-col.gap-y-14').each(function (idx, container) {
var video = $(container).find('video').get(0); // container 내부의 첫 번째 video
var containerTop = $(container).offset().top; // 컨테이너의 상단 위치
var containerHeight = $(container).outerHeight(); // 컨테이너 높이
// 컨테이너가 화면 중앙과 겹치는지 확인
if (containerTop < scrollTop + windowHeight / 2 && containerTop + containerHeight > scrollTop + windowHeight / 2) {
if (video.paused) { // 비디오가 정지 상태일 때만 실행
video.muted = true; // 음소거
video.currentTime = 0; // 처음부터 재생
video.play();
}
} else {
if (!video.paused) { // 비디오가 재생 중이면 정지
video.pause();
}
}
});
});
스크롤을 내리거나 올릴 때 모두 정상적으로 화면 중앙에 있는 비디오가 실행됩니다.
이미 재생 중인 비디오는 중복으로 실행되지 않습니다.
화면 중앙에서 벗어난 비디오는 자동으로 정지됩니다.
★ HTML 구조와 님의 동작 의도를 고려했습니다.
안녕하세요
아래로 끝까지 스크롤을 한후(동영상 실행 잘됨)
아래에서 위로 스크롤을 올렸을때 동영상이 다시 실행되지 않습니다.
실행할수 있는 방법이 있을까요?
감사합니다.
$(document).on('scroll', function () {
var scrollTop = $(window).scrollTop(); // 현재 스크롤 위치
var windowHeight = $(window).height(); // 창 높이
$('.relative.w-full.h-full.overflow-hidden.flex.flex-col.gap-y-14').each(function (idx, container) {
var video = $(container).find('video').get(0); // container 내부의 첫 번째 video
var containerTop = $(container).offset().top; // 컨테이너의 상단 위치
var containerHeight = $(container).outerHeight(); // 컨테이너 높이
// 컨테이너가 화면 중앙과 겹치는지 확인
if (containerTop < scrollTop + windowHeight / 2 && containerTop + containerHeight > scrollTop + windowHeight / 2) {
if (video && video.readyState >= 2) { // 비디오가 로드된 경우만 실행
if (video.paused || video.currentTime === 0) { // 정지 상태거나 재생 시작 전인 경우
video.muted = true; // 음소거
video.play(); // 재생
}
}
} else {
if (video && !video.paused) { // 재생 중인 경우에만 정지
video.pause();
}
}
});
});
아래로 스크롤 시 비디오가 정상적으로 재생
위로 스크롤할 때 화면 중앙에 다시 진입한 비디오가 재생
중복 재생이나 pause된 비디오가 재생되지 않는 문제가 해결되실 듯합니다.
안녕하세요.
제 소스에서 문제가 있었네요
적어주신 소스대로 적용하니 위 아래 스크롤시 잘 작동하네요
감사합니다.
~/_
js 코드를 아래로 변경 해보세요
$(document).ready(function() {
// 모든 비디오를 일시 정지 상태로 초기화
$('.relative.w-full.h-full.overflow-hidden.flex.flex-col.gap-y-14 video').each(function() {
this.pause();
this.currentTime = 0;
});
$(window).on('scroll', function() {
const container = $('.relative.w-full.h-full.overflow-hidden.flex.flex-col.gap-y-14');
const videos = container.find('video');
videos.each(function(index) {
const video = $(this)[0];
const rect = video.getBoundingClientRect();
const windowHeight = $(window).height();
// 비디오가 화면의 중앙 부근에 있는지 확인
const isInView = (
rect.top <= windowHeight/2 &&
rect.bottom >= windowHeight/2
);
if (isInView) {
video.muted = true;
video.play();
} else {
video.pause();
video.currentTime = 0;
}
});
});
});
답변 감사합니다.
