recursal/MDN huggingface dataset:
Event.eventPhase
================

表示事件流当前处于哪一个阶段。

语法
--


```js
var phase = event.eventPhase;
```


返回一个代表当前执行阶段的整数值，下面列出了不同的执行阶段事件阶段常量。

常量
--

### 事件阶段常量

### 下面这些值表示了事件流当前执行的阶段

| 常量 | 值 | 描述 |
| --- | --- | --- |
| `Event.NONE` | 0 | 这个时间，没有事件正在被处理 |
| `Event.CAPTURING_PHASE` | 1 | 事件正在被目标元素的祖先对象处理。这个处理过程从`Window`开始，然后`Document`, 然后是`HTMLHtmlElement`, 一直这样，直到目标元素的父元素。通过`EventTarget.addEventListener()` 注册为捕获模式的Event listeners 被调用。 |
| `Event.AT_TARGET` | 2 | 事件对象已经抵达the event's target. 为这个阶段注册的事件监听被调用。如果 `Event.bubbles` 的值为 false，对事件对象的处理在这个阶段后就会结束。 |
| `Event.BUBBLING_PHASE` | 3 | 事件对象逆向向上传播回目标元素的祖先元素，从父亲元素开始，并且最终到达包含元素 `Window`. 这就是冒泡，并且只有`Event.bubbles` 值为 true 的时候才会发生。为这个阶段注册的Event listeners 在这个过程中被触发。 |

更多细节，请看section 3.1, Event dispatch and DOM event flow, DOM 级别 3 的事件说明。

示例
--

### HTML 内容


```html
<h4>Event Propagation Chain</h4>
<ul>
  <li>Click 'd1'</li>
  <li>Analyse event propagation chain</li>
  <li>Click next div and repeat the experience</li>
  <li>Change Capturing mode</li>
  <li>Repeat the experience</li>
</ul>
<input type="checkbox" id="chCapture" />
<label for="chCapture">Use Capturing</label>
<div id="d1">
  d1
  <div id="d2">
    d2
    <div id="d3">
      d3
      <div id="d4">d4</div>
    </div>
  </div>
</div>
<div id="divInfo"></div>
```

### CSS 内容


```css
div {
  margin: 20px;
  padding: 4px;
  border: thin black solid;
}

#divInfo {
  margin: 18px;
  padding: 8px;
  background-color: white;
  font-size: 80%;
}
```

### JavaScript 内容


