diff options
Diffstat (limited to 'files/zh-cn/web/api/mediasession/index.html')
-rw-r--r-- | files/zh-cn/web/api/mediasession/index.html | 141 |
1 files changed, 141 insertions, 0 deletions
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 +--- +<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> |