PIP 모드의 미래

François Beaufort

Document Picture-in-Picture API 이전에는 HTML <video> 요소만 PIP 모드 창에 배치할 수 있었습니다. 이 새로운 API를 사용하면 임의의 HTML 콘텐츠로 채울 수 있는 상시 사용 설정 창을 열 수 있습니다. 데스크톱의 Chrome 111부터 오리진 트라이얼으로 제공됩니다.

<ph type="x-smartling-placeholder">

</ph>

Document Picture-in-Picture API (데모)로 생성된 PIP 창

새 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