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.
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.
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
- Thông số kỹ thuật của phiên phát nội dung đa phương tiện W3C
- Tuỳ chỉnh thông báo về nội dung nghe nhìn và bộ điều khiển chế độ phát bằng Media Session API
- API Phiên nội dung đa phương tiện MMDN
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";
});