Chrome Media Hub API - PullRequest
Новая
       23

Chrome Media Hub API

2 голосов
/ 21 января 2020

На прошлой неделе Chrome выпустил медиа-хаб. Это небольшая кнопка справа от верхней панели браузера, предоставляющая доступ ко всем воспроизводимым видео и аудио.

https://blog.google/products/chrome/manage-audio-and-video-in-chrome/

The media hub

Использование элемента <video> делает ваш плеер отображаемым в этом медиацентре, он просто работает.

Но для видео на YouTube (см. Выше) медиацентр, похоже, возможность найти изображение обложки, цвет и заголовок / подзаголовок. Однако я не смог найти никакой документации о том, как получить этот аспект со стандартным элементом видео. Есть идеи?

1 Ответ

5 голосов
/ 14 февраля 2020

Мы все в одной лодке, после неудачной попытки вырыть источник хрома, я отправил электронное письмо разработчику хрома по этому вопросу и получил полезную ссылку о MediaSession .

Таким образом, следуя документам, Вы можете настроить его, установив свойство metadata в mediaSession для отображения заголовка, описания и графического объекта (он же фоновое изображение), за исключением цвета фона, потому что цвет фона определяется пикселями изображения автоматически. 

if ('mediaSession' in navigator) {

  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Never Gonna Give You Up',
    artist: 'Rick Astley',
    album: 'Whenever You Need Somebody',
    artwork: [
      { src: 'https://dummyimage.com/96x96',   sizes: '96x96',   type: 'image/png' },
      { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
      { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
      { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
      { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
      { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
    ]
  });
}

Я создал demo на JSFiddle. результат показывает следующее.

GMC

...