더 많은 사이트에서 동영상 PIP 모드를 자동으로 시작

Benjamin Keen
Benjamin Keen
François Beaufort
François Beaufort
GitHub

게시일: 2026년 3월 18일

Chrome 142부터 오디오 또는 동영상을 재생하는 웹 앱은 미디어 세션 작업 핸들러를 등록하면 자동으로 PIP 모드로 전환할 수 있습니다. 이는 음악 및 동영상 플레이어에 유용한 기능이지만 개발자가 지원을 명시적으로 구현해야 합니다.

원활한 미디어 멀티태스킹 환경을 제공하고 PIP 모드의 검색 가능성을 개선하기 위해 Chrome에서는 브라우저에서 시작하는 자동 PIP를 도입합니다. 이 기능을 사용하면 미디어 세션 작업 핸들러를 등록하지 않은 사이트의 동영상 PIP 창이 Chrome에서 자동으로 열립니다. 이렇게 하면 탭을 전환할 때 미디어 콘텐츠가 계속 표시됩니다.

안내

  • 데스크톱에서 Chrome 142 이상을 사용합니다.
  • chrome://flags/#browser-initiated-automatic-picture-in-picture에서 '브라우저 시작 자동 PIP 모드'를 사용 설정하고 Chrome을 다시 시작합니다.
  • 동영상 웹사이트로 이동하여 동영상을 재생합니다 (예).
  • 다른 Chrome 탭으로 전환하여 동영상 PIP 창을 트리거합니다.

작동 방식

미디어를 재생하고 다른 탭으로 전환하면 Chrome에서 미디어를 항상 맨 위에 표시되는 동영상 PIP 창으로 자동으로 이동할 수 있습니다. Document Picture-in-Picture API를 사용하여 동영상 또는 임의의 HTML 콘텐츠를 지원하는 기존의 '미디어 재생 자동 PIP 모드' 기능과 달리 브라우저에서 시작된 요청은 항상 표준 동영상 PIP 모드 창을 엽니다.

고품질의 방해되지 않는 사용자 환경을 보장하기 위해 Chrome은 엄격한 조건 집합이 충족되는 경우에만 이 동작을 트리거합니다.

  • 세이프 브라우징 서비스에 따르면 최상위 프레임 URL이 안전합니다.
  • 미디어가 상단 프레임에 있습니다.
  • 미디어가 지난 2초 이내에 들렸습니다.
  • 미디어에 오디오 포커스가 있고 재생 중입니다.
  • '일반' 플레이어가 하나 있습니다. 즉, 재생되었고 MediaStream를 사용하지 않는 음소거 해제된 미디어 요소입니다.
  • 미디어 요소에 동영상 트랙이 있어야 합니다.
  • 사이트에서 카메라 또는 마이크를 활발하게 사용하고 있지 않습니다.
  • 사용자의 미디어 참여도 지수 기준이 초과되어 사이트 사용 빈도가 높음을 나타냅니다. 이 조건은 사용자가 기능을 명시적으로 허용하거나 거부하지 않은 경우에 적용됩니다.
  • 현재 PIP 창이 열려 있지 않습니다. 다른 PIP 창이 이미 열려 있는 경우 Chrome에서 자동 전환을 트리거하지 않습니다.
브라우저에서 시작된 자동 PIP (enterpictureinpicture 작업 핸들러가 없는 사이트)와 미디어 재생용 자동 PIP (사이트에서 핸들러를 등록한 경우) 비교

사용자 관리 및 개인 정보 보호

브라우저에서 시작된 자동 PiP는 사이트에서 시작된 요청과 동일한 사용자 권한 및 설정을 따릅니다. 사이트가 처음으로 자동으로 PiP를 입력하면 Chrome은 사용자에게 향후 사이트에서 이 동작을 허용할지 묻는 권한 대화상자를 표시합니다.

사용자는 '사이트 설정'을 통해 언제든지 이러한 권한을 관리할 수도 있습니다.

개발자 제어 및 선택 해제

이 기능은 대부분의 동영상 사이트에서 바로 작동하도록 설계되었지만 이 동작을 선택 해제할 수 있습니다.

자체 핸들러 구현

웹 앱이 이미 enterpictureinpicture 작업의 미디어 세션 작업 핸들러를 등록한 경우 구현이 우선하며 Chrome은 자체 자동 전환을 시작하지 않습니다.

Chrome에서 전환이 적절하다고 판단할 때 동작을 맞춤설정하려면 enterpictureinpicture 작업 핸들러에 MediaSessionActionDetails의 reason이 포함됩니다. reason이 contentoccluded인지 (탭이 숨겨져 브라우저가 요청을 시작했음을 의미) 확인하고 어떻게 진행할지 결정할 수 있습니다.

navigator.mediaSession.setActionHandler("enterpictureinpicture", (details) => {
  if (details.reason === "contentoccluded") {
    // The browser suggests entering Picture-in-Picture.
    // You can choose to open a standard video PiP or a Document PiP window, or do
    // nothing (effectively blocking browser-initiated Auto Picture-in-Picture).
  }
});

미디어 세션 권장사항

브라우저에서 시작된 자동 PiP를 사용하면 미디어 세션 구성을 통해 Chrome이 콘텐츠를 이해하고 상호작용할 수 있습니다. 잘 구성된 MediaSession는 PiP 창이 사용자에게 정확한 제어와 정보를 제공하여 고품질 환경을 제공하도록 합니다.

진행률 표시줄을 동기화된 상태로 유지

setPositionState API를 사용하고 미디어 세션 위치가 올바르게 업데이트되지 않으면 미디어 재생 중에 PiP 창에 부정확한 진행률 표시줄이 표시됩니다. 이를 방지하려면 미디어 소스가 변경되거나 재설정되는 등 적절한 경우 navigator.mediaSession.setPositionState()를 사용하여 항상 position state를 업데이트하거나 설정 해제하여 PiP 창에 재생 중인 미디어의 올바른 위치가 반영되도록 하세요.

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

function updatePositionState() {
  if ('setPositionState' in navigator.mediaSession) {
    navigator.mediaSession.setPositionState({
      duration: video.duration,
      playbackRate: video.playbackRate,
      position: video.currentTime,
    });
  }
}

// Update when metadata is loaded or when seeking happens.
video.addEventListener("loadedmetadata", updatePositionState);
video.addEventListener("seeked", updatePositionState);

전환을 단계적으로 적절하게 처리

사이트에서 '다음 에피소드'를 자동으로 재생하는 경우 전환하는 동안 MediaSession 작업 핸들러와 메타데이터가 활성 상태로 유지되고 정확한지 확인하세요. '다음' 요소로 전환하는 동안 작업 핸들러가 삭제되거나 설정 해제되면 PiP 창에서 핸들러가 제공한 기능을 잃을 수 있습니다.

전체 제어 사용 설정

기본 재생 및 일시중지 외에도 seekto, previoustrack, nexttrack 핸들러를 구현하는 것이 좋습니다. 이를 통해 사용자는 원래 탭으로 돌아가지 않고도 PIP 창에서 직접 콘텐츠를 탐색할 수 있습니다.

navigator.mediaSession.setActionHandler("seekto", (details) => {
  if (details.fastSeek && "fastSeek" in video) {
    video.fastSeek(details.seekTime);
    return;
  }
  video.currentTime = details.seekTime;
});

참여 및 의견 공유

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

리소스