recursal/MDN huggingface dataset:
MediaRecorder()
===============

**`MediaRecorder()`** 构造函数会创建一个对指定的 `MediaStream` 进行录制的 `MediaRecorder` 对象

语法
--
```

var mediaRecorder = new MediaRecorder(stream[, options]);
```

### 参数

**`stream`**

`MediaStream` 将要录制的流。它可以是来自于使用 `navigator.mediaDevices.getUserMedia()` 创建的流或者来自于 `<audio>`, `<video>` 以及 `<canvas>` DOM 元素。

**`options`** 可选

一个字典对象，它可以包含下列属性：

* `mimeType`: 为新构建的 `MediaRecorder` 指定录制容器的 MIME 类型。在应用中通过调用 `MediaRecorder.isTypeSupported()` 来检查浏览器是否支持此种`mimeType` .
* `audioBitsPerSecond`: 指定音频的比特率。
* `videoBitsPerSecond`: 指定视频的比特率。
* `bitsPerSecond`: 指定音频和视频的比特率。此属性可以用来指定上面两个属性。如果上面两个属性只有其中之一和此属性被指定，则此属性可以用于设定另外一个属性。

**备注：** 如果视频和/或音频的比特率没有指定，视频默认采用的比特率是 2.5Mbps，但音频的默认比特率并不固定，音频的默认比特率根据采样率和轨道数自适应。

例子
--

此例展示了如果对指定的流创建一个音频比特率为 128kbps，视频比特率为 2.5Mbps 的媒体录制器。被录制的媒体数据会以 MP4 格式封装 (因此你若获取这些媒体数据片段，并存放到磁盘上去，你就会得到一个 mp4 文件).


```js
...

if (navigator.mediaDevices.getUserMedia) {
  var constraints = { audio: true, video: true };
  var chunks = [];

  var onSuccess = function(stream) {
    var options = {
      audioBitsPerSecond : 128000,
      videoBitsPerSecond : 2500000,
      mimeType : 'video/mp4'
    }
    var mediaRecorder = new MediaRecorder(stream,options);
    m = mediaRecorder;

...
```

规范
--

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

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

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

更多信息
----

* Using the MediaRecorder API (en-US)
* Web Dictaphone: MediaRecorder + getUserMedia + Web Audio API visualization demo, by Chris Mills (source on Github.)
* simpl.info MediaStream Recording demo, by Sam Dutton.
* `Navigator.mediaDevices.getUserMedia()` (en-US)
MediaRecorder.ondataavailable
=============================

**`MediaRecorder.ondataavailable`** 事件处理程序 (part of the MediaStream 记录 API) 处理 `dataavailable` 事件，让你在响应运行代码`Blob`数据被提供使用。

`dataavailable`当 MediaRecorder 将媒体数据传递到你的应用程序以供使用时，将触发该事件。数据在包含数据的`Blob`对象中提供。这在四种情况下发生：

* 媒体流结束时，所有尚未传递到`ondataavailable`处理程序的媒体数据都将在单个`Blob`中传递。
* 当调用`MediaRecorder.stop()` (en-US)时，自记录开始或`dataavailable`事件最后一次发生以来已捕获的所有媒体数据都将传递到`Blob`中；此后，捕获结束。
* 调用`MediaRecorder.requestData()` (en-US) `dataavailable`时，将传递自记录开始或事件最后一次发生以来捕获的所有媒体数据；然后`Blob`创建一个新文件，并将媒体捕获继续到该 blob 中。
* 如果将`timeslice`属性传递到开始媒体捕获的`MediaRecorder.start()` (en-US)方法中，`dataavailable`则每`timeslice`毫秒触发一次事件。这意味着每个 Blob 都有特定的持续时间（最后一个 Blob 除外，后者可能更短，因为它将是自上次事件以来剩下的所有东西）。因此，如果该方法调用看起来像这样 - `recorder.start(1000);`-的`dataavailable`事件将媒体捕捉的每一秒发生火灾后，我们的事件处理程序将被称为与媒体数据的 BLOB 每秒即坚持一个第二长。你可以`timeslice`与`MediaRecorder.stop()` (en-US)和`MediaRecorder.requestData()` (en-US)一起使用，以产生多个相同长度的 Blob，以及其他较短的 Blob。

