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 Tracker | Chromium 버그

color-gamut 미디어 쿼리

고색 재현 화면이 점점 더 많이 사용됨에 따라 사이트에서 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 버그