Сессия мультимедиа

Ограниченная доступность

Эта функция не является базовой, так как она не работает в некоторых из самых широко используемых браузеров.

Интерфейс MediaSession API сессии мультимедиа позволяет веб-странице предоставлять пользовательские действия для стандартных взаимодействий с воспроизведением медиа и сообщать метаданные, которые могут быть отправлены пользовательским агентом устройству или операционной системе для отображения в стандартизированных элементах пользовательского интерфейса.

Например, смартфон может иметь стандартную панель на экране блокировки, предоставляющую элементы управления воспроизведением медиа и отображения информации. Браузер на устройстве может использовать MediaSession для управления воспроизведением браузера из этого стандартного/глобального пользовательского интерфейса.

Свойства экземпляра

metadata: Возвращает экземпляр MediaMetadata, содержащий богатые метаданные о медиа для отображения в пользовательском интерфейсе платформы.
playbackState: Указывает, воспроизводится ли текущая сессия медиа. Допустимые значения — none, paused, или playing.

Методы экземпляра

setActionHandler(): Устанавливает обработчик действий для действия сессии мультимедиа, например, воспроизведение или пауза.
setCameraActive() Экспериментально: Указывает пользовательскому агенту, считается ли активной камера пользователя.
setMicrophoneActive() Экспериментально: Указывает пользовательскому агенту, считается ли в данный момент микрофон пользователя немым.
setPositionState(): Устанавливает текущую позицию воспроизведения и скорость воспроизведения текущего воспроизводимого медиа.

Примеры

Настройка обработчиков действий для музыкального проигрывателя

Следующий пример создаёт новую сессию медиа и назначает обработчики действий для неё:

if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    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",
      },
    ],
  });

  navigator.mediaSession.setActionHandler("play", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("pause", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("stop", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("seekbackward", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("seekforward", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("seekto", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("previoustrack", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("nexttrack", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("skipad", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("togglecamera", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("togglemicrophone", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("hangup", () => {
    /* Code excerpted. */
  });
}

Следующий пример настраивает две функции для воспроизведения и паузы, а затем использует их в качестве обратных вызовов с соответствующими обработчиками действий.

const actionHandlers = [
  // play
  [
    "play",
    async () => {
      // play our audio
      await audioEl.play();
      // set playback state
      navigator.mediaSession.playbackState = "playing";
      // update our status element
      updateStatus(allMeta[index], "Action: play  |  Track is playing…");
    },
  ],
  [
    "pause",
    () => {
      // pause out audio
      audioEl.pause();
      // set playback state
      navigator.mediaSession.playbackState = "paused";
      // update our status element
      updateStatus(allMeta[index], "Action: pause  |  Track has been paused…");
    },
  ],
];

for (const [action, handler] of actionHandlers) {
  try {
    navigator.mediaSession.setActionHandler(action, handler);
  } catch (error) {
    console.log(`The media session action "${action}" is not supported yet.`);
  }
}

Использование обработчиков действий для управления презентацией слайдов

Обработчики действий "previousslide" и "nextslide" могут использоваться для обработки перехода вперёд и назад по презентации слайдов, например, когда пользователь запускает презентацию в окне картинка в картинке и нажимает предоставляемые браузером элементы управления для навигации по слайдам.

try {
  navigator.mediaSession.setActionHandler("previousslide", () => {
    log('> User clicked "Previous Slide" icon.');
    if (slideNumber > 1) slideNumber--;
    updateSlide();
  });
} catch (error) {
  log('Warning! The "previousslide" media session action is not supported.');
}

try {
  navigator.mediaSession.setActionHandler("nextslide", () => {
    log('> User clicked "Next Slide" icon.');
    slideNumber++;
    updateSlide();
  });
} catch (error) {
  log('Warning! The "nextslide" media session action is not supported.');
}

См. Пример презентации слайдов/сессии мультимедиа для рабочего примера.

Спецификации

Спецификация
Сессия мультимедиа # the-mediasession-interface

Совместимость браузеров

	Десктоп					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`MediaSession`	73	79	82	60	15	57	82 Firefox предоставляет доступ к API, но не предоставляет соответствующий пользовательский интерфейс управления медиа.	43	15	7.0	Нет
`metadata`	73	79	82	60	15	57	82 Firefox предоставляет доступ к API, но не предоставляет соответствующий пользовательский интерфейс управления медиа.	43	15	7.0	Нет
`playbackState`	73	79	82	60	15	57	82 Firefox предоставляет доступ к API, но не предоставляет соответствующий пользовательский интерфейс управления медиа.	43	15	7.0	Нет
`setActionHandler`	73	79	82	60	15	57	82 Firefox предоставляет доступ к API, но не предоставляет соответствующий пользовательский интерфейс управления медиа.	43	15	7.0	Нет
`setCameraActive`	93	93	Нет	79	Нет	93	Нет	66	Нет	17.0	Нет
`setMicrophoneActive`	93	93	Нет	79	Нет	93	Нет	66	Нет	17.0	Нет
`setPositionState`	81	81	82	68	15	57	82 Firefox предоставляет доступ к API, но не предоставляет соответствующий пользовательский интерфейс управления медиа.	43	15	7.0	Нет

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MediaSession