**备注：** 包含媒体数据的 `Blob` 在 `dataavailable` 事件的 `data` 属性中可用。

语法
--
```

MediaRecorder.ondataavailable = function(event) { ... }
MediaRecorder.addEventListener('dataavailable', function(event) { ... })
```

示例
--
```

...
  var chunks = [];

  mediaRecorder.onstop = function(e) {
    console.log("data available after MediaRecorder.stop() called.");

    var audio = document.createElement('audio');
    audio.controls = true;
    var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
    var audioURL = window.URL.createObjectURL(blob);
    audio.src = audioURL;
    console.log("录像停止");
  }

  mediaRecorder.ondataavailable = function(e) {
    chunks.push(e.data);
  }

...
```

规范
--

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

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

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

参见
--

* 使用 MediaStream 录制 API
* Web Dictaphone：Chris Mills 提供的 MediaRecorder + getUserMedia + Web Audio API 可视化演示 (在 Github 上提供)。
* simpl.info MediaStream 录制演示，作者Sam Dutton。
* `Navigator.getUserMedia`
SpeechSynthesis.paused
======================

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

`SpeechSynthesis` 接口的只读属性 **`paused`** 是一个 `Boolean` (en-US) 值，当`SpeechSynthesis`对象处于暂停状态时，返回`true` ，否则返回 `false`。

它能被设置为 `暂停状态` (en-US) 即使当前并没有语音在播放队列中。如果`utterances` (en-US) 被添加到语音播放队列，队列中的语音并不会播放直到使用 `SpeechSynthesis.resume()` (en-US)使`SpeechSynthesis`对象处于非暂停状态。

语法
--
```

var amIPaused = speechSynthesisInstance.paused;
```

### Value

一个`Boolean` (en-US)。

示例
--


```js
var synth = window.speechSynthesis;

synth.pause();

var amIPaused = synth.paused; // 将返回 true
```

规范
--

| Specification |
| --- |
| Web Speech API # dom-speechsynthesis-paused |

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

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

请参阅
---

* Web Speech API
SpeechSynthesis.getVoices()
===========================

`SpeechSynthesis` 接口的 **`getVoices()`** 方法返回一个 `SpeechSynthesisVoice` (en-US) 列表，用于表示当前设备上所有可用的语音。

语法
--


```js
getVoices()
```

### 参数

无。

### 返回值

返回一个类型为 `SpeechSynthesisVoice` (en-US) 的数组（array）列表（list）。

示例
--

### JavaScript


```js
function populateVoiceList() {
  if (typeof speechSynthesis === "undefined") {
    return;
  }
  var voices = speechSynthesis.getVoices();
  for (var i = 0; i < voices.length; i++) {
    var option = document.createElement("option");
    option.textContent = voices[i].name + " (" + voices[i].lang + ")";
    if (voices[i].default) {
      option.textContent += " -- DEFAULT";
    }
    option.setAttribute("data-lang", voices[i].lang);
    option.setAttribute("data-name", voices[i].name);
    document.getElementById("voiceSelect").appendChild(option);
  }
}
populateVoiceList();
if (
  typeof speechSynthesis !== "undefined" &&
  speechSynthesis.onvoiceschanged !== undefined
) {
  speechSynthesis.onvoiceschanged = populateVoiceList;
}
```

### HTML


```html
<select id="voiceSelect"></select>
```

规范
--

| Specification |
| --- |
| Web Speech API # dom-speechsynthesis-getvoices |

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

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

参见
--

* Web Speech API
EventSource.onerror
===================

`EventSource` 的属性 **`onerror`** 是当发生错误且这个错误事件（`error`）被 EventSource 触发时调用的一个事件处理函数。

语法
--
```

eventSource.onerror = function
```

例子
--


```js
evtSource.onerror = function () {
  console.log("EventSource failed.");
};
```


