Medya bildirimlerini özelleştirme

François Beaufort
François Beaufort
GitHub

Media Session API (Medya Oturumu API'sı), web sitelerinin kullanıcılara tarayıcılarında o anda neyin oynatıldığını bilmelerini ve başlatan sayfaya dönmeden bunu kontrol etmelerini sağlar. Kullanıcı deneyimi, özel medya bildirimlerindeki meta veriler ve oynatma, duraklatma, sarma ve parça değiştirme gibi medya etkinlikleri aracılığıyla özelleştirilebilir. Bu özelleştirmeler; masaüstü medya merkezleri, mobil cihazlardaki ve hatta giyilebilir cihazlardaki medya bildirimleri dahil olmak üzere çeşitli bağlamlarda kullanılabilir.

Tarayıcı Desteği

  • 73
  • 79
  • 82
  • 15

Kaynak

Medya Oturumu bağlamlarının ekran görüntüleri.
Masaüstünde Medya Merkezi, mobilde medya bildirimi ve giyilebilir bir cihaz.

Bir web sitesinde ses veya video oynatıldığında, kullanıcılara medya bildirimleri otomatik olarak mobil cihazda bildirim tepsisinde veya masaüstünde medya merkezinde gönderilir. Tarayıcı, dokümanın başlığını ve bulunabileceği en büyük simge resmini kullanarak uygun bilgileri göstermek için elinden geleni yapar. Media Session API'si, medya bildirimini aşağıda gösterildiği gibi başlık, sanatçı adı, albüm adı ve poster gibi bazı zengin medya meta verileriyle özelleştirmenize olanak tanır.

Medya Oturumu arayüzlerinin resmi.
Mobil cihazda bir medya bildiriminin anatomisi.

Aşağıdaki örnekte, özel medya bildirimlerinin nasıl oluşturulacağı ve oynatma ve duraklatma gibi temel medya işlemlerine nasıl yanıt verileceği gösterilmektedir.

const video = document.querySelector("video");

navigator.mediaSession.metadata = new MediaMetadata({
  title: "Never Gonna Give You Up",
  artist: "Rick Astley",
  album: "Whenever You Need Somebody",
  artwork: [
    { src: "https://via.placeholder.com/96",  sizes: "96x96" },
    { src: "https://via.placeholder.com/128", sizes: "128x128" },
    { src: "https://via.placeholder.com/256", sizes: "256x256" },
    { src: "https://via.placeholder.com/512", sizes: "512x512" },
  ],
});

navigator.mediaSession.setActionHandler("play", async () => {
  // Resume playback
  try {
    await video.play();
  } catch (err) {
    console.error(err.name, err.message);
  }
});

navigator.mediaSession.setActionHandler("pause", () => {
  // Pause active playback
  video.pause();
});

video.addEventListener("play", () => {
  navigator.mediaSession.playbackState = "playing";
});

video.addEventListener("pause", () => {
  navigator.mediaSession.playbackState = "paused";
});

Daha fazla bilgi

Demografi

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📺</text></svg>"
    />
    <title>How to customize media notifications</title>
  </head>
  <body>
    <h1>How to customize media notifications</h1>
    <video controls playsinline src="https://storage.googleapis.com/media-session/caminandes/short.mp4"></video>
    <p>Credits: Media files are © copyright Blender Foundation | <a href="https://www.blender.org">www.blender.org</a>.</p>
  </body>
</html>

CSS


        :root {
  color-scheme: dark light;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}
video {
  display: block;
  margin-top: 10px;
  max-width: 100%;
}

JS


        const video = document.querySelector("video");

navigator.mediaSession.metadata = new MediaMetadata({
  title: "Caminandes 2: Gran Dillama - Blender Animated Short",
  artist: "Blender Foundation",
  artwork: [
    { src: "https://storage.googleapis.com/media-session/caminandes/artwork-96.png",  sizes: "96x96" },
    { src: "https://storage.googleapis.com/media-session/caminandes/artwork-128.png", sizes: "128x128" },
    { src: "https://storage.googleapis.com/media-session/caminandes/artwork-256.png", sizes: "256x256" },
    { src: "https://storage.googleapis.com/media-session/caminandes/artwork-512.png", sizes: "512x512" },
  ],
});

navigator.mediaSession.setActionHandler("play", async () => {
  // Resume playback
  try {
    await video.play();
  } catch (err) {
    console.error(err.name, err.message);
  }
});

navigator.mediaSession.setActionHandler("pause", () => {
  // Pause active playback
  video.pause();
});

video.addEventListener("play", () => {
  navigator.mediaSession.playbackState = "playing";
});

video.addEventListener("pause", () => {
  navigator.mediaSession.playbackState = "paused";
});