```js
var clear = false,
  divInfo = null,
  divs = null,
  useCapture = false;
window.onload = function () {
  divInfo = document.getElementById("divInfo");
  divs = document.getElementsByTagName("div");
  chCapture = document.getElementById("chCapture");
  chCapture.onclick = function () {
    RemoveListeners();
    AddListeners();
  };
  Clear();
  AddListeners();
};

function RemoveListeners() {
  for (var i = 0; i < divs.length; i++) {
    var d = divs[i];
    if (d.id != "divInfo") {
      d.removeEventListener("click", OnDivClick, true);
      d.removeEventListener("click", OnDivClick, false);
    }
  }
}

function AddListeners() {
  for (var i = 0; i < divs.length; i++) {
    var d = divs[i];
    if (d.id != "divInfo") {
      d.addEventListener("click", OnDivClick, false);
      if (chCapture.checked) d.addEventListener("click", OnDivClick, true);
      d.onmousemove = function () {
        clear = true;
      };
    }
  }
}

function OnDivClick(e) {
  if (clear) {
    Clear();
    clear = false;
  }
  if (e.eventPhase == 2) e.currentTarget.style.backgroundColor = "red";
  var level =
    e.eventPhase == 0
      ? "none"
      : e.eventPhase == 1
        ? "capturing"
        : e.eventPhase == 2
          ? "target"
          : e.eventPhase == 3
            ? "bubbling"
            : "error";
  divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "<br/>";
}

function Clear() {
  for (var i = 0; i < divs.length; i++) {
    if (divs[i].id != "divInfo")
      divs[i].style.backgroundColor = i & 1 ? "#f6eedb" : "#cceeff";
  }
  divInfo.innerHTML = "";
}
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-eventphase③ |
Event.cancelable
================

`Event` 实例的只读属性 **`cancelable`** 表明该事件是否可以被取消，即事件是否可以像从未发生一样被阻止。

如果事件**不能**被取消，则其 `cancelable` 属性的值为 `false`，且事件发生时无法在事件监听回调中停止事件。

大部分由用户与页面交互产生的原生浏览器事件都可以被取消。取消 `click`、`wheel` (en-US) 或 `beforeunload` 事件将分别阻止用户点击某些元素、滚动页面或跳离页面。

使用 JavaScript 代码创建的自定义事件，可以在初始化事件的时候声明该事件是否可以被取消。

要取消一个事件的默认行为，可以调用该事件的 `preventDefault()` 方法。

对于同时处理多种事件的监听回调，可能需要先检查 `cancelable` 属性的值，再调用这些事件的 `preventDefault()` 方法。

值
-

为一个`布尔值` (en-US)。若事件可以被取消，其值为 `true`。

示例
--

例如，浏览器厂商提议 `wheel` (en-US) 事件只能在事件监听回调第一次执行时被取消，接下来的 `wheel` 事件都不能被取消。


```js
function preventScrollWheel(event) {
  if (typeof event.cancelable !== "boolean" || event.cancelable) {
    // The event can be canceled, so we do so.
    event.preventDefault();
  } else {
    // The event cannot be canceled, so it is not safe
    // to call preventDefault() on it.
    console.warn(`The following event couldn't be canceled:`);
    console.dir(event);
  }
}

document.addEventListener("wheel", preventScrollWheel);
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-cancelable② |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event.originalTarget
====================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

**`originalTarget`** 只读属性是事件重定向之前的原始目标。（Mozilla-特有）

在 XBL 的匿名内容中，这将是该事件最初触发的匿名节点。看到匿名的内容。查看Anonymous Content#Event\_Flow\_and\_Targeting 获取更多细节。

注意：原始目标也可能是原生的匿名内容，在这种情况下，它对于非特权代码是无用的。

参见事件目标对比。

规范
--

这是一个 Mozilla 特有的属性，不属于任何规范。它不会成为标准。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event.returnValue
=================

**`Event.returnValue`** 属性表示该事件的默认操作是否已被阻止。默认情况下，它被设置为 `true`，即允许进行默认操作。将该属性设置为 `false` 即可阻止默认操作。

**备注：** While `returnValue` has been adopted into the DOM standard, it is present primarily to support existing code. You should use `preventDefault()`, and `defaultPrevented` instead of this historical property.

语法
--
```

event.returnValue = bool;

var bool = event.returnValue;
```

### 值

A `Boolean` (en-US) value which is `true` if the event has not been canceled; otherwise, if the event has been canceled or the default has been prevented, the value is `false`.

The value returned by `returnValue` is the opposite of the value returned by `defaultPrevented`.

使用说明
----

`returnValue` was introduced into the DOM by Internet Explorer 6, and due to that browser's ubiquity became so commonly used that other browsers eventually implemented it as well. It has been adopted into the DOM specification, primarily to ensure that existing web content continues to function going forward.

New projects should generally avoid using `returnValue`, although they may if they choose to do so.

规范
--

| Specification |
| --- |
| DOM Standard # dom-event-returnvalue |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event.srcElement
================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

**`Event.srcElement`** 是标准的 `Event.target` 属性的一个别名。它只对老版本的 IE 浏览器有效。

规范
--

不属于任何规范