**备注：** 你可以在 Github 上查看这个完整例子： Simple SSE demo using PHP.

规范
--

| Specification |
| --- |
| HTML Standard # event-error |
| HTML Standard # handler-eventsource-onerror |

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

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

参见
--

* `EventSource`
EventSource()
=============

**`EventSource()`** 构造函数返回一个新建的`EventSource`，它代表了一个远程资源。

语法
--
```

pc = new EventSource(url, configuration);
```

### 参数

`url`

一个`USVString` ，它代表远程资源的位置

`configuration` 可选

为配置新连接提供选项。可选项是：

* `withCredentials`，默认为 `false`，指示 CORS 是否应包含凭据 ( credentials )。

### 返回值

一个新建的 `EventSource` 对象，如果指定了`configuration`，则按其配置；否则，配置为合适的基本默认值。

示例
--


```js
var evtSource = new EventSource("sse.php");
var eventList = document.querySelector("ul");

evtSource.onmessage = function (e) {
  var newElement = document.createElement("li");

  newElement.textContent = "message: " + e.data;
  eventList.appendChild(newElement);
};
```


**备注：** 你可以在 GitHub 查看完整示例 — 请查看 Simple SSE demo using PHP.

规范
--

| Specification |
| --- |
| HTML Standard # dom-eventsource-dev |

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

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

参见
--

* `EventSource`
EventSource.onopen
==================

`EventSource`接口的 **`onopen`** 属性是一个事件处理器，它在收到 `open` 事件时被调用，在那时，连接刚被打开。

语法
--
```

eventSource.onopen = function
```

示例
--


```js
evtSource.onopen = function () {
  console.log("Connection to server opened.");
};
```


**备注：** 你可以在 GitHub 上看到一个完整的示例— 请看 使用 php 的 SSE(服务器发送事件)demo。

规范
--

| Specification |
| --- |
| HTML Standard # event-open |
| HTML Standard # handler-eventsource-onopen |

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

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

参见
--

* `EventSource`
EventSource：message 事件
======================

`EventSource` API 的 `message` 事件，会在通过事件源收到数据时触发。

此事件不能取消，也不会冒泡。

语法
--

在如 `addEventListener()` 等方法中使用事件名称，或者设置事件处理器属性。


```js
addEventListener("message", (event) => {});

onmessage = (event) => {};
```

事件类型
----

*一个 `MessageEvent`。继承自 `Event`。*

Event

MessageEvent事件属性
----

*本接口也继承了父接口 `Event` 的属性。*

`MessageEvent.data` (en-US) 只读 

消息发射器发出的数据。

`MessageEvent.origin` (en-US) 只读 

一个字符串，表示消息发射器的源（origin）。

`MessageEvent.lastEventId` (en-US) 只读 

一个字符串，表示事件的唯一 ID。

`MessageEvent.source` (en-US) 只读 

一个 `MessageEventSource`（可以是一个 WindowProxy (en-US)、`MessagePort` 或 `ServiceWorker` 对象），表示事件发射器。

`MessageEvent.ports` (en-US) 只读 

一个 `MessagePort` 对象的数组，表示与正在发送消息的通道相关联的端口（如果适用，例如在传递通道消息，或者向共享的 worker 发送消息时）。

示例
--

在这个基本示例中，创建了一个 `EventSource` 对象来接收来自服务器的事件；名为 `sse.php` 的页面负责生成这些事件。


```js
const evtSource = new EventSource("sse.php");
const eventList = document.querySelector("ul");

evtSource.addEventListener("message", (e) => {
  const newElement = document.createElement("li");

  newElement.textContent = `message: ${e.data}`;
  eventList.appendChild(newElement);
});
```

### onmessage 的等价写法


```js
evtSource.onmessage = (e) => {
  const newElement = document.createElement("li");

  newElement.textContent = `message: ${e.data}`;
  eventList.appendChild(newElement);
};
```

规范
--

| Specification |
| --- |
| HTML Standard # event-message |
| HTML Standard # handler-eventsource-onmessage |

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

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

参见
--

