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 |
浏览器兼容性
加载中…