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 hiện đ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 đã chạy. Trải nghiệm người dùng có thể được tuỳ chỉnh thông qua siêu dữ liệu trong thông báo tuỳ chỉnh về nội dung nghe nhìn, sự kiện liên quan đến nội dung nghe nhìn như phát, tạm dừng, tua và theo dõi hoạt động thay đổi. Các tính năng tuỳ chỉnh này được cung cấp trong một số trường hợp, bao gồm cả trung tâm nội dung đa phương tiệ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í trên cả thiết bị đeo.

Hỗ trợ trình duyệt

  • 73
  • 79
  • 82
  • 15

Nguồn

Ảnh chụp màn hình ngữ 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 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 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 đa phương tiện phong phú hơn như tiêu đề, tên nghệ sĩ, tên đĩa nhạc và hình minh hoạ như bên dưới.

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

Ví dụ bên dưới cho bạn biết cách tạo 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 liên quan đến nội dung nghe nhì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";
});