Mobile 플로팅 (PiP) 설정

Last updated 9 months ago

Mobile 플로팅 (PiP) 설정

앱 내 플로팅 화면 PiP (picture-in-Picture) 모드를 구현하기 위한 기본적인 예시 입니다.

1️⃣ 예시

2️⃣ 예시

주의 사항 이 가이드에서 제공하는 코드는 기본적인 예시일 뿐이며, 실제 애플리케이션에 적용하기 전에 프로젝트 요구사항에 맞게 수정이 필요합니다.

🚩 공통 사항 : header 태그와 Style 태그 설정

WebView 스크립트를 활용하여 라이브 방송 또는 VOD를 보여줄 때 플로팅 뷰에서 전체화면의 전환 시 UI 오류를 방지하기 위해 Head 태그와 Style 태그의 설정을 아래와 같이 작성해 주세요.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>

<body>
  <style>
    #embed {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      margin: 0 auto;
      width: 100vw;
    }
  </style>
</body>

Last updated 9 months ago