微软 **在 MSDN 有一篇描述。**

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Window.event`
TouchEvent.targetTouches
========================

**`targetTouches`** 是一个只读的 `TouchList` 列表，包含仍与触摸面接触的所有触摸点的 `Touch` 对象。`touchstart`事件触发在哪个`element`内，它就是当前目标元素。

语法
--


```js
var touches = touchEvent.targetTouches;
```

### 返回值

`touches`

一个 `TouchList`，包含仍与触摸面接触的所有触摸点的 `Touch` 对象，`touchstart`事件触发在哪个`element`内，它就是当前目标元素。

例子
--

本例阐述了 `TouchEvent` 对象的 `TouchEvent.targetTouches` 属性。`TouchEvent.targetTouches` 属性也是一个 `TouchList`，其中包含的触摸点起始于触摸事件当前的目标元素，并且此刻正在触摸屏幕。所以，targetTouches 元素是 `touches` 的真子集。

下面代码段中的函数比较了 `touches` 列表和 `targetTouches` 列表的长度，返回值表示他们是否相等。


```js
function touches\_in\_target(ev) {
  // Return true if all of the touches are within the target element;
  // otherwise return false.
  return ev.touches.length == ev.targetTouches.length ? true : false;
}
```

规范
--

| Specification |
| --- |
| Touch Events # dom-touchevent-targettouches |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TouchEvent.changedTouches
=========================

### 概述

这个 `TouchList` 对象列出了和这个触摸事件对应的 `Touch` 对象。

* 对于 `touchstart` 事件，这个 `TouchList` 对象列出在此次事件中新增加的触点。
* 对于 `touchmove` 事件，列出和上一次事件相比较，发生了变化的触点。
* 对于 touchend 事件，**`changedTouches`** 是已经从触摸面的离开的触点的集合（也就是说，手指已经离开了屏幕/触摸面）。
### 语法
```

var touches = touchEvent.changedTouches;
```


这是一个只读属性。

### 返回值

`touches`

列出对应这个触摸事件的 `Touch` 对象的 `TouchList` 对象。

### 标准定义

Touch Events Specification
TouchEvent.touches
==================

概要
--

一个 `TouchList`，其会列出所有当前在与触摸表面接触的 `Touch` 对象，不管触摸点是否已经改变或其目标元素是在处于 `touchstart` 阶段。

此属性是 只读 。

语法
--
```

var touches = touchEvent.touches;
```

### 返回值

`touches`

一个 `TouchList`，其会列出所有当前在与触摸表面接触的 `Touch` 对象，不管触摸点是否已经改变或其目标元素是在处于 `touchstart` 阶段。

示例
--

此示例说明 `TouchEvent` 对象的 `TouchEvent.touches` 属性。该`TouchEvent.touches` 属性是一个 `TouchList` 对象，并包含 `Touch` 当前接触表面的每个接触点的对象列表。

在下面的代码片段中，`touchstart` 事件处理程序会检查 `TouchEvent.touches` 列表的长度，以确定激活的触摸点的数量，然后根据触摸点的数量调用不同的处理程序。


```js
someElement.addEventListener(
  "touchstart",
  function (e) {
    // Invoke the appropriate handler depending on the
    // number of touch points.
    switch (e.touches.length) {
      case 1:
        handle\_one\_touch(e);
        break;
      case 2:
        handle\_two\_touches(e);
        break;
      case 3:
        handle\_three\_touches(e);
        break;
      default:
        console.log("Not supported");
        break;
    }
  },
  false,
);
```

规范
--

| Specification |
| --- |
| Touch Events # dom-touchevent-touches |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaSource.removeSourceBuffer()
================================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`MediaSource` 接口的 **`removeSourceBuffer()`** 方法从与 `MediaSource` 对象关联的 `SourceBuffers` 列表中移除给定的 `SourceBuffer`。

语法
--


```js
removeSourceBuffer(sourceBuffer)
```

### 参数

`sourceBuffer`

将被移除的 `SourceBuffer` 对象。

### 返回值

无（`undefined`）。

### 异常

`NotFoundError` `DOMException`

如果提供的 sourceBuffer 在 `MediaSource.sourceBuffers` 中不存在，则抛出异常。

示例
--


```js
for (let i = 0; i < 10; i++) {
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
}

