From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/sourcebuffer/appendbuffer/index.html | 64 +++++++++ files/zh-cn/web/api/sourcebuffer/index.html | 160 +++++++++++++++++++++ files/zh-cn/web/api/sourcebuffer/mode/index.html | 96 +++++++++++++ 3 files changed, 320 insertions(+) create mode 100644 files/zh-cn/web/api/sourcebuffer/appendbuffer/index.html create mode 100644 files/zh-cn/web/api/sourcebuffer/index.html create mode 100644 files/zh-cn/web/api/sourcebuffer/mode/index.html (limited to 'files/zh-cn/web/api/sourcebuffer') diff --git a/files/zh-cn/web/api/sourcebuffer/appendbuffer/index.html b/files/zh-cn/web/api/sourcebuffer/appendbuffer/index.html new file mode 100644 index 0000000000..6127a477a7 --- /dev/null +++ b/files/zh-cn/web/api/sourcebuffer/appendbuffer/index.html @@ -0,0 +1,64 @@ +--- +title: SourceBuffer.appendBuffer() +slug: Web/API/SourceBuffer/appendBuffer +translation_of: Web/API/SourceBuffer/appendBuffer +--- +
{{draft}}{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}
+ +
appendBuffer()方法将媒体片段数据添加到SourceBuffer对象中，其中媒体片段用{{domxref("ArrayBuffer")}} 或 ArrayBufferView 对象存储 。
+ +

Syntax

+ +
sourceBuffer.appendBuffer(source);
+
+ +

Parameters

+ +
+
source
+
一个 {{domxref("BufferSource")}} 对象（{{domxref("ArrayBufferView")}} 或 {{domxref("ArrayBuffer")}}），存储了你要添加到 SourceBuffer 中去的媒体片段数据。
+
+ +

Return value

+ +

undefined.

+ +

Exceptions

+ +

None.

+ +

Example

+ +

TBD.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Source Extensions', '#widl-SourceBuffer-appendBuffer-void-ArrayBuffer-data', 'appendBuffer()')}}{{Spec2('Media Source Extensions')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.SourceBuffer.appendBuffer")}}

+
+ +

See also

+ + diff --git a/files/zh-cn/web/api/sourcebuffer/index.html b/files/zh-cn/web/api/sourcebuffer/index.html new file mode 100644 index 0000000000..447d6f29b8 --- /dev/null +++ b/files/zh-cn/web/api/sourcebuffer/index.html @@ -0,0 +1,160 @@ +--- +title: SourceBuffer +slug: Web/API/SourceBuffer +tags: + - API + - Audio + - Experimental + - Interface + - MSE + - Media Source Extensions + - NeedsTranslation + - Reference + - SourceBuffer + - TopicStub + - Video +translation_of: Web/API/SourceBuffer +--- +

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

+ +

The SourceBuffer interface represents a chunk of media to be passed into an {{domxref("HTMLMediaElement")}} and played, via a {{domxref("MediaSource")}} object. This can be made up of one or several media segments.

+ +

{{InheritanceDiagram}}

+ +

Properties

+ +
+
{{domxref("SourceBuffer.appendWindowEnd")}}
+
Controls the timestamp for the end of the append window.
+
{{domxref("SourceBuffer.appendWindowStart")}}
+
Controls the timestamp for the start of the append window. This is a timestamp range that can be used to filter what media data is appended to the SourceBuffer. Coded media frames with timestamps within this range will be appended, whereas those outside the range will be filtered out.
+
{{domxref("SourceBuffer.audioTracks")}} {{readonlyInline}}
+
A list of the audio tracks currently contained inside the SourceBuffer.
+
{{domxref("SourceBuffer.buffered")}} {{readonlyInline}}
+
Returns the time ranges that are currently buffered in the SourceBuffer.
+
{{domxref("SourceBuffer.mode")}}
+
Controls how the order of media segments in the SourceBuffer is handled, in terms of whether they can be appended in any order, or they have to be kept in a strict sequence.
+
{{domxref("SourceBuffer.textTracks")}} {{readonlyInline}}
+
A list of the text tracks currently contained inside the SourceBuffer.
+
{{domxref("SourceBuffer.timestampOffset")}}
+
Controls the offset applied to timestamps inside media segments that are subsequently appended to the SourceBuffer.
+
{{domxref("SourceBuffer.trackDefaults")}}
+
Specifies the default values to use if kind, label, and/or language information is not available in the initialization segment of the media to be appended to the SourceBuffer.
+
{{domxref("SourceBuffer.updating")}} {{readonlyInline}}
+
A boolean indicating whether the SourceBuffer is currently being updated — i.e. whether an {{domxref("SourceBuffer.appendBuffer()")}}, {{domxref("SourceBuffer.appendStream()")}}, or {{domxref("SourceBuffer.remove()")}} operation is currently in progress.
+
{{domxref("SourceBuffer.videoTracks")}} {{readonlyInline}}
+
A list of the video tracks currently contained inside the SourceBuffer.
+
+ +

Event handlers

