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 추적기 | Chromium 버그
HTMLVideoElement.playsInline
이제 Chrome에서 playsInline 불리언 속성을 지원합니다. 이 속성이 있는 경우 브라우저에 동영상이 기본적으로 문서에 '인라인'으로 표시되어야 하며 요소의 재생 영역에 제약되어야 한다고 힌트합니다.
재생이 시작될 때 iPhone의 동영상 요소가 자동으로 전체 화면 모드로 전환되지 않는 Safari와 유사하게 이 힌트를 사용하면 일부 삽입자가 자동 전체 화면 동영상 재생 환경을 제공할 수 있습니다. 웹 개발자는 필요한 경우 이를 사용하여 이 환경을 선택 해제할 수 있습니다.
<video playsinline></video>
Android 및 데스크톱의 Chrome은 자동 전체 화면을 구현하지 않으므로 playsInline 동영상 요소 속성 힌트가 사용되지 않습니다.