From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- .../api/mediasource/activesourcebuffers/index.html | 126 +++++++++++++++++ .../zh-tw/web/api/mediasource/duration/index.html | 149 +++++++++++++++++++++ files/zh-tw/web/api/mediasource/index.html | 144 ++++++++++++++++++++ .../web/api/mediasource/mediasource/index.html | 122 +++++++++++++++++ .../web/api/mediasource/readystate/index.html | 136 +++++++++++++++++++ 5 files changed, 677 insertions(+) create mode 100644 files/zh-tw/web/api/mediasource/activesourcebuffers/index.html create mode 100644 files/zh-tw/web/api/mediasource/duration/index.html create mode 100644 files/zh-tw/web/api/mediasource/index.html create mode 100644 files/zh-tw/web/api/mediasource/mediasource/index.html create mode 100644 files/zh-tw/web/api/mediasource/readystate/index.html (limited to 'files/zh-tw/web/api/mediasource') diff --git a/files/zh-tw/web/api/mediasource/activesourcebuffers/index.html b/files/zh-tw/web/api/mediasource/activesourcebuffers/index.html new file mode 100644 index 0000000000..90777f675c --- /dev/null +++ b/files/zh-tw/web/api/mediasource/activesourcebuffers/index.html @@ -0,0 +1,126 @@ +--- +title: MediaSource.activeSourceBuffers +slug: Web/API/MediaSource/activeSourceBuffers +translation_of: Web/API/MediaSource/activeSourceBuffers +--- +
{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}
+ +

activeSourceBuffers 是 {{domxref("MediaSource")}} 介面的唯讀屬性，回傳一個 {{domxref("SourceBufferList")}} 物件，含有在 {{domxref("SourceBuffers")}} 之中的 {{domxref("SourceBuffer")}} 物件子集合—物件的串列提供被選擇的影片軌 (video track), 啟用的音軌 (audio tracks), 以及顯示或隱藏的字軌。

+ +

語法

+ +
var myActiveSourceBuffers = mediaSource.activeSourceBuffers;
+ +

回傳值

+ +

一個 {{domxref("SourceBufferList")}} 。

+ +

範例

+ +

以下的片段基於 Nick Desaulniers 所編纂的簡單範例（觀看實際演示，或者下載原始碼 以利更進一步研究。）

+ +
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();
+      console.log(mediaSource.activeSourceBuffers);
+      // will contain the source buffer that was added above,
+      // as it is selected for playing in the video player
+      video.play();
+      //console.log(mediaSource.readyState); // ended
+    });
+    sourceBuffer.appendBuffer(buf);
+  });
+};
+
+...
+ +

規格

+ + + + + + + + + + + + + + +
規格狀態注釋
{{SpecName('Media Source Extensions', '#widl-MediaSource-activeSourceBuffers', 'activeSourceBuffers')}}{{Spec2('Media Source Extensions')}}Initial definition.
+ +

相容性表格

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support23{{CompatVersionUnknown}}{{CompatGeckoDesktop("25.0")}}[1]
+ {{CompatGeckoDesktop("42.0")}}		11[2]158
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.4.4{{CompatVersionUnknown}} +

{{CompatNo}}

+ 		{{CompatNo}}1130{{CompatNo}}
+
+ +

[1] 在切換 about:config 偏好設定 media.mediasource.enabled 為 true 時可以使用。此外，支援只限於白名單內的網站，如：YouTube, Netflix, 以及其他熱門的串流網站。白名單已經被移除且 Media Source Extensions 在 42+ 對所有網站已預設為啟用。

+ +

[2] 只在 Windows 8+ 上有效。

+ +

相關資料

+ + diff --git a/files/zh-tw/web/api/mediasource/duration/index.html b/files/zh-tw/web/api/mediasource/duration/index.html new file mode 100644 index 0000000000..b9fab966e4 --- /dev/null +++ b/files/zh-tw/web/api/mediasource/duration/index.html @@ -0,0 +1,149 @@ +--- +title: MediaSource.duration +slug: Web/API/MediaSource/duration +translation_of: Web/API/MediaSource/duration +--- +
{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}
+ +