mediaSource.removeSourceBuffer(mediaSource.sourceBuffers[0]);
```

规范
--

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-removesourcebuffer |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `SourceBuffer`
* `SourceBufferList`
MediaSource.addSourceBuffer()
=============================

`MediaSource` 的 **`addSourceBuffer()`** 方法会根据给定的 MIME 类型创建一个新的 `SourceBuffer` 对象，然后会将它追加到 `MediaSource` 的 `SourceBuffers` 列表中。

语法
--


```js
addSourceBuffer(mimeType)
```

### 参数

mimeType

你想创建的 source buffer 的 MIME 类型。

### 返回值

一个 `SourceBuffer` 对象。

### 异常

`InvalidAccessError` `DOMException`

如果 `mimeType` 指定的值是一个空字符串而不是有效的媒体（MIME）类型，则抛出异常。

`InvalidStateError` `DOMException`

`MediaSource.readyState` 的状态不是 `"open"`，则抛出异常。

`NotSupportedError` `DOMException`

如果用户代理不支持指定的 `mimeType`，或者与媒体源 `sourceBuffer` 列表中已包含的其他 `SourceBuffer` 对象的媒体类型不兼容，则抛出异常。

`QuotaExceededError` `DOMException`

如果用户代理不能处理更多的 `SourceBuffer` 对象，或者使用给定的 `mimeType` 创建了一个新的 `SourceBuffer`，这将导致 `SourceBuffer` 的配置不受支持。

示例
--

以下片段基于 Nick Desaulniers 编写的一个简单示例（查看完整的在线演示，或者下载源代码进行进一步研究）。


```js
const assetURL = "frag\_bunny.mp4";
// Need to be specific for Blink regarding codecs
// ./mp4info frag\_bunny.mp4 | grep Codec
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

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

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

规范
--

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-addsourcebuffer |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `SourceBuffer`
* `SourceBufferList`
MediaSource.endOfStream()
=========================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`MediaSource` 接口的 **`endOfStream()`** 方法意味着流的结束。

语法
--


```js
mediaSource.endOfStream(endOfStreamError);
```

### 参数

endOfStreamError 可选

一个 `DOMString`，表示当流结束之时需要抛出的异常名。可选的值为：

`network`

中止播放并且发出发生网络错误的信号。这可用于创建一个与媒体流相关的自定义处理程序。例如，你可能有一个与其他网络请求分开的，单独处理媒体分块请求的函数。当你调用 XMLHttpRequest（以获取媒体分块）而触发 `onabort` 或 `onerror` 时，你可能需要调用 `endOfStream('network')`，在 UI 中展示描述性的错误，并且立即重试网络请求或者等到网络恢复（通过某种轮询）。

`decode`

中止播放并且发出发生解码错误的信号。这可用于指示当获取媒体数据时发生了解析错误；可能数据已损坏，或者是使用浏览器不知道如何解码的编解码器进行编码。


### 返回值

无（`undefined`）。

### 异常

`InvalidStateError` `DOMException`

`MediaSource.readyState` 的状态不是 `open`，或者有一个或多个在 `MediaSource.sourceBuffers` 中的 `SourceBuffer` 对象被更新（例如它们的 `SourceBuffer.updating` 属性是 `true`），则抛出该错误。

示例
--

以下片段基于 Nick Desaulniers 编写的一个简单示例（查看完整的在线演示，或者下载源代码进行进一步研究）。


```js
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);
  });
}
```

规范
--

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-endofstream |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `SourceBuffer`
* `SourceBufferList`
MediaSource.isTypeSupported()
=============================

**`MediaSource.isTypeSupported()`** 静态方法返回一个布尔值，如果给定的 MIME 类型和（可选的）编解码器*可能*被当前的用户代理支持，则返回 `true`。

