Cách tuỳ chỉnh thông báo về nội dung nghe nhìn

François Beaufort
François Beaufort
GitHub

Media Session API cho phép các trang web cho người dùng biết nội dung đang phát trong trình duyệt của họ và kiểm soát nội dung đó mà không cần quay lại trang đã khởi chạy nội dung. Bạn có thể tuỳ chỉnh trải nghiệm người dùng thông qua siêu dữ liệu trong thông báo tuỳ chỉnh về nội dung nghe nhìn, các sự kiện về nội dung nghe nhìn (chẳng hạn như phát, tạm dừng, tìm kiếm và thay đổi bản nhạc). Bạn có thể tuỳ chỉnh trong nhiều bối cảnh, bao gồm cả trung tâm nội dung nghe nhìn trên máy tính, thông báo về nội dung nghe nhìn trên thiết bị di động và thậm chí cả trên thiết bị đeo.

Browser Support

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

Source

Ảnh chụp màn hình bối cảnh của Phiên phát nội dung đa phương tiện.
Trung tâm nội dung nghe nhìn trên máy tính, thông báo về nội dung nghe nhìn trên thiết bị di động và thiết bị đeo.

Khi một trang web đang phát âm thanh hoặc video, người dùng sẽ tự động nhận được thông báo về nội dung nghe nhìn trong khay thông báo trên thiết bị di động hoặc trung tâm nội dung nghe nhìn trên máy tính. Trình duyệt sẽ cố gắng hết sức để hiển thị thông tin phù hợp bằng cách sử dụng tiêu đề của tài liệu và hình ảnh biểu tượng lớn nhất mà trình duyệt có thể tìm thấy. Media Session API cho phép bạn tuỳ chỉnh thông báo về nội dung nghe nhìn bằng một số siêu dữ liệu phong phú hơn về nội dung nghe nhìn, chẳng hạn như tiêu đề, tên nghệ sĩ, tên đĩa nhạc và ảnh bìa như minh hoạ bên dưới.

Hình minh hoạ giao diện Phiên phát nội dung đa phương tiện.
Cấu tạo của thông báo về nội dung nghe nhìn trên thiết bị di động.

Ví dụ dưới đây cho bạn biết cách tạo một thông báo tuỳ chỉnh về nội dung nghe nhìn và phản hồi các thao tác cơ bản về nội dung nghe nhìn, chẳng hạn như phát và tạm dừng.

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

Tài liệu đọc thêm

Bản minh hoạ

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