slick+YTP play/pause 버튼구현 - 웹코딩4(식품)

1. 현재 슬라이드의 비디오만 재생됩니다.

2. 슬라이드가 넘어가면 자동으로 비디오가 재생됩니다.

3. 비디오는 슬라이드가 넘어가도 처음으로 돌아가지 않고 넘어간 시간에 정지되어 있습니다.

4. 슬라이드가 넘어가면 무조건 Pause 버튼으로 바뀝니다.

5. 슬라이드마다 Pause Play가 작동합니다.

 

[220706 식품코딩Mc] [ 220706 식품코딩Mc html / css / js ]

 

현재 슬라이드는 재생시키고 슬라이드가 넘어갈 때마다 나머지 슬라이드는 정지합니다.

비디오가 50개라면(슬라이드에 50개의 비디오를 넣을 일은 사실 없습니다.) 50줄이 될 테니 매우 비효율적인 코드네요.

문제는 인식하고 있지만 손 쓸 방도가 없었습니다.

이 코드를 짠 것은 3일 전입니다.

당시에는 jquery로 DOM을 읽어들이는 방식이 전혀 이해가 안갔어서... $ 선택자로 구현했기 때문입니다.

Pause/Play 버튼을 구현한 코드입니다.

버튼에 "on"을 toggle해주고, "on"이 있다면 멈추고, 없다면 재생되도록 했습니다. 

parent와 children으로 억지로 찾은 기분이 듭니다.

이틀이나 걸렸지만 그래도 어떻게든 구현에 성공해서 보람이 느껴집니다.

 

능숙해질 수 있도록 매일매일 새로운 기능 구현에 도전하고 복습해야겠습니다.