IOS video태그의 playsinline 속성에 대해서

IOS video태그의 playsinline 속성에 대해서

playsinline 속성은 HTML5에서 비디오 요소에 사용되는 속성으로, 모바일 환경에서 동영상이 전체 화면으로 재생되지 않고 인라인(inline)으로, 즉 현재 페이지 안에서 재생되도록 하는 역할을 합니다. 이 속성은 주로 iOS 기기에서 사용됩니다.

 

playsinline 기본적인 동작

iOS의 Safari 브라우저에서는 기본적으로 비디오가 재생될 때 전체 화면 모드로 전환됩니다. 하지만 playsinline 속성을 사용하면 비디오가 전체 화면으로 전환되지 않고, 페이지 내에서 재생됩니다. 이를 통해 사용자는 비디오를 보면서 동시에 페이지의 다른 콘텐츠와 상호작용할 수 있습니다.

 

<video playsinline>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

 

위 코드에서 playsinline 속성을 설정함으로써 비디오는 모바일 Safari에서 전체 화면으로 전환되지 않고 페이지 내에서 재생됩니다.

 

playsinline 사용 시 주의 사항

• iOS Safari: playsinline 속성은 iOS 10 이후 버전에서 지원됩니다. 이전 버전에서는 자동으로 전체 화면으로 전환됩니다.
• Android: 대부분의 Android 브라우저에서는 기본적으로 인라인 재생이 가능하므로 playsinline 속성이 필요하지 않지만, 호환성을 위해 추가할 수 있습니다.
• 자동 재생: playsinline 속성과 함께 muted, autoplay 속성을 사용하면 모바일 환경에서도 자동 재생이 가능합니다. 모바일에서는 소리가 있는 동영상의 자동 재생이 제한되므로, 자동 재생을 원할 경우 muted 속성을 추가해야 합니다.

 

playsinline 결론

playsinline 속성은 모바일 기기에서 비디오가 전체 화면으로 전환되지 않도록 하여 더 나은 사용자 경험을 제공합니다. iOS Safari 환경에서 특히 유용하며, 페이지 내에서 동영상을 재생하고 싶을 때 사용됩니다.