Picture-in-Picture API 활용해 Youtube같은 멋진 pip모드 제공하기

Picture-in-Picture 란?

---

pip모드

  주로 동영상 재생 서비스를 제공하는 플랫폼 웹사이트를 들어가면 다음과 같은pip모드를 제공하는 것을 본 적있을것이다
pip모드란 "웹사이트가 윈도우 응용프로그램 처럼 브라우저에서 독립적으로 GUI화면 위에 표현된 화면을 제공하는 기능" 을 말하는데 그렇게 함으로써 사용자는 미디어를 소비하면서 웹사이트의 다른 사이트나 아니면 다른 응용프로그램과 상호작용하여 활동할 수 있게 되는 편리한 기능이다.

 

WebAPI중 하나인 Picture-in-Picture API 

---

 

https://developer.mozilla.org/en-US/docs/Web/API

  다음 사진은 Mozilla Developer 사이트에서 볼 수 있는 Javascript에 구현되어 있는 WebApi들에 대한 사진이다. Pip모드 역시 WebApi중 하나이고 따라서 고맙게도 개발자가 실제로 PIP모드를 구현하기 위한 부분은 상당히 적어진다. 그렇다면 WebApi란 뭐길래?

  Javascript 에서는 웹 어플리케이션 혹은 웹 사이트를 만들때 비즈니스 적인 로직을 제외한 혹은 모든 웹사이트들이 주로 사용하는 기능들을 미리 API로 작성해 놓은 기능들이 있다. 그걸 보통 WebApi라고 말 하는데 Pip모드 역시 그런 WebApi중 하나이다. 따라서 개발자가 실제 구현해야 하는 로직은 작성되어있는 WebApi의 스펙을 확인하고 이해하여 따라서 작성하는 흐름으로 개발이 진행될 것이다.

 

Code Example

---