Document Picture-in-Picture API 이전에는 HTML <video>
요소만 PIP 모드 창에 배치할 수 있었습니다. 이 새로운 API를 사용하면 임의의 HTML 콘텐츠로 채울 수 있는 상시 사용 설정 창을 열 수 있습니다. 데스크톱의 Chrome 111부터 오리진 트라이얼으로 제공됩니다.
![Sintel 트레일러 동영상이 재생되는 PIP 모드 창입니다.](https://developer.chrome.com/static/blog/the-future-of-picture-in-picture/image/a-picture-picture-window-457c5c468d28f.png?authuser=19&hl=ko)
새 API는 기존 <video>
용 PIP 모드 API보다 훨씬 더 많은 기능을 제공합니다. 예를 들어 맞춤 컨트롤과 입력 (예: 자막, 재생목록, 시간 스크러버, 동영상에 좋아요 및 싫어요 표시)을 제공하여 사용자의 PIP 모드 동영상 플레이어 환경을 개선할 수 있습니다.
전체 PIP 문서를 사용하면 화상 회의 웹 앱에서 캔버스 해킹에 의존하지 않고도 여러 개의 동영상 스트림을 하나의 PIP 모드 창으로 결합할 수 있습니다. 또한 메시지 보내기, 다른 사용자 숨기기, 손들기와 같은 맞춤 컨트롤을 제공할 수도 있습니다.
다음 코드 스니펫은 맞춤 동영상 플레이어에서 PIP 모드를 전환하는 방법을 보여줍니다.
async function togglePictureInPicture() {
// Close Picture-in-Picture window if any.
if (documentPictureInPicture.window) {
documentPictureInPicture.window.close();
return;
}
// Open a Picture-in-Picture window.
const pipWindow = await documentPictureInPicture.requestWindow({
initialAspectRatio: 640 / 360,
copyStyleSheets: true,
});
// Move video to the Picture-in-Picture window.
const video = document.querySelector("#video");
pipWindow.document.body.append(video);
// Listen for the PiP closing event to move the video back.
pipWindow.addEventListener("unload", (event) => {
const videoContainer = document.querySelector("#videoContainer");
const pipVideo = event.target.querySelector("#video");
videoContainer.append(pipVideo);
});
}
자세한 내용은 <video>뿐만 아니라 모든 요소에 대한 PIP 모드를 확인하세요.
이 단계에서는 개발자 의견이 매우 중요하므로 GitHub에서 문제를 신고하여 제안이나 질문을 포함해 주시기 바랍니다.
히어로 이미지: Jakob Owens