Chrome 73의 미디어 업데이트

François Beaufort
François Beaufort
GitHub

이 도움말에서는 Chrome 73의 새로운 미디어 기능에 대해 설명합니다.

하드웨어 미디어 키 지원

요즘 많은 키보드에는 키보드 입력과 같이 기본 미디어 재생 기능을 제어하는 키가 있습니다. 재생/일시중지, 이전 및 다음 트랙으로 설정할 수 있습니다. 헤드셋에도 이러한 기능이 있습니다. 지금까지 데스크톱 사용자가 이 미디어 키를 사용하여 오디오 및 동영상 재생을 제어할 수 없습니다. 할 수 있습니다. 이 내용이 오늘 변경됩니다.

<ph type="x-smartling-placeholder">
</ph> 키보드 미디어 키 <ph type="x-smartling-placeholder">
</ph> 키보드 미디어 키

사용자가 일시중지 키를 누르면 Chrome에서 재생 중인 활성 미디어 요소가 일시중지되고 '일시중지됨'이라는 미디어 이벤트입니다. 재생 키를 누르면 이전에 일시중지한 미디어 요소가 다시 시작되고 '재생' 미디어 이벤트를 처리합니다. Chrome이 포그라운드 또는 백그라운드에 있을 때 작동합니다.

이제 ChromeOS에서 오디오 포커스를 사용하는 Android 앱은 Chrome에 일시중지 후 오디오를 재개하여 Chrome의 웹사이트 간에 원활한 미디어 환경을 조성하고, Chrome 앱 및 Android 앱 현재 ChromeOS에서만 지원됩니다. Android P를 실행하는 기기입니다.

간단히 말해, 항상 이러한 미디어 이벤트를 듣고 변경할 수 있습니다

video.addEventListener('pause', function() {
  // Video is now paused.
  // TODO: Let's update UI accordingly.
});

video.addEventListener('play', function() {
  // Video is now playing.
  // TODO: Let's update UI accordingly.
});

잠시만 기다려 주세요. 이제 데스크톱에서 Media Session API를 사용할 수 있습니다. (이전에는 모바일에서만 지원되었으나) 웹 개발자는 관련 이벤트(예: 미디어 키에 의해 트리거되는 트랙 변경) 이 previoustrack 및 nexttrack 이벤트는 현재 지원됩니다.

navigator.mediaSession.setActionHandler('previoustrack', function() {
  // User hit "Previous Track" key.
});

navigator.mediaSession.setActionHandler('nexttrack', function() {
  // User hit "Next Track" key.
});

재생 및 일시중지 키는 Chrome에서 자동으로 처리됩니다. 하지만 작동하지 않는 경우에도 "재생" 및 '일시중지' 조치를 취할 수 있습니다

navigator.mediaSession.setActionHandler('play', function() {
  // User hit "Play" key.
});

navigator.mediaSession.setActionHandler('pause', function() {
  // User hit "Pause" key.
});

하드웨어 미디어 키 지원은 ChromeOS, macOS, Windows에서 사용할 수 있습니다. 리눅스 나중에 제공될 예정입니다

기존 개발자 문서를 확인하고 공식 미디어를 사용해 보세요. 세션 샘플

Chrome상태 추적기 | Chromium 버그

암호화된 미디어: HDCP 정책 확인

HDCP Policy Check API 덕분에 이제 웹 개발자는 특정 정책(예: HDCP 요구사항(요청 전에 시행 가능) Widevine 라이선스, 미디어 로드하기

const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });

if (status == 'usable')
  console.log('HDCP 2.2 can be enforced.');

이 API는 모든 플랫폼에서 사용할 수 있습니다. 하지만 실제 정책 검토에서는 일부 플랫폼에서는 사용할 수 없습니다. 예를 들어 HDCP 정책 검사 약속은 Android 및 Android WebView에서 NotSupportedError와 함께 거부됩니다.

이전 개발자 문서를 확인하고 샘플을 참고하세요.

발송 예정 | Chrome상태 추적기 | Chromium 버그

설치된 PWA의 Auto PIP 모드 오리진 트라이얼

일부 페이지에서는 자동으로 PIP 모드를 시작하고 동영상 요소 예를 들어 화상 회의용 웹 앱에는 사용자가 전환할 때 자동으로 PIP 모드 동작 웹 앱 및 기타 애플리케이션이나 탭에 적용됩니다. 안타깝게도 사용자 동작 요구사항을 준수해야 합니다. 자동 PIP 모드가 시작됩니다.

이러한 탭 및 앱 전환을 지원하기 위해 새 autopictureinpicture 속성을 사용합니다. <video> 요소에 추가됩니다.

<video autopictureinpicture></video>

작동 방식은 다음과 같습니다.

  • 문서가 숨겨지면 autopictureinpicture의 동영상 요소가 숨겨집니다. 속성이 가장 최근에 설정된 경우 자동으로 PIP 모드로 전환됩니다. 허용됩니다.
  • 문서가 표시되면 PIP 모드의 동영상 요소가 자동으로 종료합니다.

이상입니다 자동 PIP 모드는 사용자가 데스크톱에 설치한 프로그레시브 웹 앱

자세한 내용은 사양을 확인하고 공식 PWA를 사용해 보세요. 샘플을 참고하세요.

실험 의도 | Chrome상태 추적기 | Chromium 버그

PIP 모드에서 광고 건너뛰기 오리진 트라이얼

동영상 광고 모델은 일반적으로 프리롤 광고로 구성됩니다. 콘텐츠 제공업체는 종종 몇 초 후에 광고를 건너뛸 수 있는 기능을 제공합니다. 안타깝게도 PIP 모드 창이 대화형이 아니므로 사용자는 지금은 PIP 모드를 사용할 수 없습니다.

이제 데스크톱에서 Media Session API를 사용할 수 있으며, 이 API는 이전 모바일만 해당) 새로운 skipad 미디어 세션 작업을 사용하여 PIP 모드 옵션을 사용합니다.

<ph type="x-smartling-placeholder">
</ph> PIP 모드 창의 광고 건너뛰기 버튼 <ph type="x-smartling-placeholder">
</ph> "광고 건너뛰기" PIP 모드 창의 버튼

이 기능을 제공하려면 호출할 때 skipad를 사용하여 함수를 전달하세요. setActionHandler()입니다. 숨기려면 null을 전달합니다. 아래에서 알 수 있듯이 매우 간단합니다.

try {
  navigator.mediaSession.setActionHandler('skipad', null);
  showSkipAdButton();
} catch(error) {
    // The "Skip Ad" media session action is not supported.
}

function showSkipAdButton() {
  // The Picture-in-Picture window will show a "Skip Ad" button.
  navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}

function onSkipAdButtonClick() {
  // User clicked "Skip Ad" button, let's hide it now.
  navigator.mediaSession.setActionHandler('skipad', null);

  // TODO: Stop ad and play video.
}
드림

공식 '광고 건너뛰기'를 사용해 보세요. 샘플을알려주세요 개선할 수 있습니다

실험 의도 | Chrome상태 추적기 | Chromium 버그

데스크톱 PWA에 자동재생이 허용됨

이제 모든 데스크톱 플랫폼에서 프로그레시브 웹 앱을 사용할 수 있으므로 이제 모바일에서 사용하던 규칙을 데스크톱으로 확장했습니다. 바로 자동재생입니다. 이제 설치된 PWA에서 사운드가 허용됩니다. 이 정책은 웹 앱 매니페스트의 범위입니다.

Chromium 버그