Медиа-обновления в Chrome 58

Франсуа Бофор
François Beaufort
GitHub

Настройка управления мультимедиа

Разработчики теперь могут настраивать собственные элементы управления мультимедиа Chrome, такие как кнопки загрузки, полноэкранного режима и удаленного воспроизведения, с помощью нового API ControlsList .

Собственные элементы управления мультимедиа в Chrome 58
Собственные элементы управления мультимедиа в Chrome 58

Этот API предлагает способ показать или скрыть собственные элементы управления мультимедиа, которые не имеют смысла или не являются частью ожидаемого пользовательского опыта или позволяют использовать только ограниченный набор функций.

Текущая реализация на данный момент представляет собой механизм блочных списков на основе собственных элементов управления с возможностью их установки непосредственно из HTML-контента с помощью нового атрибута controlsList . Ознакомьтесь с официальным примером .

Использование в 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 блокировал всё autoplay со звуком на Android без исключения. Теперь это не так. Теперь сайтам, установленным с помощью улучшенного процесса добавления на главный экран, разрешено автоматически воспроизводить аудио и видео из источников, включённых в область действия манифеста веб-приложения , без ограничений.

{
  "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

Пауза автоматического воспроизведения беззвучного видео, когда устройство невидимо

Как вы, возможно, уже знаете, Chrome на Android позволяет воспроизводить видео muted без взаимодействия с пользователем. Если видео помечено как muted и имеет атрибут autoplay , Chrome начинает воспроизведение, как только оно становится видимым для пользователя.

Начиная с Chrome 58, для снижения энергопотребления воспроизведение видео с атрибутом autoplay будет приостанавливаться при выходе из экрана и возобновляться при возвращении в поле зрения, следуя поведению Safari iOS.

Намерение отправить | Chromestatus Tracker | Ошибка Chromium

медиа-запрос цветовой гаммы

Поскольку экраны с широким цветовым охватом становятся все более популярными, сайты теперь могут получить доступ к приблизительному диапазону цветов, поддерживаемых Chrome и устройствами вывода, с помощью медиазапроса color-gamut .

Если вы ещё не знакомы с определениями цветового пространства, цветового профиля, охвата, широкого охвата и глубины цвета, настоятельно рекомендую вам прочитать публикацию в блоге 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