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개
glitter0gim
$(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();
}
});
});
답변에 대한 댓글 6개
glitter0gim$(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();
}
}
});
});
[/code]
스크롤을 내리거나 올릴 때 모두 정상적으로 화면 중앙에 있는 비디오가 실행됩니다.
이미 재생 중인 비디오는 중복으로 실행되지 않습니다.
화면 중앙에서 벗어난 비디오는 자동으로 정지됩니다.
★ HTML 구조와 님의 동작 의도를 고려했습니다.
아래로 끝까지 스크롤을 한후(동영상 실행 잘됨)
아래에서 위로 스크롤을 올렸을때 동영상이 다시 실행되지 않습니다.
실행할수 있는 방법이 있을까요?
감사합니다.
glitter0gim$(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();
}
}
});
});
[/code]
아래로 스크롤 시 비디오가 정상적으로 재생
위로 스크롤할 때 화면 중앙에 다시 진입한 비디오가 재생
중복 재생이나 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
);
if (isInView) {
video.muted = true;
video.play();
} else {
video.pause();
video.currentTime = 0;
}
});
});
});
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
스크립트 실행 너무 잘되네요. 감사합니다.
스크롤 아래로 내렸을때 하나씩 실행이 잘되는데
반대로 스크롤을 위로 올렸을때는 실행이 안되네요.
실행할수 있는 방법이 있을까요?
감사합니다.