PIP
-
[React] PIP 직접 구현해보기Dev 2023. 6. 21. 14:44
1. Picture-in-Picture API 시도해보기 프로젝트 진행 중 PIP 기능을 구현해야하는 상황이 생겼다. 그래서 처음에는 WebApi로 제공되는 PIP API를 이용하여 간단하게 구현할 생각이었다. 하지만 PIP API를 사용하기 위해서는 영상 데이터를 보여주는 방식이 video 태그여야했다. 그러나 프로젝트에서는 iframe을 이용한 유튜브 embed 방식을 사용하고 있었기 때문에 PIP API를 사용하여 구현하는 방법은 포기해야했다. 2. PIP 직접 구현해보기 직접 PIP 기능을 구현하기 위해서는 현재 프로젝트에서의 PIP 기능에 충족되어야하는 조건들을 간단히 정리할 필요가 있었다. 대략 정리하고 보니 7개 정도의 조건이 나왔다. 1. 페이지 이탈 시 PIP 활성화 2. PIP 활성화..