분류 javascript

Picture-in-Picture 웹 API 소개

컨텐츠 정보

  • 조회 374 (작성일 )

본문

Chrome은 사용자가 다른 페이지로 이동하더라도 계속 재생되는 플로팅 동영상 창을 만드는 '사진 속 사진'메커니즘을 지원합니다. 

Firefox와 Safari는 독점 API를 통해 지원됩니다.


https://css-tricks.com/an-introduction-to-the-picture-in-picture-web-api/ 


Picture-in-Picture는 2016 년에 macOS Sierra가 출시되면서 Safari 브라우저에서 웹에 처음으로 등장했습니다. 사용자가 비디오를 다른 모든 것 위에 있는 작은 플로팅 창으로 튀어 나올 수 있었습니다. 그들은 다른 일을 하는 동안 계속 지켜 볼 수 있습니다. 예를 들어 가이드 나 다른 채널을 탐색 할 때도 인기 있는 스포츠 이벤트를 계속 시청할 수 있는 TV에서 나온 아이디어입니다.


얼마 후, 네이티브 API를 통한 picture-in-picture 지원을 포함하는 Android 8.0이 출시되었습니다. Android 용 Chrome은 데스크톱 API로는 불가능했지만 이 API를 통해 PIP 모드에서 동영상을 재생할 수 있었습니다.


이로 인해 웹 사이트에서 이 동작을 시작하고 제어 할 수 있는 표준 Picture-in-Picture Web API가 작성됩니다.


작성 당시에는 Chrome (버전 70 이상) 및 Edge (버전 76 이상) 만이 기능을 지원합니다. Firefox, Safari 및 Opera는 모두 구현에 독점 API를 사용합니다.


Picture-In-Picture API를 사용하는 방법 


웹 페이지에 비디오를 추가하여 시작하겠습니다.


<video controls src="video.mp4"></video> 


Chrome에는 Picture-in-Picture 모드를 시작하고 종료하기 위한 토글이 이미 있습니다.


Showing a video with the picture-in-picture option in the bottom right of the screen. 


Firefox의 구현을 테스트하려면 about : config에서 media.videocontrols.picture-in-picture.enabled 플래그를 활성화 한 다음 비디오를 마우스 오른쪽 단추로 클릭하여 picture-in-picture 옵션을 찾으십시오.


Showing the Firefox settings that enable picture-in-picture. 


이 기능이 작동하는 동안 대부분의 경우 비디오 컨트롤이 여러 브라우저에서 일관되게 유지되고 PIP 모드로 입력 할 수 있는 비디오와 그렇지 않은 비디오를 제어 할 수 있습니다.


브라우저에서 Picture-in-Picture 모드로 들어가는 기본 방법을 Picture-in-Picture Web API를 사용하는 자체 방법으로 바꿀 수 있습니다. 예를 들어 클릭하면 활성화 할 수 있는 버튼을 추가해 보겠습니다.


<button id="pipButton" class="hidden" disabled>Enter Picture-in-Picture mode</button> 


그런 다음 JavaScript에서 비디오와 버튼을 모두 선택하십시오.