페이지 정보

최근 사이트에 비디오 태그를 자동재생하도록 구성했습니다. 

비디오 태그는 자동재생시 muted 가 되어있어야 하고 iOS의 경우 playsinline 옵션이 있어야 자동재생 되는 경우도 있다고 합니다.

여기에 controls 를 붙이면 대체로 문제는 없는데 iOS 에서 재생시작할때 반투명의 컨트롤들이 가리고 있어서 좀 답답합니다. 

그래서 비디오가 자동 재생할때 처음엔 컨트롤이 안보이게 하고 싶은데 기본 기능으로는 controls를 없애는거 밖에 없어서 조금 애매했습니다.

온라인에서도 정보가 별로 없길해 적어봅니다. 

우선 html 단에서는 controls 를 빼버립니다. 

그럼 애초에 controls 가 없으니 자동재생해도 문제없겠죠?

하지만 사용자가 소리를 켜거나 재생/정지를 해야하기 때문에 사용자가 동영상을 클릭할때 컨트롤이 살아나도록 합니다.

html 단 코드는 다음과 같습니다.

id 를 지정해주고 자동재생이 되도록 합니다.

컨트롤은 빼줍니다.

그리고 밑에 스크립트 단에서 video 를 클릭시 이벤트를 넣어줍니다.

별건 아니고 클릭을 했을 시에 그 비디오 엘레멘트에 controls 속성이 없다면 넣어줍니다.

자~ 이렇게 하면 영상 자동재생시에는 컨트롤이 안보이다가 사용자가 영상을 클릭해야 컨트롤이 보이게 됩니다.

이 쉬운걸 헤맸네요 ;ㅁ;