IOS video - playsinline

새로운 프로젝트 진행중에, 아이폰(ios)에서 video를 전체 화면 아닌 영상을 자동 재생하는 프로젝트가 있었는데 자동으로 전체화면 모드로 들어가는 현상이 발생했다.
구글 서치를 좀 해보니 IOS11버전 이후는 playsinline을 추가 해줘야 한다.

playsinline 속성은 HTML 명세에 최근에 추가되었으며, WebKit은 기존의 webkit-playsinline 속성의 prefix를 제거하여 이 새로운 속성을 채택했습니다.

음소거 자동 재생

모바일 브라우저에서 비디오를 인라인으로 재생하기 위해서는 다음 주요 속성을 추가해야 한다.
Android용 Chrome의 경우 처음 두 개만 필요하지만 Safari를 사용하는 경우 세개 모두 필요!

• autoplay
• muted
• playsinline

• 아이폰에서 <video playsinline> 요소는 이제 인라인으로 재생할 수 있으며, 재생이 시작될 때 자동으로 전체화면 모드로 들어가지 않는다.
• <video> 요소에 playsinline 속성이 없이 iPhone에서 재생하려면 전체 화면 모드가 계속 필요하다.
• 핀치 제스처로 전체 화면을 종료하면, <video> 요소는 playsinline 없이 인라인으로 계속 재생된다.

<video autoplay muted loop playsinline>
	<source src="./test.mp4" type="video/mp4" />
</video>