* 使用 Server-sent 事件
* `open`
* `error`
EventSource.close()
===================

`EventSource` 的方法 **`close()`** 用于关闭当前的连接，如果调用了此方法，则会将`EventSource.readyState` (en-US)这个属性值设置为 2 (closed)

**备注：** 如果连接已经被关闭，此方法不会做任何事情

语法
--
```

eventSource.close();
```

### 参数

None.

### 返回值

Void.

例子
--


```js
var button = document.querySelector("button");
var evtSource = new EventSource("sse.php");

button.onclick = function () {
  console.log("Connection closed");
  evtSource.close();
};
```


**备注：** 你可以在 Github 上查看这整个例子： Simple SSE demo using PHP.

规范
--

| Specification |
| --- |
| HTML Standard # dom-eventsource-close-dev |

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

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

参见
--

* `EventSource`
RTCRtpTransceiver.direction
===========================

The `RTCRtpTransceiver` (en-US) property **`direction`** is a string which indicates the transceiver's preferred directionality. Its value must be one of the strings defined by the `RTCRtpTransceiverDirection` (en-US) enumeration.

The transceiver's *current* direction is indicated by the `currentDirection` (en-US) property.

### 值

A `DOMString` whose value is one of the strings which are a member of the `RTCRtpTransceiverDirection` enumerated type, indicating the transceiver's preferred direction.

| 值 | `RTCRtpSender` 的行为 | `RTCRtpReceiver` 的行为 |
| --- | --- | --- |
| `"sendrecv"` | 可以发送 RTP (en-US) 数据，如果另一个对等节点接受了连接，且至少有一个 sender 的处于编码状态，则发送数据。 | 可以接收 RTP 数据，如果有其他的对等节点接受数据，则接收数据。 |
| `"sendonly"` | 可以发送 RTP (en-US) 数据，如果另一个对等节点接受了连接，且至少有一个 sender 的处于编码状态，则发送数据。 | *不*可以接收 RTP 数据，无论如何都不会接收数据。 |
| `"recvonly"` | *不*可以发送 RTP 数据，无论如何都不会发送数据。 | 可以接收 RTP 数据，如果有其他的对等节点接受数据，则接收数据。 |
| `"inactive"` | *不*可以发送 RTP 数据，无论如何都不会发送数据。 | *不*可以接收 RTP 数据，无论如何都不会接收数据。 |

### 异常

When setting the value of `direction`, the following exceptions can occur:

`InvalidStateError`

Either the receiver's `RTCPeerConnection` is closed or the `RTCRtpReceiver` (en-US) is stopped.

Usage notes
-----------

### Setting the direction

When you change the value of `direction`, an `InvalidStateError` exception will occur if the connection is closed or the receiver is stopped.

If the new value of `direction` is in fact different from the existing value, renegotiation of the connection is required, so a `negotiationneeded` (en-US) event is sent to the `RTCPeerConnection`.

### Effect on offers and answers

The value of `direction` is used by `RTCPeerConnection.createOffer()` or `RTCPeerConnection.createAnswer()` (en-US) in order to generate the SDP generated by each of those methods. The SDP contains an a-line which specifies the directionality. For example, if the `direction` is specified as `"sendrecv"`, the corresponding SDP a-line is:
```

a=sendrecv
```

规范
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcrtptransceiver-direction |

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

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

参见
--

* `RTCRtpTransceiver.currentDirection` (en-US)
TimeRanges.start()
==================

返回指定时间范围的开始偏移量。

语法
--
```

startTime = TimeRanges.start(index)
```

### 参数

* `index` 想要检索的时间范围的索引值。
### 异常

INDEX\_SIZE\_ERR

如果不存在指定索引值的时间范围，抛出 `DOMException` 异常。

示例
--

假定页面中存在一个 ID 为“myVideo”的 video 元素：


```js
var v = document.getElementById("myVideo");

var buf = v.buffered;

var numRanges = buf.length;

if (buf.length == 1) {
  // only one range
  if (buf.start(0) == 0 && buf.end(0) == v.duration) {
    // The one range starts at the beginning and ends at
    // the end of the video, so the whole thing is loaded
  }
}
```


