Медиа-обновления в 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 | Ошибка хрома

Автозапуск для прогрессивных веб-приложений добавлен на главный экран

Раньше 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 | Ошибка хрома

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

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

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

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

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

Поскольку экраны с широкой цветовой гаммой становятся все более популярными, сайты теперь могут получить доступ к приблизительному диапазону цветов, поддерживаемому 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 | Ошибка хрома