Chrome 75의 미디어 업데이트

François Beaufort
François Beaufort

Chrome의 미디어 기능이 버전 75에서 업데이트되었습니다. 이 문서에서는 다음과 같은 새로운 기능에 대해 설명합니다.

  • 암호화된 미디어 재생이 원활하고 전력 효율이 높을지 예측합니다.
  • 동영상 요소의 playsInline 속성 힌트를 지원합니다.

암호화된 미디어: 디코딩 정보

Chrome 66부터 웹 개발자는 디코딩 정보를 사용하여 코덱, 프로필, 해상도, 비트 전송률 등의 정보를 기반으로 기기의 명확한 콘텐츠 디코딩 기능에 관해 브라우저에 쿼리할 수 있게 되었습니다. 이는 브라우저에서 기록한 이전 재생 통계를 기반으로 재생이 원활하고 (적시) 전력 효율이 되는지를 나타냅니다.

디코딩 정보를 정의하는 Media Capabilities API 사양은 암호화된 미디어 구성도 처리하도록 업데이트되어 암호화된 미디어 (EME)를 사용하는 웹사이트에서 최적의 미디어 스트림을 선택할 수 있도록 했습니다.

EME의 Decoding Info가 작동하는 방식은 다음과 같습니다. 공식 샘플을 사용해 보세요.

const encryptedMediaConfig = {
  type: 'media-source', // or 'file'
  video: {
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    width: 1920,
    height: 1080,
    bitrate: 2646242, // number of bits used to encode a second of video
    framerate: '25' // number of frames used in one second
  },
  keySystemConfiguration: {
    keySystem: 'com.widevine.alpha',
    videoRobustness: 'SW_SECURE_DECODE' // Widevine L3
  }
};

navigator.mediaCapabilities.decodingInfo(encryptedMediaConfig).then(result => {
  if (!result.supported) {
    console.log('Argh! This encrypted media configuration is not supported.');
    return;
  }

  if (!result.keySystemAccess) {
    console.log('Argh! Encrypted media support is not available.')
    return;
  }

  console.log('This encrypted media configuration is supported.');
  console.log('Playback should be' +
      (result.smooth ? '' : ' NOT') + ' smooth and' +
      (result.powerEfficient ? '' : ' NOT') + ' power efficient.');

  // TODO: Use `result.keySystemAccess.createMediaKeys()` to setup EME playback.
});

EME 재생에는 특수한 디코딩 및 렌더링 코드 경로가 있습니다. 즉, 선명한 재생에 비해 코덱 지원 및 성능이 다릅니다. 따라서 navigator.mediaCapabilities.decodingInfo()에 전달된 미디어 구성 객체에 새 keySystemConfiguration 키를 설정해야 합니다. 이 키의 값은 여러 가지 잘 알려진 EME 유형이 포함된 사전입니다. 이렇게 하면 EME의 requestMediaKeySystemAccess()에 제공된 입력이 한 가지 큰 차이점이 있습니다. requestMediaKeySystemAccess()에 제공된 입력 시퀀스는 시퀀스의 의도가 requestMediaKeySystemAccess()가 지원하는 하위 집합을 선택하도록 하려는 경우 항상 단일 값으로 평탄화됩니다.

디코딩 정보는 호출자를 결정하지 않고 한 쌍의 오디오 및 동영상 스트림 지원 품질 (부드러움 및 전력 효율성)을 설명합니다. 호출자는 requestMediaKeySystemAccess()에서와 마찬가지로 미디어 구성을 정렬해야 합니다. 이제야 본인이 직접 목록을 확인합니다.

navigator.mediaCapabilities.decodingInfo()는 세 개의 불리언(supported, smooth, powerEfficient)이 포함된 객체를 사용하여 비동기식으로 확인되는 프로미스를 반환합니다. 그러나 keySystemConfiguration 키가 설정되고 supportedtrue이면 keySystemAccess라는 또 다른 MediaKeySystemAccess 객체도 반환됩니다. 일부 미디어 키를 요청하고 암호화된 미디어 재생을 설정하는 데 사용할 수 있습니다. 예를 들면 다음과 같습니다.

// Like rMSKA(), orderedMediaConfigs is ordered from most to least wanted.
const capabilitiesPromises = orderedMediaConfigs.map(mediaConfig =>
  navigator.mediaCapabilities.decodingInfo(mediaConfig)
);

// Assume this app wants a supported and smooth media playback.
let bestConfig = null;
for await (const result of capabilitiesPromises) {
  if (result.supported && result.smooth) {
    bestConfig = result;
    break;
  }
}

if (bestConfig) {
  const mediaKeys = await bestConfig.keySystemAccess.createMediaKeys();
  // TODO: rest of EME path as-is
} else {
  // Argh! No smooth configs found.
  // TODO: Maybe choose the lowest resolution and framerate available.
}

암호화된 미디어의 디코딩 정보에는 HTTPS가 필요합니다.

또한 requestMediaKeySystemAccess()와 같은 방식으로 Android와 ChromeOS에서 사용자 메시지를 트리거할 수 있습니다. 암호화된 미디어 재생을 설정하기 위해 더 많은 호출이 필요하지만 requestMediaKeySystemAccess()보다 많은 메시지가 표시되지는 않습니다.

ALT_TEXT_HERE
보호된 콘텐츠 메시지

실험 의도 | Chromestatus Tracker | Chromium 버그

HTMLVideoElement.playsInline

이제 Chrome에서 playsInline 부울 속성을 지원합니다. 이 필드가 있다면 이 요소는 동영상을 기본적으로 문서에 '인라인'으로 표시해야 하고 요소의 재생 영역으로 제한되어야 한다고 브라우저에 알려줍니다.

재생이 시작될 때 iPhone의 동영상 요소가 자동으로 전체 화면 모드로 전환되지 않는 Safari와 마찬가지로, 이 힌트를 통해 일부 삽입자는 동영상 자동 재생 환경을 설정할 수 있습니다. 필요한 경우 웹 개발자는 이 기능을 사용하여 이 환경을 선택 해제할 수 있습니다.

<video playsinline></video>

Android 및 데스크톱의 Chrome은 자동 전체 화면을 구현하지 않으므로 playsInline 동영상 요소 속성 힌트가 사용되지 않습니다.

배송 의도 | Chromestatus Tracker | Chromium 버그