+ +
+
{{domxref("SourceBuffer.onabort")}}
+
Fired whenever {{domxref("SourceBuffer.appendBuffer()")}} or {{domxref("SourceBuffer.appendStream()")}} is ended by a call to {{domxref("SourceBuffer.abort()")}}. {{domxref("SourceBuffer.updating")}} changes from true to false.
+
{{domxref("SourceBuffer.onerror")}}
+
Fired whenever an error occurs during {{domxref("SourceBuffer.appendBuffer()")}} or {{domxref("SourceBuffer.appendStream()")}}. {{domxref("SourceBuffer.updating")}} changes from true to false.
+
{{domxref("SourceBuffer.onupdate")}}
+
Fired whenever {{domxref("SourceBuffer.appendBuffer()")}} method or the {{domxref("SourceBuffer.remove()")}} completes. {{domxref("SourceBuffer.updating")}} changes from true to false. This event is fired before onupdateend.
+
{{domxref("SourceBuffer.onupdateend")}}
+
Fired whenever {{domxref("SourceBuffer.appendBuffer()")}} method or the {{domxref("SourceBuffer.remove()")}} has ended. This event is fired after onupdate.
+
{{domxref("SourceBuffer.onupdatestart")}}
+
Fired whenever the value of {{domxref("SourceBuffer.updating")}} transitions from false to true.
+
+ +

Methods

+ +

Inherits methods from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("SourceBuffer.abort()")}}
+
Aborts the current segment and resets the segment parser.
+
{{domxref("SourceBuffer.appendBuffer()")}}
+
Appends media segment data from an {{domxref("ArrayBuffer")}} or {{domxref("ArrayBufferView")}} object to the SourceBuffer.
+
{{domxref("SourceBuffer.appendBufferAsync()")}} {{experimental_inline}}
+
Starts the process of asynchronously appending the specified buffer to the SourceBuffer. Returns a {{jsxref("Promise")}} which is fulfilled once the buffer has been appended.
+
{{domxref("SourceBuffer.appendStream()")}}
+
Appends media segment data from a ReadableStream object to the SourceBuffer.
+
{{domxref("SourceBuffer.changeType()")}}
+
Changes the {{Glossary("MIME type")}} that future calls to {{domxref("SourceBuffer.appendBuffer", "appendBuffer()")}} will expect the new data to conform to.
+
{{domxref("SourceBuffer.remove()")}}
+
Removes media segments within a specific time range from the SourceBuffer.
+
{{domxref("SourceBuffer.removeAsync()")}} {{experimental_inline}}
+
Starts the process of asynchronously removing media segments in the specified range from the SourceBuffer. Returns a {{jsxref("Promise")}} which is fulfilled once all matching segments have been removed.
+
+ +

Examples

+ +

The following simple example loads a video chunk by chunk as fast as possible, playing it as soon as it can. This example was written by Nick Desaulniers and can be viewed live here (you can also download the source for further investigation.)

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

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Source Extensions', '#sourcebuffer', 'SourceBuffer')}}{{Spec2('Media Source Extensions')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.SourceBuffer")}}

+
+ +

See also

+ + diff --git a/files/zh-cn/web/api/sourcebuffer/mode/index.html b/files/zh-cn/web/api/sourcebuffer/mode/index.html new file mode 100644 index 0000000000..369280a54e --- /dev/null +++ b/files/zh-cn/web/api/sourcebuffer/mode/index.html @@ -0,0 +1,96 @@ +--- +title: SourceBuffer.mode +slug: Web/API/SourceBuffer/mode +translation_of: Web/API/SourceBuffer/mode +--- +
{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}
+ +

{{domxref("SourceBuffer")}} 接口的 mode 属性用来控制媒体片段添加到SourceBuffer 时的顺序是可以任意的还是有严格顺序的。

+ +

两个可用的值:

+ + + +

moder的值最初是在使用mediasource.addsourcebuffer（）创建sourcebuffer时设置的。如果媒体片段上已经存在时间戳，则该值将设置为segments；如果没有，则该值将设置为sequence.

+ +

如果mode初始值为sequence想要改为segments则会引发错误, 必须以sequence模式维护现有段顺序。但是，可以将值从segments模式改为sequence模式。它意味着播放顺序将被固定，并会生成新的时间戳。

+ +

当 sourceBuffer 正在处理时mode的值无法改变，如 {{domxref("SourceBuffer.appendBuffer","appendBuffer()")}} 或 {{domxref("SourceBuffer.remove","remove()")}} .

+ +

Syntax

+ +
var myMode = sourceBuffer.mode;
+
+sourceBuffer.mode = 'sequence';
+
+ +

Value

+ +

A {{domxref("DOMString")}}.

+ +

Errors

+ +

The following errors may be thrown when setting a new value for this property.

+ + + + + + + + + + + + + + + + + + +
ErrorExplanation
InvalidAccessErrorAn attempt was made to set the value to segments when the initial value is sequence.
InvalidStateErrorThe {{domxref("SourceBuffer")}} object is being updated (i.e. its {{domxref("SourceBuffer.updating")}} property is currently true), the last media segment appended to this SourceBuffer is incomplete, or this SourceBuffer has been removed from the {{domxref("MediaSource")}}.
+ +

Example

+ +

此代码段是将sourcebuffer的模式设置为“sequence”（如果当前设置为“segments”），假如原先的播放顺序为segments.

+ +
var curMode = sourceBuffer.mode;
+if (curMode == 'segments') {
+  sourceBuffer.mode = 'sequence';
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Source Extensions', '#widl-SourceBuffer-mode', 'mode')}}{{Spec2('Media Source Extensions')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.SourceBuffer.mode")}}

+
+ +

See also

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