- 개발자는 이제 다운로드, 전체 화면, 원격 재생 버튼과 같은 미디어 컨트롤을 맞춤설정할 수 있습니다.
- '홈 화면에 추가' 흐름을 사용하여 설치된 사이트는 매니페스트 범위에서 오디오 및 동영상을 자동재생할 수 있습니다.
- 이제 Android의 Chrome에서 음소거된 동영상이 표시되지 않을 때 자동재생을 일시중지합니다.
- 개발자는 이제
color-gamut미디어 쿼리를 사용하여 Chrome 및 출력 장치에서 지원되는 대략적인 색상 범위에 액세스할 수 있습니다. - 미디어 소스 확장 프로그램을 사용할 때 이제 암호화된 스트림과 명확한 스트림 간에 전환할 수 있습니다.
미디어 컨트롤 맞춤설정
개발자는 이제 새로운 [ControlsList API] 를 사용하여 다운로드, 전체 화면, [remoteplayback] 버튼과 같은 Chrome의 네이티브 미디어 컨트롤을 맞춤설정할 수 있습니다.
이 API는 이해할 수 없거나 예상 사용자 환경의 일부가 아니거나 제한된 기능만 허용하는 네이티브 미디어 컨트롤을 표시하거나 숨기는 방법을 제공합니다.
현재 구현되는 네이티브 컨트롤은 차단 목록 메커니즘으로, 새 속성 controlsList를 사용하여 HTML 콘텐츠에서 직접 컨트롤을 설정할 수 있습니다. 공식 샘플을 확인하세요.
HTML에서의 사용법:
<video controls controlsList="nofullscreen nodownload noremoteplayback"></video>
자바스크립트에서의 사용:
var video = document.querySelector('video');
video.controls; // true
video.controlsList; // ["nofullscreen", "nodownload", "noremoteplayback"]
video.controlsList.remove('noremoteplayback');
video.controlsList; // ["nofullscreen", "nodownload"]
video.getAttribute('controlsList'); // "nofullscreen nodownload"
video.controlsList.supports('foo'); // false
video.controlsList.supports('noremoteplayback'); // true
배송 예정 | Chromestatus Tracker | Chromium 버그
홈 화면에 추가된 프로그레시브 웹 앱의 자동재생
이전에는 Chrome에서 예외 없이 Android에서 사운드가 포함된 모든 autoplay를 차단했습니다. 더 이상 사실이 아닙니다. 이제 개선된 홈 화면에 추가 흐름을 사용하여 설치된 사이트는 웹 앱 매니페스트의 범위에 포함된 출처에서 제공되는 오디오 및 동영상을 제한 없이 자동재생할 수 있습니다.
{
"name": "My Web App",
"description": "An awesome app",
"scope": "/foo",
...
}
<html>
<link rel="canonical" href="https://example.com/foo">
<audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>
<html>
<link rel="canonical" href="https://example.com/bar">
<audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>
배송 예정 | Chromestatus Tracker | Chromium 버그
보이지 않을 때 음소거된 동영상 자동재생 일시중지
이미 알고 계시겠지만 Android용 Chrome에서는 muted 동영상을 사용자 상호작용 없이 재생할 수 있습니다. 동영상이 muted로 표시되고 autoplay 속성이 있는 경우 동영상이 사용자에게 표시되면 Chrome에서 동영상 재생을 시작합니다.
Chrome 58부터는 전력 사용량을 줄이기 위해 Safari iOS 동작에 따라 autoplay 속성이 있는 동영상 재생이 화면을 벗어나면 일시중지되고 다시 화면에 표시되면 다시 시작됩니다.
배송 예정 | Chromestatus Tracker | Chromium 버그
색상 영역 미디어 쿼리
넓은 색 공간 화면이 점점 더 보편화됨에 따라 이제 사이트에서 color-gamut 미디어 쿼리를 사용하여 Chrome 및 출력 장치에서 지원하는 대략적인 색상 범위에 액세스할 수 있습니다.
색 공간, 색 프로필, 색 영역, 넓어진 색 영역, 색심도의 정의에 관해 잘 모른다면 웹의 색 개선 WebKit 블로그 게시물을 읽어보는 것이 좋습니다. 사용자가 고색 재현 디스플레이에 있을 때는 color-gamut 미디어 쿼리를 사용하여 고색 재현 이미지를 제공하고 그렇지 않으면 sRGB 이미지로 대체하는 방법을 자세히 설명합니다.
현재 Chrome 구현에서는 srgb, p3 (DCI P3 색상 공간으로 지정된 영역), rec2020 (ITU-R Recommendation BT.2020 색공간에 의해 지정된 영역) 키워드가 허용됩니다. 공식 샘플을 확인하세요.
HTML에서의 사용법:
<picture>
<source media="(color-gamut: p3)" srcset="photo-p3.jpg">
<source media="(color-gamut: rec2020)" srcset="photo-rec2020.jpg">
<img src="photo-srgb.jpg">
</picture>
CSS 사용:
main {
background-image: url("photo-srgb.jpg");
}
@media (color-gamut: p3) {
main {
background-image: url("photo-p3.jpg");
}
}
@media (color-gamut: rec2020) {
main {
background-image: url("photo-rec2020.jpg");
}
}
자바스크립트에서의 사용:
// It is expected that the majority of color displays will return true.
if (window.matchMedia("(color-gamut: srgb)").matches) {
document.querySelector('main').style.backgroundImage = 'url("photo-srgb.jpg")';
}
if (window.matchMedia("(color-gamut: p3)").matches) {
document.querySelector('main').style.backgroundImage = 'url("photo-p3.jpg")';
}
if (window.matchMedia("(color-gamut: rec2020)").matches) {
document.querySelector('main').style.backgroundImage = 'url("photo-rec2020.jpg")';
}