也就是说，它可以成功地为该媒体类型创建一个 `SourceBuffer` 对象。如果返回值是 `false`，则用户代理确定它*不*支持指定的媒体格式。

语法
--


```js
isTypeSupported(type)
```

### 参数

`type`

一个指定媒体 MIME 类型的字符串和（可选）包含一个使用逗号分隔的受支持的编解码器集合的`编解码器`参数 (en-US)。

### 返回值

如果给定的媒体类型将*不能*播放，则返回 `false`。

如果浏览器*或许*可以播放给定的媒体类型，则返回 `true`。这不能得到保证，所以你必须为你的代码做好可能无法正常播放媒体的准备。

在确定是否可以使用媒体类型时，所有处理媒体文件的 Web API 都使用“否/可能/或许”方法（或者，在这种情况下，“否或可能”）。这是因为媒体文件是复杂的，它具有太多微妙变化的复杂结构，在你实际使用这个媒体内容之前将无法确定任何事情。

示例
--

以下片段基于 Nick Desaulniers 编写的一个简单示例（查看完整的在线演示，或者下载源代码进行进一步研究）。


```js
const assetURL = "frag\_bunny.mp4";
// Need to be specific for Blink regarding codecs
// ./mp4info frag\_bunny.mp4 | grep Codec
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
  let 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
  let mediaSource = this;
  let sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, function (buf) {
    sourceBuffer.addEventListener("updateend", () => {
      mediaSource.endOfStream();
      video.play();
      //console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
}
```

规范
--

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-istypesupported |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Media Source Extensions API
* Guide to media types and formats on the web
* The "codecs" parameter in common media types (en-US)
* `SourceBuffer`
* `SourceBufferList`
MediaSource.sourceBuffers
=========================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`MediaSource` 接口的只读属性 **`sourceBuffers`** 返回一个 `SourceBufferList` 对象，该对象包含着与 `MediaSource` 关联的 `SourceBuffer` 对象列表。

值
-

一个 `SourceBufferList`。

示例
--

以下片段基于 Nick Desaulniers 编写的一个简单示例（查看完整的在线演示，或者下载源代码进行进一步研究）。


```js
function sourceOpen() {
  //console.log(this.readyState); // open
  const mediaSource = this;
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, function (buf) {
    sourceBuffer.addEventListener("updateend", () => {
      mediaSource.endOfStream();
      console.log(mediaSource.sourceBuffers); // will contain the source buffer that was added above
      video.play();
      //console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
}

// …
```

规范
--

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-sourcebuffers |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `SourceBuffer`
* `SourceBufferList`
MediaSource.MediaSource()
=========================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`MediaSource()`** 是 `MediaSource` 的构造函数，返回一个没有分配 source buffers 新的 `MediaSource` 对象。

语法
--


```js
new MediaSource()
```

### 参数

无。

示例
--

以下片段基于 Nick Desaulniers 编写的一个简单示例（查看完整的在线演示，或者下载源代码进行进一步研究）。


```js
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);
}

// …
```

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `SourceBuffer`
* `SourceBufferList`
MediaSource.readyState
======================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

\*\*`readyState`\*\*是 `MediaSource` 接口的一个只读属性。它返回一个集合表明当前 `MediaSource` 的状态。它有三种可能的返回值：

* `closed`：当前源并未附着到一个 media 元素上。
* `open`：当前源已附着到一个 media 元素并准备好接收 `SourceBuffer` 对象。
* `ended`：当前源已附着到一个 media 元素，但流已被 `MediaSource.endOfStream()` 结束。
语法
--


```js
var myReadyState = mediaSource.readyState;
```

### 值

一个 `DOMString`。

示例
--

以下片段基于 Nick Desaulniers 编写的一个简单示例（查看完整的在线演示，或者下载源代码进行进一步研究）。


```js
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);
  });
}
```

规范
--

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-readystate |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `SourceBuffer`
* `SourceBufferList`
MediaSource.duration
====================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`MediaSource` 接口的属性 **`duration`** 用来获取或者设置当前媒体展示的时长。