{{domxref("MediaSource")}} 介面的 duration 屬性用來取得以及設置正被表示的媒體時間長度。

+ +

語法

+ +
mediaSource.duration = 5.5; // 5.5 seconds
+
+var myDuration = mediaSource.duration;
+ +

回傳值

+ +

單位為秒的 double 型別。

+ +

錯誤

+ +

當設置此屬性一個新的值時以下錯誤可能發生。

+ + + + + + + + + + + + + + + + + + +
錯誤解釋
InvalidAccessError嘗試設置的時間長度是負值，或者 NaN。
InvalidStateError{{domxref("MediaSource.readyState")}} 不是 open，或者 {{domxref("MediaSource.sourceBuffers")}} 中一個或多個以上的 {{domxref("SourceBuffer")}} 物件正在被更新（例如：他們的 {{domxref("SourceBuffer.updating")}} 屬性為 true。）
+ +

範例

+ +

以下的片段基於 Nick Desaulniers 所編纂的簡單範例（觀看實際演示，或者下載原始碼以利更進一步研究。）

+ +
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();
+      mediaSource.duration = 120;
+      video.play();
+      //console.log(mediaSource.readyState); // ended
+    });
+    sourceBuffer.appendBuffer(buf);
+  });
+};
+
+...
+ +

規格

+ + + + + + + + + + + + + + +
規格狀態注釋
{{SpecName('Media Source Extensions', '#widl-MediaSource-duration', 'duration')}}{{Spec2('Media Source Extensions')}}Initial definition.
+ +

相容性表格

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support23{{CompatVersionUnknown}}{{CompatGeckoDesktop("25.0")}}[1]
+ {{CompatGeckoDesktop("42.0")}}		11[2]158
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.4.4{{CompatVersionUnknown}} +

{{CompatNo}}

+ 		{{CompatNo}}1130{{CompatNo}}
+
+ +

[1] 在切換 about:config 偏好設定 media.mediasource.enabled 為 true時可以使用。此外，支援只限於白名單內的網站，如：YouTube, Netflix, 以及其他熱門的串流網站。白名單已經被移除且 Media Source Extensions 在 42+ 對所有網站已預設為啟用。

+ +

[2] 只在 Windows 8+ 上有效。

+ +

相關資料

+ + diff --git a/files/zh-tw/web/api/mediasource/index.html b/files/zh-tw/web/api/mediasource/index.html new file mode 100644 index 0000000000..0006121f46 --- /dev/null +++ b/files/zh-tw/web/api/mediasource/index.html @@ -0,0 +1,144 @@ +--- +title: MediaSource +slug: Web/API/MediaSource +translation_of: Web/API/MediaSource +--- +

{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}

+ +

Media Source Extensions API 的 MediaSource 介面代表 {{domxref("HTMLMediaElement")}} 物件的媒體資料來源。一個 MediaSource 物件可以被附加到一個 {{domxref("HTMLMediaElement")}} 以被用戶代理 (user agent) 播放。

+ +

{{InheritanceDiagram}}

+ +

建構子 (Constructor)

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

屬性 (Properties)

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

事件處理函數 (Event handlers)

+ + +
+
{{domxref("MediaSource.onsourceclose")}}
+
sourceclose 事件的事件處理函數。
+
{{domxref("MediaSource.onsourceended")}}
+
sourceended 事件的事件處理函數。
+
{{domxref("MediaSource.onsourceopen")}}
+
sourceopen 事件的事件處理函數。
+
+ +
+
+ +
+
+ +

方法 (Methods)

+ +

從親介面 (parent interface) {{domxref("EventTarget")}} 繼承屬性。

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

靜態方法 (Static methods)

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

範例

+ +

以下簡單的範例儘快的載入一個個影片塊 (chunk) 且儘快的播放。這個範例是由 Nick Desaulniers 所撰寫且可以在此實際觀看（您也可以下載原始碼以更進一步研究）

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

規格

+ + + + + + + + + + + + + + +
規格狀態註釋
{{SpecName('Media Source Extensions', '#mediasource', 'MediaSource')}}{{Spec2('Media Source Extensions')}}Initial definition.
+ +

