Chrome의 미디어 기능이 버전 75에서 업데이트되었습니다. 이 도움말에서는 다음과 같은 새로운 기능을 설명합니다.
- 암호화된 미디어의 재생이 원활하고 전력 효율이 높은지 예측
- 동영상 요소의
playsInline속성 힌트 지원
암호화된 미디어: 디코딩 정보
Chrome 66부터 웹 개발자는 디코딩 정보를 사용하여 코덱, 프로필, 해상도, 비트 전송률 등의 정보를 기반으로 기기의 선명한 콘텐츠 디코딩 기능에 관해 브라우저에 쿼리할 수 있습니다. 이는 브라우저에 기록된 이전 재생 통계를 기반으로 재생이 원활하고(시의적절) 전력 효율적일지 여부를 나타냅니다.
디코딩 정보를 정의하는 Media Capabilities API 사양은 암호화된 미디어 구성도 처리하도록 업데이트되어 암호화된 미디어(EME)를 사용하는 웹사이트에서 최적의 미디어 스트림을 선택할 수 있습니다.
EME의 디코딩 정보가 작동하는 방식을 간단히 설명하면 다음과 같습니다. 공식 샘플을 사용해 보세요.
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 키가 설정되고 supported가 true인 경우 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()보다 많은 메시지가 표시되지 않습니다.
실험 의도 | Chromestatus Tracker | Chromium 버그
HTMLVideoElement.playsInline
이제 Chrome에서 playsInline 불리언 속성을 지원합니다. 이 속성이 있는 경우 브라우저에 동영상이 기본적으로 문서에 '인라인'으로 표시되어야 하며 요소의 재생 영역에 제약되어야 한다고 힌트합니다.
iPhone의 동영상 요소가 재생이 시작될 때 자동으로 전체 화면 모드로 전환되지 않는 Safari와 마찬가지로 이 힌트는 일부 임베딩 사용자에게 자동 전체 화면 동영상 재생 환경을 제공합니다. 웹 개발자는 필요한 경우 이를 사용하여 이 환경을 선택 해제할 수 있습니다.
<video playsinline></video>
Android 및 데스크톱의 Chrome은 자동 전체 화면을 구현하지 않으므로 playsInline 동영상 요소 속성 힌트가 사용되지 않습니다.