스와이프 슬라이드 안에 동영상을 넣었는데, 동영상이 끝나면 슬라이드가 넘어가게 할 수 있나요???

Question

첫번쨰 슬라이드 안에있는 비디오가 재생되고 비디오가 끝나면,다음 두번째 슬라이드로 넘어가서 두번째슬라이드 안에있는 영상이 재생되게끔 (무한반복) 하고싶습니다.swiper.js 를 쓰고있습니다.. 방법이 없을까요?비디오를 제어하는방법을 html 말고는 모르겠네요 ㅠㅠjs초보라서 작성법도 모르겠고 ㅠㅠ 도와주세요! 12345678910111213

자바는 이렇습니다

Bjork · Accepted Answer

제가 스와이프js는 안해봐서 잘모르겟지만사실 본문내용은그냥 영상2개를 계속 무한재생하고싶다하면 video태그 하나만쓰고var video &#61; document~if(video.currentTime &#61;&#61; video.duraton){if(video.src &#61;&#61; &#34;/video/동영상1&#34;){ video.src &#61; &#34;/video/동영상2&#34;; video.play(); }else{video.src &#61; &#34;/video/동영상1&#34;;video.play(); }}이런식으로 토글처럼 하면 될거같긴한데 이걸바라시는건 아닌거같고..

Bjork · Answer

swiper.js는 모르고 video tag는 대충아는데아마 video태그자체에 js에서 현재재생시간 > currenttime 총재생시간 > duration 함수가 잇을텐데video.currentTime &#61; video.duration일때 다음영상으로 넘어가라 이런식으로 짜면 되지 않을까 싶은데요..??초보지만 도움이 될까싶어서..

퍼블리셔가될몸이시다 · Answer

네 저도 그런식으로 구조는 그려지는데, js를 어떻게 작성해야하는지 모르겠어서요ㅠ

퍼블리셔가될몸이시다 · Answer

그래도 어느정도 작성법은 터득한거 같습니다!! 정성스러운 답변 감사드립니다 많은도움이 되었어요!

킁킁탐정 · Answer

1. swiper.js 옵션중 autoplay, loop 등은 꺼야합니다. swiper.js 자체적으로 동영상이 재생이 종료될시 무엇을 한다등의 이벤트가 없으므로 수동으로 전환해야합니다.2. swiper.js의 init 이벤트를 구현해서 첫번째 slide의 DOM 요소중 video를 얻어서 onended 이벤트를 연결해주고 완료시 swiper를 다음 슬라이드로 이동(slideNext)하게 합니다. 또한 video가 play되도록 여기서 호출합니다.3. swiper.js의 slideChange 이벤트에도 2번과 동일하게 해줍니다. (또는 함수로 뺴서 동일하게 이벤트 핸들러 설정)init, slideChange -> 비디오 play 비디오 ended -> slideNext 호출로 다음으로 넘김 다시 slideChange로 이동됨

퍼블리셔가될몸이시다 · Answer

ㅠㅠㅠ너무어렵네요...설명감사드립니다!...

킁킁탐정 · Answer

대략 만들면 다음과 같습니다. 대충 데모 고친거라 예외 상황을 고려해서 제대로 동작되게 하려면 변경해야하는 사항이 많습니다. 참고용도로 사용하세요. https://codesandbox.io/s/angry-frost-8gjj9?file&#61;/index.html

퍼블리셔가될몸이시다 · Answer

감사합니다!! 선생님 혹시 이거 비디오 오토플레이가 왜 안되는지 알려주실 수 있으신가요?? 이것만 해결하면 되는데 ㅠㅠㅠ

스와이프 슬라이드 안에 동영상을 넣었는데, 동영상이 끝나면 슬라이드가 넘어가게 할 수 있나요???

8개의 답변

Q&A 목록