1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
---
title: MediaSession
slug: Web/API/MediaSession
tags:
- API
- Media Session API
- MediaSession
- 媒体
- 引用
- 接口
- 视频
- 音频
translation_of: Web/API/MediaSession
---
<p>{{SeeCompatTable}}{{APIRef("Media Session API")}}</p>
<p><a href="/en-US/docs/Web/API/Media_Session_API">Media Session API</a> 的 <strong><code>MediaSession</code></strong> 接口允许页面为标准媒体交互提供自定义行为.</p>
<h2 id="属性">属性</h2>
<dl>
<dt>{{domxref("MediaSession.metadata")}}</dt>
<dd>指向一个 {{domxref("MediaMetadata")}} 的实例,其包含富媒体的元数据. 该数据将用于平台显示.</dd>
<dt>{{domxref("MediaSession.playbackState")}}</dt>
<dd>展示当前mediasession是否处于播放状态. 有效值为<code>"none"</code>, <code>"paused"</code>, <code>"playing"</code>.</dd>
</dl>
<h2 id="方法">方法</h2>
<dl>
<dt>{{domxref("MediaSession.setActionHandler()")}}</dt>
<dd>设置一个监听mediasession动作(如 play 或者 pause)的事件句柄. 浏览方法页以获取所有动作的列表.</dd>
</dl>
<h2 id="例子">例子</h2>
<p>下面的例子创建了一个新的media session,并且给其绑定了一些动作句柄:</p>
<pre class="brush: js">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() {});
}</pre>
<p>下面例子为暂停和播放设置了时间句柄:</p>
<pre class="brush: js">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";
}</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Media Session','#the-mediasession-interface','MediaSession')}}</td>
<td>{{Spec2('Media Session')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android Webview</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}</td>
<td>{{CompatChrome(57)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
|
