Medya bildirimlerini özelleştirme

François Beaufort
François Beaufort
GitHub

Media Session API, web sitelerinin kullanıcılara tarayıcılarında şu anda neyin oynatıldığını bildirmesine ve oynatmayı başlatan sayfaya dönmeden kontrol etmesine olanak tanır. Kullanıcı deneyimi, özel medya bildirimlerindeki meta veriler, oynatma, duraklatma, arama ve parça değiştirme gibi medya etkinlikleri aracılığıyla özelleştirilebilir. Bu özelleştirmeler; masaüstü medya merkezleri, mobil cihazlardaki medya bildirimleri ve hatta giyilebilir cihazlar dahil olmak üzere çeşitli bağlamlarda kullanılabilir.

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 82.
  • Safari: 15.

Source

Medya oturumu bağlamlarının ekran görüntüleri.
Masaüstünde medya merkezi, mobil cihazda medya bildirimi ve giyilebilir cihaz.

Bir web sitesi ses veya video oynattığında kullanıcılar otomatik olarak mobil cihazlardaki bildirim tepsisinde ya da masaüstündeki medya merkezinde medya bildirimleri alır. Tarayıcı, dokümanın başlığını ve bulabildiği en büyük simge resmini kullanarak uygun bilgileri göstermek için elinden geleni yapar. Media Session API, medya bildirimini başlık, sanatçı adı, albüm adı ve albüm kapağı gibi daha zengin medya meta verileriyle özelleştirmenize olanak tanır.

Medya oturumu arayüzleri görseli.
Mobil cihazlarda medya bildiriminin anatomisi.

Aşağıdaki örnekte, özel medya bildirimi oluşturma ve oynatma ile duraklatma gibi temel medya işlemlerine yanıt verme adımları 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

Demo

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";
});