这个例子演示了如何通过 `TimeRanges` 来判断 video 是否已经完全加载。

规范
--

| Specification |
| --- |
| HTML Standard # dom-timeranges-start-dev |

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

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

返回指定时间范围的结束偏移量。

语法
--
```

endTime = TimeRanges.end(index)
```

### 参数

* `index` 想要检索的时间范围的索引值。
### 异常

INDEX\_SIZE\_ERR

如果不存在指定索引值的时间范围，抛出 `DOMException` 异常。

示例
--

假定页面中存在一个 ID 为“myVideo”的 video 元素：


```js
var v = document.getElementById("myVideo");

var buf = v.buffered;

var numRanges = buf.length;

if (buf.length == 1) {
  // only one range
  if (buf.start(0) == 0 && buf.end(0) == v.duration) {
    // The one range starts at the beginning and ends at
    // the end of the video, so the whole thing is loaded
  }
}
```


这个例子演示了如何通过 `TimeRanges` 来判断 video 是否已经完全加载。

规范
--

| Specification |
| --- |
| HTML Standard # dom-timeranges-end-dev |

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

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

只读属性 **`TimeRanges.length`** 返回对象中时间范围的个数。

语法
--
```

length = TimeRanges.length;
```

示例
--

假定页面中存在一个 ID 为“myVideo”的 video 元素：


```js
var v = document.GetElementById("myVideo");

var buf = v.buffered;

var numRanges = buf.length;

if (buf.length == 1) {
  // Only one range
  if (buf.start(0) == 0 && buf.end(0) == v.duration) {
    // The one range starts at the beginning and ends at
    // the end of the video, so the whole thing is loaded
  }
}
```


这个例子演示了如何通过 `TimeRanges` 来判断 video 是否已经完全加载。

规范
--

| Specification |
| --- |
| HTML Standard # dom-timeranges-length-dev |

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

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

**`ByteLengthQueuingStrategy()`** 构造函数创建并返回一个 `ByteLengthQueuingStrategy` 对象实例。

语法
--


```js
new ByteLengthQueuingStrategy(highWaterMark)
```

### 参数

`highWaterMark`

一个包含 `highWaterMark` 属性的对象。这个属性是一个非负整数，定义了在应用背压之前内部队列可以包含的分块的总数。

### 返回值

一个 `ByteLengthQueuingStrategy` 对象实例。

### 异常

无。

示例
--


```js
const queuingStrategy = new ByteLengthQueuingStrategy({ highWaterMark: 1 });

const readableStream = new ReadableStream(
  {
    start(controller) {
      // …
    },
    pull(controller) {
      // …
    },
    cancel(err) {
      console.log("stream error:", err);
    },
  },
  queuingStrategy,
);

const size = queuingStrategy.size(chunk);
```

规范
--

| Specification |
| --- |
| Streams Standard # blqs-constructor |

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

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

参见
--

* `ByteLengthQueuingStrategy` 接口
ByteLengthQueuingStrategy.size()
================================

`ByteLengthQueuingStrategy` 接口的 **`size()`** 方法返回给定分块的 `byteLength` 属性。

语法
--


```js
size(chunk)
```

### 参数

`chunk`

一个通过流传递的数据分块。

### 返回值

一个整数，表示给定分块的字节长度。

示例
--


```js
const queuingStrategy = new ByteLengthQueuingStrategy({ highWaterMark: 1 });

const readableStream = new ReadableStream(
  {
    start(controller) {
      // …
    },
    pull(controller) {
      // …
    },
    cancel(err) {
      console.log("stream error:", err);
    },
  },
  queuingStrategy,
);

const size = queueingStrategy.size(chunk);
```

规范
--

| Specification |
| --- |
| Streams Standard # blqs-size |

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

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

参见
--

* `ByteLengthQueuingStrategy()` 构造函数
ByteLengthQueuingStrategy：highWaterMark 属性
==========================================