### 值

以秒为单位的双精度浮点数。

### 异常

设置新的值的时候可能会有下面的错误抛出。

`InvalidAccessError` `DOMException`

时长尝试设置一个负数，或者为 `NaN` 则抛出。

`InvalidStateError` `DOMException`

`MediaSource.readyState` 的状态不是 `open`，或者有一个或多个在 `MediaSource.sourceBuffers` 中的 `SourceBuffer` 对象被更新（例如它们的 `SourceBuffer.updating` 属性是 `true`），则抛出该错误。

示例
--

以下片段基于 Nick Desaulniers 编写的一个简单示例（查看完整的在线演示，或者下载源代码进行进一步研究）。


```js
function sourceOpen() {
  //console.log(this.readyState); // open
  const mediaSource = this;
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, function (buf) {
    sourceBuffer.addEventListener("updateend", () => {
      mediaSource.endOfStream();
      mediaSource.duration = 120;
      video.play();
      //console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
}

// …
```

规范
--

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-duration |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `SourceBuffer`
* `SourceBufferList`
MediaSource.activeSourceBuffers
===============================

`MediaSource` 接口的只读属性 **`activeSourceBuffers`** 返回一个 `SourceBufferList` 对象，该对象包含了 `sourceBuffers` 中的 `SourceBuffer` 对象的子集——提供当前所选的视频轨道、启用的音频轨道和显示或者隐藏的字幕轨道的对象列表。

值
-

一个 `SourceBufferList`，包含每个活动轨道的 `SourceBuffer` 对象。

示例
--

以下片段基于 Nick Desaulniers 编写的一个简单示例（查看完整的在线演示，或者下载源代码进行进一步研究）。


```js
function sourceOpen() {
  //console.log(this.readyState); // open
  const mediaSource = this;
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, function (buf) {
    sourceBuffer.addEventListener("updateend", () => {
      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);
  });
}

// …
```

规范
--

| Specification |
| --- |
| Media Source Extensions™ # dom-mediasource-activesourcebuffers |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `SourceBuffer`
* `SourceBufferList`
MediaRecorder.isTypeSupported
=============================

\*\*`MediaRecorder.isTypeSupported()`\*\*方法会判断其 MIME 格式能否被客户端录制。

语法
--
```

var canRecord = MediaRecorder.isTypeSupported(mimeType)
```

### 参数

`mimeType`

需要检查的 MIME 格式

### 返回值

如果 `MediaRecorder` 在浏览器上的具体实现能够支持指定 MIME 类型的 `Blob` 对象就返回 true. 如果没有足够的资源来支持录制和编码任务，最终录制依然会失败。如果返回结果是 false，用户的浏览器就无法录制指定的格式。

Example
-------


```js
var types = [
  "video/webm",
  "audio/webm",
  "video/webm;codecs=vp8",
  "video/webm;codecs=daala",
  "video/webm;codecs=h264",
  "audio/webm;codecs=opus",
  "video/mpeg",
];

for (var i in types) {
  console.log(
    "Is " +
      types[i] +
      " supported? " +
      (MediaRecorder.isTypeSupported(types[i]) ? "Maybe!" : "Nope :("),
  );
}
```

规范
--

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-istypesupported |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

看过这个的用户还浏览了以下内容：
----------------

* Using Service Workers (en-US)
* `MediaStreamTrack`
* `MediaStream`
MediaRecorder.audioBitsPerSecond
================================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`audioBitsPerSecond`** `MediaRecorder` 接口的只读属性。它返回录制器所使用的音频编码码率。或许与构造函数中指定的比特率有些不同（如果调用构造函数的时候有指定）。

语法
--
```

var audioBitsPerSecond = MediaRecorder.audioBitsPerSecond
```

### 值

`Number` (无符号长整型).

规范
--

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-audiobitspersecond |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.