initial commit

2 files changed, 234 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>
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
+---
+<p>{{APIRef("Media Session API")}}{{SeeCompatTable}}</p>
+
+<p>{{domxref("MediaSession")}} 接口的属性 <strong><code>setActionHandler()</code></strong> 为media session动作设置一个监听器。这些动作让网页程序在用户操作设备的内置物理或屏上媒体控制项时收到消息，例如播放、停止或搜寻按钮。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">navigator.mediaSession.setActionHandler(<em>type</em>, <em>callback</em>)</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>一个提供要监听的动作类型的 {{domxref("DOMString")}} 。它可以是 <code>play</code>、<code>pause</code>、<code>seekbackward</code>、<code>seekforward</code>、<code>previoustrack</code> 或 <code>nexttrack</code>。</dd>
+ <dt><code>callback</code></dt>
+ <dd>一个在指定动作被调用时要调用的方法。回调方法不会收到参数，并且不应该返回值。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p><code>undefined</code>。</p>
+
+<h2 id="使用说明">使用说明</h2>
+
+<p>要移除一个已经存在的监听器，再调用一次 <code>setActionHandler()</code> ，将 <code>null</code> 作为回调方法。</p>
+
+<h2 id="示例">示例</h2>
+
+<p>下面的示例创建一个新的media session并且为它添加监听器（不做任何事情）。</p>
+
+<pre class="brush: js">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() {});
+}
+</pre>
+
+<p>这个示例使用了适当的监听器来允许在不同的方向搜寻正在播放的媒体。</p>
+
+<pre class="brush: js">let skipTime = 10; // 要跳过的秒数
+
+navigator.mediaSession.setActionHandler('seekbackward', evt =&gt; {
+  // 用户点击了“向后搜寻”的媒体按钮
+  audio.currentTime = Math.max(audio.currentTime - skipTime, 0);
+});
+
+navigator.mediaSession.setActionHandler('seekforward', evt =&gt; {
+  // 用户点击了“向前搜寻”的媒体按钮
+  audio.currentTime = Math.min(audio.currentTime + skipTime,
+                               audio.duration);
+});</pre>
+
+<p>要移除一个监听器，将它设为null。</p>
+
+<pre class="brush: js">navigator.mediaSession.setActionHandler('nexttrack', null);</pre>
+
+<h2 id="技术指标">技术指标</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">技术指标</th>
+   <th scope="col">状态</th>
+   <th scope="col">注释</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Session','#dom-mediasession-setactionhandler','MediaSession.setActionHandler()')}}</td>
+   <td>{{Spec2('Media Session')}}</td>
+   <td>初始定义。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>
+<div class="hidden">在这个页面上的兼容性表格是从结构数据生成的。如果你想要贡献数据，看看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并且向我们发起一个Pull Request</div>
+
+<p>{{Compat("api.MediaSession.setActionHandler")}}</p>
+</div>