Document Picture-in-Picture API 이전에는 HTML <video>
요소를 PIP 모드 창에 배치하는 것만 가능했습니다. 이 새로운 API를 사용하면 임의의 HTML 콘텐츠로 채워질 수 있는 상시 사용 설정 창을 열 수 있습니다. 데스크톱의 Chrome 111부터 오리진 트라이얼로 제공됩니다.
![Sintel 트레일러 동영상이 재생되는 PIP 모드 창입니다.](https://developer.chrome.google.cn/static/blog/the-future-of-picture-in-picture/image/a-picture-picture-window-457c5c468d28f.png?authuser=3&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의 히어로 이미지