video태그의 playsInline 속성 - 모바일 기기 전체화면 재생을 방지하기 위한 속성

playsinline

A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen.
(boolean 타입의 속성으로, 영상이 해당 요소가 재생되는 영역 내에서 'inline'으로 재생되게 한다. 이 요소가 없다고 언제나 꼭 항상 전체화면으로 재생된다는 의미는 아니다!)   / MDN(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)

 

 

모바일에서 웹사이트를 보다 보면 가끔 비디오가 갑자기 전체화면으로 재생되는 경우가 있다. 이는 특히 아이폰이나 아이패드 같은 iOS 장치에서 흔한 상황인데, 이러한 상황을 피하기 위해서 playsInline 속성을 사용할 수 있다. 

 

video 태그의 playsInline 를 은 말 그대로 영상을 전체 화면이 아닌 인라인으로 재생한다는 의미이다. 따라서 이 속성을 사용하면 비디오가 웹페이지 내에 그대로 재생되고 전체 화면으로 넘어가지 않는다. 사용은 간단하게 playsInline 속성을 video 태그 내에 넣어주기만 하면 된다! 

 

<video controls playsInline>
  <source src="video.mp4" type="video/mp4">
</video>

 

 

 

회사에서 개발하면서 기존에 존재하던 video 태그 부분에 playsInline 이라는 속성을 보고, 궁금해져서 찾아보았다! 이렇게 작은 궁금증을 그냥 넘기지 않는 습관을 잘 길러보자 !  

 

💡 참고로 MDN에서 video 태그에 관한 문서에서 한국어 페이지는 playsinline  속성에 대한 설명이 빠져있다. 영문 페이지에는 아래와 같이 잘 설명이 나와 있음!