Chrome 58의 미디어 업데이트

François Beaufort
François Beaufort
GitHub

미디어 컨트롤 맞춤설정

개발자는 이제 새로운 ControlsList API를 사용하여 다운로드, 전체 화면, remoteplayback 버튼과 같은 Chrome의 네이티브 미디어 컨트롤을 맞춤설정할 수 있습니다.

Chrome 58의 기본 미디어 컨트롤
Chrome 58의 기본 미디어 컨트롤

이 API는 맞지 않거나 예상 사용자 환경의 일부가 아니거나 제한된 기능만 허용하는 네이티브 미디어 컨트롤을 표시하거나 숨기는 방법을 제공합니다.

현재 현재 구현은 새 속성 controlsList를 사용하여 HTML 콘텐츠에서 직접 컨트롤을 설정할 수 있는 네이티브 컨트롤의 차단 목록 메커니즘입니다. 공식 샘플을 확인하세요.

HTML에서의 사용:

<video controls controlsList="nofullscreen nodownload noremoteplayback"></video>

JavaScript에서의 사용:

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>

/foo가 범위 내에 있으므로 오디오가 자동재생됩니다.

금지사항
<html>
  <link rel="canonical" href="https://example.com/bar">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

/bar이(가) 범위에 속하지 않으므로 오디오가 자동재생되지 않습니다.

배송 의도 | 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 권장사항 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");
  }
}

JavaScript에서의 사용:

// 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")';
}

배송 의도 | Chromestatus Tracker | Chromium 버그