PIP 모드의 미래

François Beaufort

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

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의 히어로 이미지