swiper 슬라이드 넘길때 유튜브 영상 자동재생되게 하는법 채택완료
1. 메인 스와이퍼 코드
Copy
제목
제목
var swiperTopNum2 = jQuery('.swiperleft02').find('.swiper-slide');
var swiperSubNum2 = jQuery('.swiperBottom02').find('.swiperBottom02');
var subSlide2 = new Swiper(".swiperBottom02", {
slidesPerView: 2,
slidesPerGroup: 4,
spaceBetween: 10,
grid: {
fill: 'row',
rows: 2
},
loop: false,
slideToClickedSlide: true,
watchSlidesProgress: true,
pagination: {
el: ".swiper-pagination",
clickable: true
},
});
var mainSlide2 = new Swiper(".swiperleft02", {
effect:'fade',
slidesPerView: 1,
allowTouchMove:false,
loop:true,
thumbs: {
swiper: subSlide2
},
on: {
transitionStart: function(){
var videos2 = document.querySelectorAll('video');
Array.prototype.forEach.call(videos2, function(video2){
video2.pause();
});
},
transitionEnd: function(){
var activeIndex2 = this.activeIndex;
var activeSlide2 = jQuery('.swiperleft02').find('.swiper-slide:eq('+activeIndex2+')');
var activeSlideVideo2 = activeSlide2.find('video')[0];
activeSlideVideo2.currentTime = 0;
activeSlideVideo2.play();
},
}
});
2. 서브 스와이퍼 코드
Copy
제목
제목
안녕하세요, 메인스와이퍼와 서브 스와이퍼를 연동하고, 서브 스와이퍼의 이미지를 누르면 메인 스와이퍼가 이동하고 영상이 재생되는 그런 코드를 짜봤습니다.
유지보수 중에 video 파일이 아니고 유튜브 링크를 올려달라고 하셔서 난항을 겪고있습니다. autoplay=1, mute=1 을 써도 영상 자동재생이 안됩니다...ㅠㅠ 슬라이드를 넘겼을 때 유튜브 영상 넣은 슬라이드에 멈추면 영상 재생되게끔 하는 방버이 있을까요?
답변 1개
채택된 답변
+20 포인트
1년 전
다음을 참고 하셔서 원하시는 형식으로 구현하시면 가능하지 않을까 생각합니다.
Copy
// 메인 스와이퍼의 각 슬라이드에 해당하는 유투브 ID를 저장하는 배열 생성
var videoIds = ["YouTube 비디오 ID1", "YouTube 비디오 ID2", ...];
Copy
// 각 슬라이드가 활성화될 때 해당 비디오를 재생하도록 구현
var players = [];
function onYouTubeIframeAPIReady() {
for (var i = 0; i videoIds.length; i++) {
players[i] = new YT.Player('player' + i, {
height: '360',
width: '640',
videoId: videoIds[i],
events: {
'onReady': onPlayerReady,
}
});
}
}
function onPlayerReady(event) {
// 비디오가 준비되면 아무것도 하지 않음
}
Copy
// 메인 스와이퍼의 transitionEnd 이벤트에 이벤트 핸들러를 추가하여 활성화된 슬라이드의 인덱스를 확인하고 해당 비디오를 재생
transitionEnd: function() {
var activeIndex2 = this.activeIndex;
players.forEach(function(player, index) {
if (index === activeIndex2) {
player.playVideo();
} else {
player.pauseVideo();
}
});
}
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인