iOS 비디오 정책 - playsinline

iOS 비디오 정책 - playsinline

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

PC나 안드로이드에서 비디오태그를 볼때는 자동재생처리시 인라인으로 볼수 있지만, IOS인 아이폰이나 아이패드에서 보면 전체화면으로 처리됩니다. 그것을 막는 속성인 [playsinline]속성입니다.

https://d0gf00t.tistory.com/35

<video autoplay> 요소는 다음과 같은 조건을 충족하는 요소에 대해 autoplay 속성을 인정합니다.
<video> 요소는 소스 미디어에 오디오 트랙이 없는 경우에 사용자 제스처 없이 autoplay를 허용합니다.
<video muted> 요소는 사용자 제스처 없이 자동 재생될 수 있습니다.
<video> 요소가 사용자의 제스처 없이 오디오 트랙을 얻거나, 음소거를 해제하면 재생이 일시 정지됩니다.
<video autoplay> 요소는 스크롤해서 뷰포트에 노출되고, CSS를 통해 보이고(visible 하고), DOM에 삽입 되어 있을 때와 같이 스크린에서 볼 수 있을 때만 재생을 시작합니다.
<video autoplay> 요소는 뷰포트 밖으로 스크롤 되는 등, 보이지 않는 경우에는 일시 중지됩니다.
<video> 요소는 다음과 같은 조건을 충족하는 요소에 대해 play() 메소드를 인정합니다.
<video> 요소는 소스 미디어에 오디오 트랙이 없거나 muted 속성이 true로 설정 된 경우 사용자 동작 없이 play()를 허용합니다.
<video> 요소는 사용자의 제스처 없이 오디오 트랙을 얻거나, 음소거를 해제하면 재생이 일시 정지됩니다.
<video> 요소는 화면에 표시되지 않거나, 뷰포트 외부에 있을 때 play() 를 허용하지 않습니다.
video.play() 는 Promise를 반환하며, 이러한 조건 중 하나라도 충족되지 않으면 거부됩니다.
아이폰에서 <video playsinline> 요소는 이제 인라인으로 재생할 수 있으며, 재생이 시작될 때 자동으로 전체화면 모드로 들어가지 않습니다.
<video> 요소에 playsinline 속성이 없이 iPhone에서 재생하려면 전체 화면 모드가 계속 필요합니다.
핀치 제스처로 전체 화면을 종료하면, <video> 요소는 playsinline 없이 인라인으로 계속 재생됩니다.

iOS의 WebKit 프레임워크 클라이언트의 경우, API를 통해 이러한 정책을 계속 제어할 수 있으며, 기존 API를 사용하여 이러한 정책을 제어하는 클라이언트는 변경되지 않습니다.
자동 재생 정책을 보다 세밀하게 제어하려면 새로운 WKWebViewConfiguration 속성mediaTypesRequiringUserActionForPlayback을 참고하세요. iOS 10의 Safari는 WebKit의 기본 정책을 사용합니다.

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

나의 경우, 실무에서

<video autoplay muted loop playsinline width="100%">
	<source src="<%=mobPath%>_resource/mov/main_en.mp4" type="video/mp4" />
</video>

의 형태로 사용했다.