video 태그 자동재생시 컨트롤 숨기기/보이기

본문 바로가기
사이트 내 전체검색

로그인
회원가입
IT Note

video 태그 자동재생시 컨트롤 숨기기/보이기
0

View 1,067  | 작성일2024.04.13 14:01

첨부파일

본문

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


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

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


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

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


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

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

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


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

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

컨트롤은 빼줍니다.


 <video id='video' muted autoplay playsinline loop src='동영상주소'></video>


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


 $('#video').click(function showcontrol() {

    if(!this.hasAttribute("controls")) {

         this.setAttribute("controls", "controls");

    }

});


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

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


이 쉬운걸 헤맸네요 ;ㅁ;

댓글목록

등록된 댓글이 없습니다.

IT Tip&Tech 목록

게시물 검색

접속자집계

오늘
1,192
어제
1,819
최대
6,399
전체
884,070
Copyright © LittleCandle All rights reserved.
문의메일 : littlecandle99@gmail.com
모바일 버전으로 보기