비메오 자동재생과 슬라이드(swiper) 연동
본문
<div class="swiper-container ">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide_video_wrap">
<iframe class="main_video" src="https://player.vimeo.com/video/40747?muted=1&autoplay=1&loop=1&autopause=0&title=0&background=1" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
</div>
<div class="swiper-slide">
<div class="slide_video_wrap">
<iframe class="main_video" src="https://player.vimeo.com/video/4074748?muted=1&autoplay=1&loop=1&autopause=0&title=0&background=1" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<script>
var swiper = new Swiper('.video_wrap .swiper-container', {
slidesPerView: 1,
spaceBetween: 0,
centeredSlides: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
/*
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
*/
});
</script>
비메오는 현재 유료 서비스를 결제하지는 않았습니다.
비메오를 활용해서 영상을 재생시키고 있습니다.
여러개의 영상을 재생시켜야해서 슬라이드를 사용해야하는데,
문제는 1번째 슬라이드 영상 시작과 동시에 2번째 영상도 노출이 안되지만 재생이 되고 있더라구요.
슬라이드가 활성화(.active)되면 영상이 재생되게 가능한가요?
답변 1
둘다 autoplay가 되어 있어서 그런것 같습니다.
즉 자바스크립트로 active가 될 때, allow에 autoplay를 넣어주면 될 것 같습니다.
이쪽에 전문이 아니라서 코드는 없지만 위와 같이 한번 해 보시고, 코드 가지고 질문주세요.
답변을 작성하시기 전에 로그인 해주세요.
