Обновления аудио/видео в Chrome 58

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

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

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

Собственные элементы управления мультимедиа в Chrome 58
Рисунок 1. Собственные элементы управления мультимедиа в 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>

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

Намерение отправить | 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