From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/mediasource/index.html | 128 +++++++++++++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 files/zh-cn/web/api/mediasource/index.html (limited to 'files/zh-cn/web/api/mediasource/index.html') diff --git a/files/zh-cn/web/api/mediasource/index.html b/files/zh-cn/web/api/mediasource/index.html new file mode 100644 index 0000000000..bd15ef934d --- /dev/null +++ b/files/zh-cn/web/api/mediasource/index.html @@ -0,0 +1,128 @@ +--- +title: MediaSource +slug: Web/API/MediaSource +translation_of: Web/API/MediaSource +--- +

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

+ +

MediaSource是Media Source Extensions API 表示媒体资源{{domxref("HTMLMediaElement")}}对象的接口。MediaSource 对象可以附着在{{domxref("HTMLMediaElement")}}在客户端进行播放。

+ +

构造函数

+ +
+
{{domxref("MediaSource.MediaSource", "MediaSource()")}}
+
构造并且返回一个新的MediaSource的空对象（with no associated source buffers）。
+
+ +

属性

+ +
+
{{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}
+
返回一个{{domxref("SourceBufferList")}} 对象，包含了这个MediaSource的{{domxref("SourceBuffer")}}的对象列表。
+
{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}
+
返回一个 {{domxref("SourceBufferList")}} 对象，包含了这个{{domxref("MediaSource.sourceBuffers")}}中的{{domxref("SourceBuffer")}} 子集的对象—即提供当前被选中的视频轨 (video track)，启用的音频轨 (audio tracks) 以及显示/隐藏的字幕轨 (text tracks) 的对象列表。
+
 
+
{{domxref("MediaSource.readyState")}} {{readonlyInline}}
+
返回一个包含当前MediaSource状态的集合，即使它当前没有附着到一个media元素(closed)，或者已附着并准备接收{{domxref("SourceBuffer")}} 对象 (open)，亦或者已附着但这个流已被{{domxref("MediaSource.endOfStream()")}}关闭(ended.)
+
{{domxref("MediaSource.duration")}}
+
获取和设置当前正在推流媒体的持续时间。
+
+ +
+
+ +
+
+ +

方法

+ +

从父接口{{domxref("EventTarget")}}上继承而来。

+ +
+
{{domxref("MediaSource.addSourceBuffer()")}}
+
创建一个带有给定MIME类型的新的 {{domxref("SourceBuffer")}} 并添加到 MediaSource 的 {{domxref("SourceBuffers")}} 列表。
+
{{domxref("MediaSource.removeSourceBuffer()")}}
+
删除指定的{{domxref("SourceBuffer")}} 从这个MediaSource对象中的 {{domxref("SourceBuffers")}}列表。
+
{{domxref("MediaSource.endOfStream()")}}
+
表示流的结束。
+
+

静态方法

+
+
{{domxref("MediaSource.isTypeSupported()")}}
+
返回一个 {{domxref("Boolean")}} 值表明给定的MIME类型是否被当前的浏览器支持——这意味着是否可以成功的创建这个MIME类型的{{domxref("SourceBuffer")}} 对象。
+
+ +

示例

+ +

这个例子尽可能快地逐块加载视频，并在加载好后立刻播放。 这个示例是由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();
+};
+ +

说明

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

浏览器支持情况

+ +
+

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

+
+ +

See also

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