MediaSession
MediaSession 介面是 媒體會話 API 的一部分，它允許網頁為標準的媒體播放互動提供自定義行為，並報告元資料，這些元資料可以由使用者代理傳送給裝置或作業系統，以便在標準化的使用者介面元素中進行顯示。
例如，智慧手機的鎖屏介面可能有一個標準面板，用於提供媒體播放控制元件和資訊顯示。裝置上的瀏覽器可以使用 MediaSession 來控制瀏覽器中的媒體播放，使其可以從該標準/全域性使用者介面進行控制。
例項屬性
metadata（元資料）-
返回一個
MediaMetadata例項，其中包含豐富的媒體元資料，用於在平臺 UI 中顯示。 playbackState-
指示當前媒體會話是否正在播放。有效值為
none（無）、paused（暫停）或playing（播放）。
例項方法
setActionHandler()-
為媒體會話操作（如播放或暫停）設定一個操作處理程式。
setCameraActive()-
向用戶代理指示使用者的攝像頭是否被認為是活動的。
setMicrophoneActive()-
向用戶代理指示使用者的麥克風當前是否被認為是靜音的。
setPositionState()-
設定當前呈現媒體的播放位置和速度。
-
向用戶代理指示頁面所需的螢幕共享捕獲狀態。
示例
為音樂播放器設定操作處理程式
以下示例建立一個新的媒體會話併為其分配操作處理程式。
js
if ("mediaSession" in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: "Unforgettable",
artist: "Nat King Cole",
album: "The Ultimate Collection (Remastered)",
artwork: [
{
src: "https://dummyimage.com/96x96",
sizes: "96x96",
type: "image/png",
},
{
src: "https://dummyimage.com/128x128",
sizes: "128x128",
type: "image/png",
},
{
src: "https://dummyimage.com/192x192",
sizes: "192x192",
type: "image/png",
},
{
src: "https://dummyimage.com/256x256",
sizes: "256x256",
type: "image/png",
},
{
src: "https://dummyimage.com/384x384",
sizes: "384x384",
type: "image/png",
},
{
src: "https://dummyimage.com/512x512",
sizes: "512x512",
type: "image/png",
},
],
});
navigator.mediaSession.setActionHandler("play", () => {
/* Code excerpted. */
});
navigator.mediaSession.setActionHandler("pause", () => {
/* Code excerpted. */
});
navigator.mediaSession.setActionHandler("stop", () => {
/* Code excerpted. */
});
navigator.mediaSession.setActionHandler("seekbackward", () => {
/* Code excerpted. */
});
navigator.mediaSession.setActionHandler("seekforward", () => {
/* Code excerpted. */
});
navigator.mediaSession.setActionHandler("seekto", () => {
/* Code excerpted. */
});
navigator.mediaSession.setActionHandler("previoustrack", () => {
/* Code excerpted. */
});
navigator.mediaSession.setActionHandler("nexttrack", () => {
/* Code excerpted. */
});
navigator.mediaSession.setActionHandler("skipad", () => {
/* Code excerpted. */
});
navigator.mediaSession.setActionHandler("togglecamera", () => {
/* Code excerpted. */
});
navigator.mediaSession.setActionHandler("togglemicrophone", () => {
/* Code excerpted. */
});
navigator.mediaSession.setActionHandler("hangup", () => {
/* Code excerpted. */
});
}
以下示例設定了兩個用於播放和暫停的函式，然後將它們用作相關操作處理程式的がコールバック。
js
const actionHandlers = [
// play
[
"play",
async () => {
// play our audio
await audioEl.play();
// set playback state
navigator.mediaSession.playbackState = "playing";
// update our status element
updateStatus(allMeta[index], "Action: play | Track is playing…");
},
],
[
"pause",
() => {
// pause out audio
audioEl.pause();
// set playback state
navigator.mediaSession.playbackState = "paused";
// update our status element
updateStatus(allMeta[index], "Action: pause | Track has been paused…");
},
],
];
for (const [action, handler] of actionHandlers) {
try {
navigator.mediaSession.setActionHandler(action, handler);
} catch (error) {
console.log(`The media session action "${action}" is not supported yet.`);
}
}
使用操作處理程式控制幻燈片演示
"previousslide" 和 "nextslide" 操作處理程式可用於處理幻燈片演示的前進和後退，例如當用戶將簡報放入 畫中畫 視窗，並按下瀏覽器提供的控制元件來導航幻燈片時。
js
try {
navigator.mediaSession.setActionHandler("previousslide", () => {
log('> User clicked "Previous Slide" icon.');
if (slideNumber > 1) slideNumber--;
updateSlide();
});
} catch (error) {
log('Warning! The "previousslide" media session action is not supported.');
}
try {
navigator.mediaSession.setActionHandler("nextslide", () => {
log('> User clicked "Next Slide" icon.');
slideNumber++;
updateSlide();
});
} catch (error) {
log('Warning! The "nextslide" media session action is not supported.');
}
請參閱 演示幻燈片 / 媒體會話示例 以獲取可用的示例。
規範
| 規範 |
|---|
| 媒體會話 # the-mediasession-interface |
瀏覽器相容性
載入中…