只读属性 **`ByteLengthQueuingStrategy.highWaterMark`** 返回在应用背压之前，内置队列可以包含的字节总数。

**备注：** 与 `CountQueuingStrategy()` 不同，后者的 `highWaterMark` 指定了分块的数量，`ByteLengthQueuingStrategy()` 的 `highWaterMark` 参数则指定了*字节*数量——具体地说，给定一个分块流，在应用背压之前，内部队列可以包含这些分块的字节数（而不是这些分块的数量）。

值
-

一个整数。

示例
--


```js
const queuingStrategy = new ByteLengthQueuingStrategy({
  highWaterMark: 1 \* 1024,
});

const readableStream = new ReadableStream(
  {
    start(controller) {
      // …
    },
    pull(controller) {
      // …
    },
    cancel(err) {
      console.log("stream error:", err);
    },
  },
  queuingStrategy,
);

const size = queuingStrategy.size(chunk);
console.log(`highWaterMark value: ${queuingStrategy.highWaterMark}$`);
```

规范
--

| Specification |
| --- |
| Streams Standard # ref-for-blqs-high-water-mark① |

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

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

参见
--

* `ByteLengthQueuingStrategy()` 构造函数
Attr.namespaceURI
=================

**`Attr.namespaceURI`** 只读属性返回属性的命名空间 URI，如果该元素不在命名空间中，则返回 null。

**备注：** 在 DOM4 之前，该 API 是在 `Node` 中定义的。

语法
--
```

namespace = attribute.namespaceURI
```

例子
--

在这个片段中，正在检查一个属性的 `localName` 和 `namespaceURI`。如果 `namespaceURI` 返回 XUL 命名空间，并且 localName 返回 "browser"，则该节点被理解为 XUL `<browser/>`。


```js
if (
  attribute.localName == "value" &&
  attribute.namespaceURI ==
    "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
) {
  // this is a XUL value
}
```

笔记
--

 这不是基于对范围中的命名空间声明的检查的命名空间查找的结果的计算值。
 属性的命名空间 URI 在属性创建时被冻结。

 在 Firefox 3.5 及更早版本中，HTML 文档中 HTML 属性的命名空间 URI 为 null。
 在后来的版本中，遵照 HTML5，就像在 XHTML 中一样是`https://www.w3.org/1999/xhtml`

你可以使用 DOM Level 2 方法 `Element.setAttributeNS`创建具有指定 namespaceURI 的属性。

 根据 Namespaces in XML 规范，属性不会从其附加的元素继承其命名空间。
 如果一个属性没有明确地给出一个命名空间，它没有命名空间。

 DOM 本身不处理或强制命名空间验证。DOM 应用程序需要做任何必要的验证。
 还要注意，一旦与特定节点相关联，命名空间前缀将无法更改。

规格
--

| Specification |
| --- |
| DOM Standard # dom-attr-namespaceuri |

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

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

其他文章
----

* `Attr.localName`
* `Attr.prefix`
* `Element.namespaceURI`
* `Node.namespaceURI` (en-US)
Attr.localName
==============

**`Attr.localName`** 为只读属性，返回一个属性限定名称的本名部分（去除命名空间前缀的名字）。

**备注：** 在之前的 DOM 规范中此 API 被定义在 `Node` 接口中。

语法
--
```

name = attribute.localName
```

### 返回值

属性的限定名称的本名 `DOMString` 。

示例
--

下面的例子将弹出一个有“id”文字的警告窗口。

### HTML


```html
<button id="example">Click me</button>
```

### JavaScript


```js
const element = document.querySelector("#example");
element.addEventListener("click", function () {
  const attribute = element.attributes[0];
  alert(attribute.localName);
});
```

注意
--

本文档中属性的“本名 (local name)”指的是属性“限定名称 (qualified names)”的命名空间冒号之后的部分。“限定名称”通常作为 XML 文档命名空间的一部分用在 XML 代码内。

