이 페이지는 Cloud Translation API를 통해 번역되었습니다.

미디어 재생 시 자동으로 PIP 모드로 전환

François Beaufort

게시일: 2025년 2월 5일

Chrome 120부터 화상 회의 웹 앱은 사용자가 현재 탭에서 포커스를 전환할 때 PIP 창을 자동으로 열 수 있습니다. 이 기능은 문서를 프레젠테이션하거나 다른 탭이나 창을 사용하는 동안 참여자를 실시간으로 보고 상호작용하려는 프레젠테이션 진행자에게 유용합니다. 자세한 내용은 화상 회의 웹 앱의 자동 PIP 모드를 참고하세요.

Chrome 134부터 오디오 또는 동영상을 재생하는 웹 앱이 자동으로 PIP 모드로 전환될 수 있습니다. 즉, 이제 웹의 음악 및 동영상 플레이어가 사용자가 탭을 전환할 때 미니 플레이어 창으로 원활하게 전환할 수 있으므로 수동으로 활성화할 필요가 없습니다.

Spotify 사용자가 탭을 전환하면 PIP 창이 자동으로 열리고 닫힙니다.

이러한 미디어 재생 사용 사례를 지원하기 위해 Chrome 134부터 데스크톱 웹 앱은 긍정적인 사용자 환경을 보장하기 위한 몇 가지 제한사항이 적용된 상태로 자동으로 PIP 모드로 전환될 수 있습니다. 웹 앱이 다음 조건을 모두 충족하는 경우에만 미디어 재생을 위한 자동 PIP 모드를 사용할 수 있습니다.

세이프 브라우징 서비스에 따르면 상단 프레임 URL은 안전합니다.
미디어는 상단 프레임에 있습니다.
지난 2초 이내에 미디어를 들을 수 있었습니다.
미디어에 오디오 포커스가 있습니다.
미디어가 재생 중입니다.
"enterpictureinpicture" 작업에 대한 미디어 세션 작업 핸들러가 등록되었습니다.
사용자의 미디어 참여도 지수 기준점이 초과되어 사용자가 이 웹 앱에서 미디어를 자주 소비하고 있음을 나타냅니다. 이는 사용자의 브라우저 설정이 'PIP(화면 속 화면) 진입 요청 가능'인 경우에 적용됩니다. 사용자가 웹 앱이 PIP 모드로 전환되도록 명시적으로 허용하는 경우 이 조건은 적용되지 않습니다.

Chrome 브라우저 사이트 정보 창의 자동 PIP 모드 설정 — Chrome 브라우저 사이트 정보 창의 자동 PIP 설정

버그 386193409는 표시 조건의 구현을 추적하여 디버깅 및 구현을 더 쉽게 만듭니다.

다른 PIP 모드 창이 이미 열려 있으면 Chrome에서 자동 PIP 모드를 트리거하지 않습니다. 기존 PIP 창이 자동으로 열렸고 닫으려는 경우에는 이 규칙이 적용되지 않습니다.

웹 앱이 요구사항을 충족하면 포커스를 다른 탭으로 전환하면 "enterpictureinpicture" 작업의 미디어 세션 작업 핸들러 콜백 함수가 트리거됩니다. 이렇게 하면 웹 앱이 사용자 동작 없이 PIP 창을 열 수 있습니다. 그러면 사용자에게 사이트에서 매번 자동으로 PIP 모드로 전환할지, 이번만 허용할지, 아니면 전혀 허용하지 않을지 묻는 권한 대화상자가 표시될 수 있습니다.

<video>용 PIP API를 사용하여 HTML <video> 요소에서 PIP 창을 열거나 Document Picture-in-Picture API를 사용하여 상시 표시 창을 열고 임의의 HTML 콘텐츠로 채울 수 있습니다. PIP 모드 창은 열릴 때 포커스가 설정되지 않으며 페이지가 다시 표시되면 자동으로 닫힙니다.

다음 예는 사용자가 버튼을 클릭할 때 HTML <video> 요소를 재생하는 방법을 보여줍니다. 그런 다음 PIP 창을 여는 콜백 함수로 "enterpictureinpicture" 작업의 미디어 세션 작업 핸들러를 안전하게 등록합니다. 이 창에는 <video>용 PIP API가 포함된 동영상이 있습니다.

const video = document.querySelector("video");

async function onPlayButtonClick() {
  // Play video.
  await video.play();
}

try {
  // Request video to automatically enter picture-in-picture when eligible.
  navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
    await video.requestPictureInPicture();
  });
} catch (error) {
  console.log("The enterpictureinpicture action is not yet supported.");
}

Document Picture-in-Picture API를 보여주는 VideoJS 플레이어 데모를 사용해 보거나 동영상 미디어 세션 및 오디오 미디어 세션 샘플을 사용해 보세요.

참여 및 의견 공유

의견이 있거나 문제가 발생하면 crbug.com에서 공유해 주세요.

리소스

감사의 말

리뷰를 제공해 주신 벤자민 킨님과 프랭크 리베라토님께 감사드립니다.