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 추적기 | 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 추적기 | Chromium 버그

보이지 않을 때 음소거된 자동재생 동영상 일시중지

이미 알고 계시겠지만 Android의 Chrome에서는 사용자의 상호작용 없이 muted 동영상이 재생될 수 있습니다. 동영상이 muted로 표시되고 autoplay 속성이 있는 경우 Chrome은 동영상이 사용자에게 표시되면 동영상을 재생하기 시작합니다.

Chrome 58부터 전력 사용량을 줄이기 위해 autoplay 속성이 있는 동영상 재생은 화면이 꺼지면 일시중지되고 화면이 다시 표시되면 재개됩니다(Safari iOS 동작을 따름).'

출시 의도 | Chromestatus 추적기 | Chromium 버그

color-gamut 미디어 쿼리

폭넓은 색상 영역 화면이 점점 더 인기를 얻고 있으므로 이제 사이트에서 color-gamut 미디어 쿼리를 사용하여 Chrome과 출력 기기에서 지원하는 대략적인 색상 범위에 액세스할 수 있습니다.

색상 공간, 색상 프로필, 영역, 폭넓은 색상 영역, 색상 심도의 정의에 아직 익숙하지 않다면 웹에서 색상 개선하기 WebKit 블로그 게시물을 읽어보시기 바랍니다. 사용자가 광범위한 색역 디스플레이를 사용하는 경우 광범위한 색역 이미지를 제공하고 그렇지 않은 경우 sRGB 이미지로 대체하는 color-gamut 미디어 쿼리를 사용하는 방법을 자세히 설명합니다.

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 추적기 | Chromium 버그