---
title: MediaSource
slug: Web/API/MediaSource
translation_of: Web/API/MediaSource
---
<p>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</p>

<p><a href="/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions API</a> 的 <strong><code>MediaSource</code></strong> 介面代表 {{domxref("HTMLMediaElement")}} 物件的媒體資料來源。一個 <code>MediaSource</code> 物件可以被附加到一個 {{domxref("HTMLMediaElement")}} 以被用戶代理 (user agent) 播放。</p>

<p>{{InheritanceDiagram}}</p>

<h2 id="建構子_Constructor">建構子 (Constructor)</h2>

<dl>
 <dt>{{domxref("MediaSource.MediaSource", "MediaSource()")}}</dt>
 <dd>建構且回傳一個新的 <code>MediaSource</code> 物件但不與任何來源緩衝 (source buffers) 關聯 (associate)。</dd>
</dl>

<h2 id="屬性_Properties">屬性 (Properties)</h2>

<dl>
 <dt>{{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}</dt>
 <dd>回傳一個含有與此 <code>MediaSource</code> 關聯的 {{domxref("SourceBuffer")}} 物件串列的 {{domxref("SourceBufferList")}} 物件。</dd>
 <dt>{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}</dt>
 <dd>回傳一個 {{domxref("SourceBufferList")}} 物件，含有 {{domxref("SourceBuffers")}} 的子集合 {{domxref("SourceBuffer")}} 物件 — 物件的串列提供被選擇的影片軌 (video track), 啟用的音軌 (audio tracks), 以及顯示或隱藏的字軌。</dd>
 <dt>{{domxref("MediaSource.readyState")}} {{readonlyInline}}</dt>
 <dd>回傳一個列舉類型表示目前 <code>MediaSource</code> 的狀態：沒有附加到媒體元件 (<code>closed</code>)，已經附加且可以接收 {{domxref("SourceBuffer")}} 物件 (<code>open</code>)，已經附加但是串流已經經由 {{domxref("MediaSource.endOfStream()")}} 結束 (<code>ended</code>)。</dd>
 <dt>{{domxref("MediaSource.duration")}}</dt>
 <dd>取得或設置現在正被表示的媒體的時間長度。</dd>
 <dt>
 <h3 id="事件處理函數_Event_handlers">事件處理函數 (Event handlers)</h3>


 </dt>
 <dt>{{domxref("MediaSource.onsourceclose")}}</dt>
 <dd><code>sourceclose</code> 事件的事件處理函數。</dd>
 <dt>{{domxref("MediaSource.onsourceended")}}</dt>
 <dd><code>sourceended</code> 事件的事件處理函數。</dd>
 <dt>{{domxref("MediaSource.onsourceopen")}}</dt>
 <dd><code>sourceopen</code> 事件的事件處理函數。</dd>
</dl>

<dl>
</dl>

<dl>
</dl>

<h2 id="方法_Methods">方法 (Methods)</h2>

<p><em>從親介面 (parent interface) {{domxref("EventTarget")}} 繼承屬性。</em></p>

<dl>
 <dt>{{domxref("MediaSource.addSourceBuffer()")}}</dt>
 <dd>依據指定的 MIME 類型建立一個新的 {{domxref("SourceBuffer")}} 且將其加入 <code>MediaSource</code> 的 {{domxref("SourceBuffers")}} 串列。</dd>
 <dt>{{domxref("MediaSource.clearLiveSeekableRange()")}}</dt>
 <dd>清除先前藉由呼叫 <code>setLiveSeekableRange()</code> 所設定的可尋找範圍。</dd>
 <dt>{{domxref("MediaSource.endOfStream()")}}</dt>
 <dd>示意串流的結束。</dd>
 <dt>{{domxref("MediaSource.removeSourceBuffer()")}}</dt>
 <dd>從與此 <code>MediaSource</code> 物件關聯的 {{domxref("SourceBuffers")}} 串列移除指定的 {{domxref("SourceBuffer")}}。</dd>
 <dt>{{domxref("MediaSource.setLiveSeekableRange()")}}</dt>
 <dd>設定使用者可以在媒體元素中的可尋找範圍。</dd>
</dl>

<h2 id="靜態方法_Static_methods">靜態方法 (Static methods)</h2>

<dl>
 <dt>{{domxref("MediaSource.isTypeSupported()")}}</dt>
 <dd>回傳一個 {{domxref("Boolean")}} 值表示指定的 MIME 類型是否被現在的用戶代理支援 — 意即可否成功的為該 MIME 類型建立 {{domxref("SourceBuffer")}} 物件。</dd>
</dl>

<h2 id="範例">範例</h2>

<p>以下簡單的範例儘快的載入一個個影片塊 (chunk) 且儘快的播放。這個範例是由 Nick Desaulniers 所撰寫且可以<a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">在此實際觀看</a>（您也可以<a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">下載原始碼</a>以更進一步研究）</p>

<pre class="brush: js notranslate">var video = document.querySelector('video');

var assetURL = 'frag_bunny.mp4';
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

if ('MediaSource' in window &amp;&amp; MediaSource.isTypeSupported(mimeCodec)) {
  var mediaSource = new MediaSource();
  //console.log(mediaSource.readyState); // closed
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
  console.error('Unsupported MIME type or codec: ', mimeCodec);
}

function sourceOpen (_) {
  //console.log(this.readyState); // open
  var mediaSource = this;
  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, function (buf) {
    sourceBuffer.addEventListener('updateend', function (_) {
      mediaSource.endOfStream();
      video.play();
      //console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
};

function fetchAB (url, cb) {
  console.log(url);
  var xhr = new XMLHttpRequest;
  xhr.open('get', url);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function () {
    cb(xhr.response);
  };
  xhr.send();
};</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 Source Extensions', '#mediasource', 'MediaSource')}}</td>
   <td>{{Spec2('Media Source Extensions')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="相容性表格">相容性表格</h2>

<div>{{Compat("api.MediaSource")}}</div>

<h2 id="相關資料">相關資料</h2>

<ul>
 <li>{{domxref("SourceBuffer")}}</li>
 <li>{{domxref("SourceBufferList")}}</li>
</ul>