From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/mediasession/index.html | 141 +++++++++++++++++++++ .../api/mediasession/setactionhandler/index.html | 93 ++++++++++++++ 2 files changed, 234 insertions(+) create mode 100644 files/zh-cn/web/api/mediasession/index.html create mode 100644 files/zh-cn/web/api/mediasession/setactionhandler/index.html (limited to 'files/zh-cn/web/api/mediasession') diff --git a/files/zh-cn/web/api/mediasession/index.html b/files/zh-cn/web/api/mediasession/index.html new file mode 100644 index 0000000000..c704454eec --- /dev/null +++ b/files/zh-cn/web/api/mediasession/index.html @@ -0,0 +1,141 @@ +--- +title: MediaSession +slug: Web/API/MediaSession +tags: + - API + - Media Session API + - MediaSession + - 媒体 + - 引用 + - 接口 + - 视频 + - 音频 +translation_of: Web/API/MediaSession +--- +

{{SeeCompatTable}}{{APIRef("Media Session API")}}

+ +

Media Session API 的 MediaSession 接口允许页面为标准媒体交互提供自定义行为.

+ +

属性

+ +
+
{{domxref("MediaSession.metadata")}}
+
指向一个 {{domxref("MediaMetadata")}} 的实例,其包含富媒体的元数据. 该数据将用于平台显示.
+
{{domxref("MediaSession.playbackState")}}
+
展示当前mediasession是否处于播放状态. 有效值为"none", "paused",  "playing".
+
+ +

方法

+ +
+
{{domxref("MediaSession.setActionHandler()")}}
+
设置一个监听mediasession动作(如 play 或者 pause)的事件句柄. 浏览方法页以获取所有动作的列表.
+
+ +

例子

+ +

下面的例子创建了一个新的media session,并且给其绑定了一些动作句柄:

+ +
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() {});
+}
+ +

下面例子为暂停和播放设置了时间句柄:

+ +
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";
+}
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Session','#the-mediasession-interface','MediaSession')}}{{Spec2('Media Session')}}Initial definition.
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
diff --git a/files/zh-cn/web/api/mediasession/setactionhandler/index.html b/files/zh-cn/web/api/mediasession/setactionhandler/index.html new file mode 100644 index 0000000000..5f1d4847f7 --- /dev/null +++ b/files/zh-cn/web/api/mediasession/setactionhandler/index.html @@ -0,0 +1,93 @@ +--- +title: MediaSession.setActionHandler() +slug: Web/API/MediaSession/setActionHandler +translation_of: Web/API/MediaSession/setActionHandler +--- +

{{APIRef("Media Session API")}}{{SeeCompatTable}}

+ +

{{domxref("MediaSession")}} 接口的属性 setActionHandler() 为media session动作设置一个监听器。这些动作让网页程序在用户操作设备的内置物理或屏上媒体控制项时收到消息，例如播放、停止或搜寻按钮。

+ +

语法

+ +
navigator.mediaSession.setActionHandler(type, callback)
+ +

参数

+ +
+
type
+
一个提供要监听的动作类型的 {{domxref("DOMString")}} 。它可以是 play、pause、seekbackward、seekforward、previoustrack 或 nexttrack。
+
callback
+
一个在指定动作被调用时要调用的方法。回调方法不会收到参数，并且不应该返回值。
+
+ +

返回值

+ +

undefined。

+ +

使用说明

+ +

要移除一个已经存在的监听器，再调用一次 setActionHandler() ，将 null 作为回调方法。

+ +

示例

+ +

下面的示例创建一个新的media session并且为它添加监听器（不做任何事情）。

+ +
if ('mediaSession' in navigator){
+  navigator.mediaSession.metadata = new MediaMetadata({
+    title: "播客音乐名字",
+    artist: "播客主持人",
+    album: "播客名字",
+    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() {});
+}
+
+ +

这个示例使用了适当的监听器来允许在不同的方向搜寻正在播放的媒体。

+ +
let skipTime = 10; // 要跳过的秒数
+
+navigator.mediaSession.setActionHandler('seekbackward', evt => {
+  // 用户点击了“向后搜寻”的媒体按钮
+  audio.currentTime = Math.max(audio.currentTime - skipTime, 0);
+});
+
+navigator.mediaSession.setActionHandler('seekforward', evt => {
+  // 用户点击了“向前搜寻”的媒体按钮
+  audio.currentTime = Math.min(audio.currentTime + skipTime,
+                               audio.duration);
+});
+ +

要移除一个监听器，将它设为null。

+ +
navigator.mediaSession.setActionHandler('nexttrack', null);
+ +

技术指标

+ + + + + + + + + + + + + + +
技术指标状态注释
{{SpecName('Media Session','#dom-mediasession-setactionhandler','MediaSession.setActionHandler()')}}{{Spec2('Media Session')}}初始定义。
+ +

浏览器兼容性

+ +
+ + +

{{Compat("api.MediaSession.setActionHandler")}}

+
-- cgit v1.2.3-54-g00ecf