MediaSession

这是 实验性技术
检查 浏览器兼容性表格 在生产中使用这之前。

MediaSession interface of the 媒体会话 API allows a web page to provide custom behaviors for standard media playback interactions, and to report metadata that can be sent by the user agent to the device or operating system for presentation in standardized user interface elements.

For example, a smartphone might have a standard panel in its lock screen that provides controls for media. A browser on that device might deliver the metadata provided by calling MediaSession to the device in order to be controllable using the global user interface.

特性

metadata
Returns an instance of MediaMetadata which contains rich media metadata, for display in a platform UI.
playbackState
Indicates whether the current media session is playing. Valid values are none , paused ,或 playing .

方法

setActionHandler()
Sets an event handler for a media session action, such as play or pause. See the method page for a full list.
setPositionState()
Sets the current playback position and speed of the media currently being presented.

范例

The following example creates a new media session and assigns action handlers to it:

if ('mediaSession' in navigator){
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Podcast Episode Title",
    artist: "Podcast Host",
    album: "Podcast Name",
    artwork: [{src: "podcast.jpg"}]
  });
  navigator.mediaSession.setActionHandler('play', function() {});
  navigator.mediaSession.setActionHandler('pause', function() {});
  navigator.mediaSession.setActionHandler('seekbackward', function() {});
  navigator.mediaSession.setActionHandler('seekforward', function() {});
  navigator.mediaSession.setActionHandler('previoustrack', function() {});
  navigator.mediaSession.setActionHandler('nexttrack', function() {});
}
					

The following example sets up event handlers for pausing and playing:

var audio = document.querySelector("#player");
audio.src = "song.mp3";
navigator.mediaSession.setActionHandler('play', play);
navigator.mediaSession.setActionHandler('pause', pause);
function play() {
  audio.play();
  navigator.mediaSession.playbackState = "playing";
}
function pause() {
  audio.pause();
  navigator.mediaSession.playbackState = "paused";
}
					

规范

规范 状态 Comment
Media Session Standard
The definition of 'MediaSession' in that specification.
草案 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
MediaSession
Chrome 73 Edge ≤79 Firefox 71
Disabled
71
Disabled
Disabled From version 71: this feature is behind the dom.media.mediasession.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera Yes Safari ? WebView Android No Chrome Android 57 Firefox Android No Opera Android No Safari iOS ? Samsung Internet Android 7.0
metadata
Chrome 73 Edge ≤79 Firefox 71
Disabled
71
Disabled
Disabled From version 71: this feature is behind the dom.media.mediasession.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera Yes Safari ? WebView Android No Chrome Android 57 Firefox Android No Opera Android No Safari iOS ? Samsung Internet Android 7.0
playbackState
Chrome 73 Edge ≤79 Firefox No IE No Opera Yes Safari ? WebView Android No Chrome Android 57 Firefox Android No Opera Android No Safari iOS ? Samsung Internet Android 7.0
setActionHandler()
Chrome 73 Edge ≤79 Firefox 71
Disabled
71
Disabled
Disabled From version 71: this feature is behind the dom.media.mediasession.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera Yes Safari ? WebView Android No Chrome Android 57 Firefox Android No Opera Android No Safari iOS ? Samsung Internet Android 7.0
setPositionState()
Chrome 73 Edge ≤79 Firefox No IE No Opera Yes Safari ? WebView Android No Chrome Android 57 Firefox Android No Opera Android No Safari iOS ? Samsung Internet Android 7.0

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
用户必须明确启用此特征。
用户必须明确启用此特征。