[제이쿼리] fullpage.js 플러그인에서 스크롤시 동영상 자동재생이 멈출때

요즘도 fullpage를 자주 쓰는지 모르겠지만..

한때는 포트폴리오 제작할 때는 무조건 fullpage로 제작해야하는 게 관습이라고 할 정도로 빈번하게 사용됐다.

 

요즘 이전에 만들어뒀던 포트폴리오를 정리하고 있는데, 스크롤을 할 때마다 자동재생이 멈추는 이슈를 발견했다.

(엉망진창 대충대충 만들어내느라 몰랐던 나의 과오..)

 

영상은 video 태그를 이용해 mp4파일을 불러오기 했는데, video태그의 오류인가 싶어서

iframe태그로 동영상 URL을 붙여놔도 똑같은 현상이 반복됐다.

 

페이지 로드시 영상은 문제없이 자동재생되었으나, 스크롤만 하면 영상은 뙇 멈춰버린다. controls기능을 키면 다시 재생은 가능하나, 자동재생은 아니고 클릭을 해야만 재생이 가능했다..

 

검색을 해봐도 안나오고, 이 이슈를 해결해보고 싶어서 fullpage 예제들 중 동영상이 들어간 것들을 찾아봤다.

 

그랬더니 autoplay 옵션 앞에 data- 가 붙는것을 확인함.

 

<video data-autoplay loop muted>
    <source src="images/pr.mp4" type="video/mp4">

</video>

 

이렇게 치고 리프레쉬해보니 제대로 잘 작동한다.