Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

iPhone vs iPad: HTML5 인라인 비디오 재생 방식의 차이와 playsinline 속성 활용법

UIWebView의 allowsInlineMediaPlayback 속성이란?

네이티브 앱 내부의 iOS 웹 브라우저(UIWebView)에는 allowsInlineMediaPlayback이라는 속성이 있습니다. 이 속성은 웹 페이지 안에서 동영상을 인라인(화면 일부 영역에 삽입된 형태)으로 재생할 수 있도록 허용하거나 차단하는 역할을 합니다.

iPhone과 iPad의 기본 설정 차이

흥미로운 점은 이 속성의 기본값이 기기마다 다르다는 것입니다.

  • iPhone: 기본값이 NO로 설정되어 있어, 동영상을 재생하면 네이티브 전체 화면 플레이어가 자동으로 실행됩니다.
  • iPad: 기본값이 YES로 설정되어 있어, 동영상이 페이지 내에서 인라인으로 재생됩니다.

따라서 iPhone에서는 동영상을 재생하는 순간 네이티브 비디오 플레이어가 화면 전체를 차지하게 되며, 그 결과 동영상과 함께 다른 동적 콘텐츠를 동시에 표시하거나 조작할 수 없게 됩니다.

HTML에서 인라인 재생 허용하기

이러한 동작을 제어하고 싶다면 HTML 마크업에서 webkit-playsinline 속성을 추가하면 됩니다.

<video id="myVideo" width="280" height="140" webkit-playsinline></video>

위처럼 작성하면 iPhone에서도 동영상이 전체 화면으로 전환되지 않고, 지정한 크기의 영역 안에서 인라인으로 재생됩니다.

iOS 10 이상에서의 변화: playsinline 속성

iOS 10부터 Apple은 모든 iOS 웹 브라우저에서 표준 playsinline 속성을 공식적으로 지원하기 시작했습니다. 덕분에 개발자는 더 간단하게 인라인 재생을 구현할 수 있습니다.

<video src="new.mp4" playsinline></video>

정리하면, iOS 9 이하 버전까지는 WebKit 전용 속성인 webkit-playsinline을 사용해야 했지만, iOS 10 이상에서는 표준 속성인 playsinline만으로 충분합니다. 두 속성을 함께 사용하면 하위 버전 호환성도 확보할 수 있습니다.