相容性表格

+ +
{{Compat("api.MediaSource")}}
+ +

相關資料

+ + diff --git a/files/zh-tw/web/api/mediasource/mediasource/index.html b/files/zh-tw/web/api/mediasource/mediasource/index.html new file mode 100644 index 0000000000..54e9e6dfef --- /dev/null +++ b/files/zh-tw/web/api/mediasource/mediasource/index.html @@ -0,0 +1,122 @@ +--- +title: MediaSource.MediaSource() +slug: Web/API/MediaSource/MediaSource +translation_of: Web/API/MediaSource/MediaSource +--- +
{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}
+ +

{{domxref("MediaSource")}} 介面的 MediaSource() 建構子建構且回傳一個沒有與任何來源緩衝 (source buffer) 關聯的新 MediaSource 物件。

+ +

語法

+ +
var mediaSource = new MediaSource();
+ +

參數

+ +

無。

+ +

範例

+ +

以下的片段擷取自 Nick Desaulniers 所編纂的簡單範例（觀看實際演示，或者下載原始碼 以利更進一步研究。）

+ +
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 && 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);
+}
+
+...
+
+ +

規格

+ + + + + + + + + + + + + + +
規格狀態註釋
{{SpecName('Media Source Extensions', '#mediasource', 'MediaSource')}}{{Spec2('Media Source Extensions')}}Initial definition.
+ +

相容性表格

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support23{{CompatGeckoDesktop("25.0")}}[1]
+ {{CompatGeckoDesktop("42.0")}}		11[2]158
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.4.4 +

{{CompatNo}}

+ 		{{CompatNo}}1130{{CompatNo}}
+
+ +

[1] 在切換 about:config 偏好設定 media.mediasource.enabled 為 true 時可以使用。此外，支援只限於白名單內的網站，如：YouTube, Netflix, 以及其他熱門的串流網站。白名單已經被移除且 Media Source Extensions 在 42+ 對所有網站已預設為啟用。

+ +

[2] 只在 Windows 8+ 上有效。

+ +

相關資料

+ + diff --git a/files/zh-tw/web/api/mediasource/readystate/index.html b/files/zh-tw/web/api/mediasource/readystate/index.html new file mode 100644 index 0000000000..b7e5f1835b --- /dev/null +++ b/files/zh-tw/web/api/mediasource/readystate/index.html @@ -0,0 +1,136 @@ +--- +title: MediaSource.readyState +slug: Web/API/MediaSource/readyState +translation_of: Web/API/MediaSource/readyState +--- +
{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}
+ +

{{domxref("MediaSource")}} 介面的唯讀屬性 readyState 回傳表示當前 MediaSource 狀態的列舉值。三種可能的值為：

+ + + +

語法

+ +
var myReadyState = mediaSource.readyState;
+ +

回傳值

+ +

一個 {{domxref("DOMString")}}。

+ +

範例

+ +

以下片段是由 Nick Desaulniers 所撰寫的簡單範例（在此實際觀看，或者下載原始碼以更進一步研究）

+ +
if ('MediaSource' in window && 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);
+  });
+};
+ +

規格

+ + + + + + + + + + + + + + +
規格狀態註釋
{{SpecName('Media Source Extensions', '#widl-MediaSource-readyState', 'readyState')}}{{Spec2('Media Source Extensions')}}Initial definition.
+ +

相容性表格

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support23{{CompatVersionUnknown}}{{CompatGeckoDesktop("25.0")}}[1]
+ {{CompatGeckoDesktop("42.0")}}		11[2]158
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.4.4{{CompatVersionUnknown}} +

{{CompatNo}}

+ 		{{CompatNo}}1130{{CompatNo}}
+
+ +

[1] 在切換 about:config preference media.mediasource.enabled 為 true 時可以使用。此外，支援只限於白名單內的網站，如：YouTube, Netflix, 以及其他熱門的串流網站。白名單已經被移除且 Media Source Extensions 在 42+ 對所有網站已預設為啟用。

+ +

[2] 只在 Windows 8+ 上有效。

+ +

相關資料

+ + -- cgit v1.2.3-54-g00ecf