**备注：** 在 Gecko 1.9.2 以及跟早的版本中，HTML DOM 访问该属性将返回 HTML 节点属性的大写字符串本名（有别于 XML DOM 的 XHTML 属性）。在后来的版本中，为遵循 HTML5 标准，该属性返回 DOM 内部存储的名称，即，不论 HTML DOM 的 HTML 属性还是 XML DOM 的 XHTML 属性都是小写字符串。

规范
--

| Specification |
| --- |
| DOM Standard # dom-attr-localname |

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

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

参考
--

* `Attr.namespaceURI`
* `Attr.prefix`
* `Element.localName`
* `Node.localName` (en-US)
Attr.prefix
===========

**`Attr.prefix`** 为只读属性，返回指定标签属性的名字空间前缀，如果没有前缀则返回 `null`。

**备注：** 在 DOM4 之前此 API 被定义在 `Node` 接口中。

语法
--
```

string = attribute.prefix
```

示例
--

下例在控制台中输出“x”。


```xml
<div x:id="example" onclick="console.log(this.attributes[0].prefix)"/>
```

注意
--

该属性仅在使用有名字空间解析功能的解析器时有效，例如一个 MIME 类型为 XML 的文档。在 HTML 文档中无效。

规范
--

| Specification |
| --- |
| DOM Standard # dom-attr-prefix |

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

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

参考
--

* `Attr.namespaceURI`
* `Attr.localName`
* `Element.prefix`
* `Node.prefix` (en-US)
HTMLMediaElement.seekable
=========================

`HTMLMediaElement`的只读属性 **`seekable`** 返回一个包含了用户可以跳转到的时刻的区域（如果有）的`TimeRanges`对象。

Syntax
------
```

var seekable = audioOrVideo.seekable;
```

### 值

一个`TimeRanges`对象。

示例
--


```js
var video = document.querySelector("video");
var timeRangesObject = video.seekable;
var timeRanges = [];
//遍历所有时间区域并输出数组
for (let count = 0; count < timeRangesObject.length; count++) {
  timeRanges.push([timeRangesObject.start(count), timeRangesObject.end(count)]);
}
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-media-seekable-dev |
| Media Source Extensions™ # htmlmediaelement-extensions |

Browser compatibility
---------------------

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

See also
--------

* The interface defining it, `HTMLMediaElement`.
* Media Source Extensions API
HTMLMediaElement.controls
=========================

**`HTMLMediaElement.controls`** 这个负责控制 html 中的`controls`HTML 属性，它负责控制播放的媒体 (视频或音频) 的控制条是否显示。.

语法
--
```

var ctrls = video.controls;
audio.controls = true;
```

### 返回值

类型 `Boolean` (en-US). 是否成功

例子
--


```js
var obj = document.createElement("video");
obj.controls = true;
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-media-controls |

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

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

产考文档
----

* The interface defining it, `HTMLMediaElement`.
HTMLMediaElement.networkState
=============================

**`HTMLMediaElement.networkState`** 属性表示在网络上获取媒体的当前状态。

语法
--
```

var networkState = audioOrVideo.networkState;
```

### 取值

一个 `unsigned short`。可能的值包括：

| 常量 | 值 | 描述 |
| --- | --- | --- |
| `NETWORK_EMPTY` | 0 | 还没有数据。并且 `readyState` 的值是 `HAVE_NOTHING`。 |
| `NETWORK_IDLE` | 1 | HTMLMediaElement 是有效的并且已经选择了一个资源，，但是还没有使用网络。 |
| `NETWORK_LOADING` | 2 | 浏览器正在下载 HTMLMediaElement 数据。 |
| `NETWORK_NO_SOURCE` | 3 | 没有找到 HTMLMediaElement src。 |

例子
--

这个例子监听 audio 元素以开始播放，然后检查是否仍然在加载数据。


```html
<audio id="example" preload="auto">
  <source src="sound.ogg" type="audio/ogg" />
</audio>
```



```js
var obj = document.getElementById("example");

obj.addEventListener("playing", function () {
  if (obj.networkState === 2) {
    // Still loading...
  }
});
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-media-networkstate-dev |

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

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

另见
--

* 定义它的接口，`HTMLMediaElement`.