recursal/MDN huggingface dataset:
在 HTML 中使用图像
============

HTML `<img>` 元素可让你在 HTML 文档中嵌入图像，而 `<picture>` 元素则可启用响应式图像。在本指南中，你可以找到有关在网站中添加图像的资源链接。

参考
--

这些文章介绍了一些 HTML 元素和 CSS 属性，它们用于控制图像在 web 上的显示方式。

### HTML

`<img>`

**HTML `<img>` 元素**用于在网页中嵌入图像。它支持多种属性，可控制图像的行为方式，并允许为看不到图像的人添加 `alt` 文本等重要信息。

`<picture>`

**HTML `<picture>` 元素**包含零个或多个 `<source>` 元素和一个 `<img>` 元素，为不同的显示/设备场景提供不同版本的图像。浏览器会考虑每个子 `<source>` 元素，并选择其中最匹配的元素。

### CSS

`object-fit`

**`object-fit`** CSS 属性设置了如何调整替换元素的内容大小以适应其容器，例如 `<img>` 或 `<video>`。

`object-position`

**`object-position`** CSS 属性指定所选替换元素中的内容在元素框内的对齐方式。替换元素对象未覆盖的框内区域将显示该元素的背景。

`background-image`

**`background-image`** CSS 属性为元素设置一个或多个背景图像。

指南
--

这些文章为选择和配置图像类型提供了指导。

图片文件类型和格式指南

本指南介绍 web 浏览器通常支持的各种图像文件类型，包括它们各自的使用情况、功能和兼容性因素的详细信息。此外，本文还提供了针对特定情况选择最佳图像文件类型的指导。

包含 `width` 和 `height` 属性以防止卡顿

这就改变了浏览器加载图像的方式，使浏览器可以在加载图像前就计算出图像的宽高比，然后再利用宽高比预留图像的显示尺寸。

其他主题
----

你可能感兴趣的相关主题。

学习 HTML：响应式图片

在本文中，我们将了解响应式图像（能在屏幕尺寸、分辨率和其他特性差异较大的设备上正常显示的图像）的概念并了解 HTML 提供了哪些工具来帮助我们实现这项技术。
媒体类型和格式指南：图片、音频和视频内容
====================

几乎从一开始，Web 就包含了对某种形式的视觉媒体呈现的支持。最初，这些功能是有限的，但是不同的浏览器厂商扩展了这些功能，并且找到了自己的解决方案来解决网络上的静态和视频图像等问题。现代 Web 具有强大的功能来支持媒体的呈现和操作，多个与媒体相关的 API 支持各种类型的内容。通常，浏览器支持的媒体格式完全取决于浏览器的创建者，这可能会使 Web 开发人员的工作复杂化。

本指南概述了组成 web 中使用的媒体的媒体文件类型、编解码器以及算法。本指南还提供了浏览器对这些格式的各种组合的支持信息、格式优先级建议，以及哪些格式擅长于特定类型的内容。

参考
--

### 图片

图片文件类型和格式指南

互联网上使用的主要图像文件类型和内容格式指南。其中包括对浏览器支持、优点和限制的高度概述，以及最佳实践指南，以帮助网页设计人员为特定类型的内容选择正确的图像文件格式。

### 媒体文件格式和编解码器

媒体容器（文件类型）

包含媒体数据的文件类型指南。其中一些是音频专用文件，而另一些既可用于音频，也可用于电影等综合视听内容。包括主要 web 浏览器支持的每种文件类型的概述，以及浏览器支持信息和支持的特性。

Web 音频编解码器指南 (en-US)

常用媒体容器和主要浏览器允许使用的音频编解码器指南。包括优点、限制、主要规范和功能以及使用案例。还包括各浏览器对在特定容器中使用编解码器的支持。

Web 视频编解码器指南

本文提供了有关主要浏览器支持的视频编解码器的基本信息，以及一些不常支持但仍可能遇到的编解码器。文章还介绍了编解码器的功能、优点、限制以及浏览器支持级别和限制。

不同媒体类型的编解码器 (en-US)

在指定描述媒体格式的 MIME 类型时，可以使用作为类型字符串一部分的 `codecs` 参数提供详细信息。本指南介绍常见媒体类型的 `codecs` 参数的格式和可能的值。

WebRTC 使用的编解码器 (en-US)

WebRTC 不使用容器，而是使用 `MediaStreamTrack` 对象在点对点之间流式传输编码媒体本身，以表示每个音频或视频音轨。本指南将讨论 WebRTC 常用的编解码器。

指南
--

### 概念

数字音频概念 (en-US)

介绍如何将音频转换成数字形式并存储起来供计算机使用。它解释了音频采样的基本概念，以及采样率、音频帧和音频压缩等概念。

数字视频概念 (en-US)

Web 数字视频基本概念指南，包括色彩格式、色度二次抽样、人类感知如何影响视频编码等基础知识。

### 教程

学习区：视频和音频内容

本教程介绍了在 web 上使用媒体的方法和细节。

处理 web 内容的媒体支持问题 (en-US)

在本指南中，我们将探讨如何通过明智地选择媒体格式，并在有帮助的地方提供回退和替代格式，在提供尽可能广泛的兼容性的同时，最大限度地提高网页内容的质量或性能。

其他主题
----

媒体能力 API (en-US)

媒体能力 API 可让你发现应用程序或网站所运行设备的编码和解码能力。这样，你就可以实时决定何时使用何种格式。
为 HTML 5 视频提供的 DASH 自适应串流
=========================

经由 HTTP 的动态自适应串流（DASH）是一种自适应串流协议。这意味着它使得视频串流能基于网络性能来调整比特率，以保证视频流畅播放。

浏览器支持
-----

Firefox 21 包含了针对 HTM5 WebM 视频的 DASH 实现，但默认没有启用。可以通过在“about:config”里调整“`media.dash.enabled`”首选项来开启。

Firefox 23 移除了针对 HTML5 WebM 视频的 DASH 实现。此功能将被 媒体源扩展 API（MSE）的实现取代。MSE 可实现通过 JavaScript 库（例如 dash.js）来提供对 DASH 的支持。详情参见 Bug 778617。

使用 DASH - 服务端
-------------

首先，你需要将 WebM 视频转换为带有不同比特率的随附视频文件的 DASH 清单。根据你的需求，启动从 ffmpeg.org 的 ffmpeg 程序，就可以使用 libvpx 和 libbvorbis 支持的 WebM 视频和音频（版本 2.5 以上，3.2.5 版本已通过测试）。

### 1. 使用现有的 WebM 文件创建一个音频文件和多个视频文件

例如：

文件***in.video***可以是任何包含至少一个音频和一个视频流的容器，这些容器可以由 ffmpeg 解码，

创建音频：
```

ffmpeg -i in.video -vn -acodec libvorbis -ab 128k my_audio.webm
```


创建不同的视频
```

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=160:190 -b:v 250k video_160x90_250k.webm

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=320:180 -b:v 500k video_320x180_500k.webm

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=640:360 -b:v 750k  video_640x360_750k.webm

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=640:360 -b:v 1000k  video_640x360_1000k.webm

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=1280:720 -b:v 1500k  video_1280x720_1500k.webm
```


或使用命令创建以上视频：
```

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \
-g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=160:190 -b:v 250k video_160x90_250k.webm \
-an -vf scale=320:180 -b:v 500k video_320x180_500k.webm \
-an -vf scale=640:360 -b:v 750k  video_640x360_750k.webm \
-an -vf scale=640:360 -b:v 1000k  video_640x360_1000k.webm \
-an -vf scale=1280:720 -b:v 1500k  video_1280x720_1500k.webm
```

### 2. 创建清单文件
```

ffmpeg \
  -f webm_dash_manifest -i video_160x90_250k.webm \
  -f webm_dash_manifest -i video_320x180_500k.webm \
  -f webm_dash_manifest -i video_640x360_750k.webm \
  -f webm_dash_manifest -i video_1280x720_1500k.webm \
  -f webm_dash_manifest -i my_audio.webm \
  -c copy \
  -map 0 -map 1 -map 2 -map 3 -map 4 \
  -f webm_dash_manifest \
  -adaptation_sets "id=0,streams=0,1,2,3 id=1,streams=4" \
  my_video_manifest.mpd
```


`-map` 参数对应输入文件的顺序（每个文件只对应一个参数）。`-adaptation_sets` 参数将它们分配给适配集；例如，以上命令创建一个包含 0,1,2,3 的视频集（0），而另一个（1）仅仅包含视频流 4 和音频流。

将清单和相关的视频文件放在 Web 服务器或 CDN 上。DASH 通过 HTTP 来完成，因此只要你的 HTTP 服务器支持字节范围请求，并且 DASH 设置为使用 mimetype="application/dash+xml" 来支持 .mpd 文件即可。

使用 DASH-客户端
-----------

你将需要修改网页，使其首先指向 DASH 清单，而不是直接指向特定的视频文件：


```html
<video>
  <source src="movie.mpd" />
  <source src="movie.webm" />
  Your browser does not support the video tag.
</video>
```


如果浏览器支持 DASH，则你的视频现在将自适应地流式传输。

Links
-----

WebM DASH Specification at The WebM Project

DASH Industry Forum

WebM project description of how to create DASH files with FFMPEG
Web Audio playbackRate explained
================================

html 元素“audio”和“video”的 `playbackRate` 属性允许我们改变一段正在播放的网页音频或者视频的速度，或速率。本文详细解释了 `playbackRate`。

playbackRate 基础
---------------

让我们以一个简单的`playbackRate`用法示例开始：


```js
var myAudio = document.createElement("audio");
myAudio.setAttribute("src", "audiofile.mp3");
myAudio.playbackRate = 0.5;
```


在此我们创建了一个 html 元素“audio”，以我们选择的一个文件设置它的 `src`。然后我们把 `playbackRate` 设为 0.5，这代表一半的正常播放速度（`playbackRate` 是对原始速率的一个乘数）。

一个完整示例
------

让我们首先创建一个 html 元素“video”，在 HTML 中设置视频和播放速率控制：


```html
<video id="myVideo" controls>
  <source
 src="http://jplayer.org/video/m4v/Big\_Buck\_Bunny\_Trailer.m4v"
 type="video/mp4" />
  <source
 src="http://jplayer.org/video/webm/Big\_Buck\_Bunny\_Trailer.webm"
 type="video/webm" />
</video>

<form>
  <input id="pbr" type="range" value="1" min="0.5" max="4" step="0.1" />
  <p>Playback Rate <span id="currentPbr">1</span></p>
</form>
```


对它运用一些 JavaScript 代码：


```js
window.onload = function () {
  var v = document.getElementById("myVideo");
  var p = document.getElementById("pbr");
  var c = document.getElementById("currentPbr");

  p.addEventListener(
    "input",
    function () {
      c.innerHTML = p.value;
      v.playbackRate = p.value;
    },
    false,
  );
};
```


最后，我们监听指向 html 元素“input”的 `input` 事件，这允许我们对被改变的播放速率控制产生影响。

**备注：** 在线试用示例, 尝试调整播放速率控制看看效果。

defaultPlaybackRate 和 ratechange
--------------------------------

除了 `playbackRate`, 我们也有一个可用的 `defaultPlaybackRate` 属性，这让我们能设置默认的播放速率：对媒体文件重设置的播放速率；例如，如果我们改变视频的来源，或（在一些浏览器中）当产生一个`ended`事件。

所以 `defaultPlaybackRate` 允许我们在播放媒体文件之前设置播放速率，而`playbackRate` 只允许我们在媒体播放阶段改变它。

有一个可用事件 `ratechange`，每次 `playbackRate` 改变的时候均会触发。

浏览器支持
-----

* Chrome 20+ ✔
* Firefox 20+ ✔
* IE 9+ ✔
* Safari 6+ ✔
* Opera 15+ ✔
* Mobile Chrome (Android) ✖
* Mobile Firefox 24+ ✔
* IE Mobile ✖
* Mobile Safari 6+ (iOS) ✔
* Opera Mobile ✖
### 注意

* 大多数浏览器对 0.5 至 4 之外的`playbackRate`值会停止播放音频，而视频会静音播放。对大多数应用，推荐限制值的范围在 0.5 至 4 之间。
* 当 `playBackRate` 改变的时候音频的进度条不会变化。
* 负数不会引起媒体文件反向播放。
* 当`ended`事件触发时 IE9+ 会转换到默认播放速率。
* 当媒体源文件被替换时，Firefox 会触发 `ratechange` 事件。
* 在 iOS 7 中你只能在媒体暂停的时候影响`playbackRate`值（不是它播放的时候）。
参见
--

* Hyperaudio's Playback Rate Test
* HTMLMediaElement reference
FileReaderSync
==============

`FileReaderSync`接口允许以同步的方式读取`File`或`Blob`对象中的内容。

该接口只在workers里可用,因为在主线程里进行同步 I/O 操作可能会阻塞用户界面。

方法概述
----
```

ArrayBuffer readAsArrayBuffer(Blob blob);
DOMString readAsBinaryString(Blob blob);
DOMString readAsText(Blob blob, optional DOMString encoding);
DOMString readAsDataURL(Blob blob);
```

属性
--

该接口没有任何属性。

方法
--

### readAsArrayBuffer()

该方法可以读取指定的 `Blob` 或者 `File` 对象中的内容。当读取完毕后，返回一个 `ArrayBuffer` 对象，里面包含了被读取文件的内容数据。如果在读取过程中发生了错误，则会抛出相关的异常。
```

ArrayBuffer readAsArrayBuffer(
  in Blob blob
);
```


#### 参数

`blob`

将要被读取内容的`Blob` 或 `File` 对象。

#### 返回值

一个 `ArrayBuffer` 对象，包含了被读取文件的内容。

#### 异常

该方法可能引发下述异常：

`NotFoundError`

当`Blob`或`File`对象指代的资源无法找到时，触发该异常。比如，该资源已被删除的情况下。

`SecurityError`

当检测到下述几种问题情形时触发该异常：

* 资源已被第三方修改；
* 同时在进行多个读取操作；
* 资源的安全级别过高，不允许浏览器进行操作（比如系统文件）。

`NotReadableError`

当资源由于权限问题不能被读取时触发该异常。比如并发锁。

`EncodingError`

当资源是一个 data URL，并且超过了浏览器的限制大小时触发该异常。

### readAsBinaryString() 
已弃用

该方法可以读取指定的 `Blob` 或者 `File`对象的内容。当读取完毕后，返回一个`DOMString`对象，里面包含了被读取文件的二进制数据。如果在读取过程中发生了错误，则会抛出相关的异常。

**备注：** 该方法已被废弃，应该使用`readAsArrayBuffer()`来替代。
```

String readAsBinaryString(
  in Blob blob
);
```


#### 参数

`blob`

将要被读取内容的`Blob` 或 `File` 对象。

#### 返回值

`一个``DOMString`对象，包含了从资源中读取的二进制数据。

#### 异常

该方法可能引发下述异常：

`NotFoundError`

当`Blob`或`File`对象指代的资源无法找到时，触发该异常。比如，该资源已被删除的情况下。

`SecurityError`

当检测到下述几种问题情形时触发该异常：

* 资源已被第三方修改；
* 同时在进行多个读取操作；
* 资源的安全级别过高，不允许浏览器进行操作（比如系统文件）。

`NotReadableError`

当资源由于权限问题不能被读取时触发该异常（比如并发锁）。

`EncodingError`

当资源是一个 data URL，并且超过了浏览器的限制大小时触发该异常。

### readAsText()

该方法可以读取指定的 `Blob` 或者 `File`对象的内容。当读取完毕后，返回一个`DOMString`对象，里面包含了被读取文件的内容数据。可选参数 **`encoding`** 用来表示文件的编码类型，如果省略该参数，则该方法会使用一些算法自动检测文件的编码类型。如果在读取过程中发生了错误，则会抛出相关的异常。
```

String readAsText(
  in Blob blob,
  in DOMString encoding 可选
);
```


#### 参数

`blob`

将要被读取内容的`Blob` 或 `File` 对象。

`encoding`

可选参数，表示被读取文件的编码类型，比如**GBK** 或者 **UTF-8。**

#### 返回值

一个`DOMString`对象，包含了被读取文件的内容。

#### 异常

该方法可能引发下述异常：

`NotFoundError`

当`Blob`或`File`对象指代的资源无法找到时，触发该异常。比如，该资源已被删除的情况下。

`SecurityError`

当检测到下述几种问题情形时触发该异常：

* 资源已被第三方修改；
* 同时在进行多个读取操作；
* 资源的安全级别过高，不允许浏览器进行操作。（比如系统文件）。

`NotReadableError`

当资源由于权限问题不能被读取时触发该异常（比如并发锁）。

### readAsDataURL()

该方法可以读取指定的 `Blob` 或者 `File`对象的内容。当读取完毕后，返回一个 Data URL 格式的`DOMString`对象，里面包含了被读取文件的内容数据。如果在读取过程中发生了错误，则会抛出相关的异常。
```

String readAsDataURL(
  in Blob file
);
```


#### 参数

`blob`

将要被读取内容的`Blob` 或 `File` 对象。

#### 返回值

`一个``DOMString`对象，data URL 格式，包含了被读取文件的内容。

#### 异常

该方法可能引发下述异常：

`NotFoundError`

当`Blob`或`File`对象指代的资源无法找到时，触发该异常。比如，该资源已被删除的情况下。

`SecurityError`

当检测到下述几种问题情形时触发该异常：

* 资源已被第三方修改；
* 同时在进行多个读取操作；
* 资源的安全级别过高，不允许浏览器进行操作（比如系统文件）。

`NotReadableError`

当资源由于权限问题不能被读取时触发该异常（比如并发锁）。

`EncodingError`

当资源是一个 data URL，并且超过了浏览器的限制大小时触发该异常。

规范
--

| Specification |
| --- |
| File API # FileReaderSync |

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

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

参见
--

* `FileReader`
* `Blob`
* `File`
DOMHighResTimeStamp
===================

**`DOMHighResTimeStamp`** 是一个 double 类型，用于存储毫秒级的时间值。这种类型可以用来描述离散的时间点或者一段时间（两个离散时间点之间的时间差）。

这种基于毫秒精度的时间，应该精确到 5 微秒级别，其数值的小数部分代表了一个毫秒的小数（也就是微秒）。但是，如果浏览器不能提供精确到 5 微秒的时间值 (例如，由于硬件或软件的限制)，浏览器可以在表示一个以毫秒为单位的时间值时，精确到毫秒级别。同时要注意，在下一节中提到，由浏览器首选项控制的**降低时间精度**，是为了防止时序攻击和记录指纹。

此外，如果用户代理运行所在的设备或操作系统不具备精确到微秒级别的时钟，那么他们只能精确到毫秒。

降低时间精度
------

为了提供对抗时序攻击和记录指纹的保护措施，时间戳可能会四舍五入，这取决于浏览器设置。在火狐浏览器中，`privacy.reduceTimerPrecision` 首选项默认被启用，并且在火狐浏览器 59 版本中，它的默认值是 20 微秒。在火狐浏览器 60 版本中，这个默认值将是 2 毫秒。


```js
// reduced time precision (2ms) in Firefox 60
event.timeStamp;
// 1519211809934
// 1519211810362
// 1519211811670
// ...

// reduced time precision with `privacy.resistFingerprinting` enabled
event.timeStamp;
// 1519129853500
// 1519129858900
// 1519129864400
// ...
```


在火狐浏览器中，你也可以启用 `privacy.resistFingerprinting`，这使得时间戳的精度变成 100 毫秒或 `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` 的值，以较大者为准。

属性
--

*这个类型没有属性。它是一个双精度浮点数。*

### 值

`DOMHighResTimeStamp` 的值是一个双精度浮点数，它描述了两个时间点之间的经过的毫秒数（可以精确到 5 微秒，如果设备支持）。开始时间可以是由网站或 app 中的脚本定义的一个特定时间 T，也可以是**时间源**。

#### 时间源

**时间源**是一个可以被认定为当前文档生命周期的开始节点的标准时间，计算方法如下：

* 如果脚本的 global object 是 `Window`，则时间源的确定方式如下：
    + 如果当前 `Document` 是中加载的第一个 `Window`，则**时间源**是创建浏览器上下文的时间。
    + 如果处于卸载窗口中已加载的先前文档的过程中，一个确认对话框会显示出来，让用户确认是否离开前一页，则**时间源**是用户确认导航到新页面的这个时间，这一点是被认同的。
    + 如果以上方式都不能确定**时间源**，那么**时间源**是创建窗口中当前 `Document` 的导航发生的时机。
* 如果脚本中的全局对象是 `WorkerGlobalScope` (en-US)（意味着，该脚本以 web worker 的形式运行），则**时间源**是这个 worker 被创建的时刻。
* 在所有其他情况下，**时间源**的值是 undefined。
方法
--

*这个类型没有方法。*

用法说明
----

你可以通过调用 `performance` 的 `now()` 方法来获取当前的时间戳的值（自创建上下文以来经过的时间）。此方法在 `Window` 和 `Worker` 上下文中均可用。

示例
--

如果你需要确定从代码中某处开始经过了多少时间，可以执行以下操作：


```js
const startTime = performance.now();

/\* ... do things for a while ... \*/

const elapsedTime = performance.now() - startTime;
```


执行完毕后，`elapsedTime` 的值是从你在第一行代码记录的时间点开始后经过的毫秒数。

规范
--

#### No specification found

No specification data found for `api.DOMHighResTimestamp`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

参见
--

* Navigation Timing API (en-US)
* Performance.now()
* https://www.w3.org/TR/hr-time/#sec-DOMHighResTimeStamp
* https://www.w3.org/TR/hr-time-2/
CanvasPattern
=============

**`CanvasPattern`** 接口表示描述一个模板（基于 image、canvas 或 video）的不透明对象，通过 `CanvasRenderingContext2D.createPattern()` 方法创建。

属性
--

*非透明对象，没有暴露的属性。*

方法
--

*没有继承来的方法。*

`CanvasPattern.setTransform()`

应用 `DOMMatrix` 对模板做线性变换

规范
--

| Specification |
| --- |
| HTML Standard # canvaspattern |

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

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

参见
--

* `CanvasRenderingContext2D.createPattern()`
* `<canvas>` 元素及和 canvas 相关接口 `HTMLCanvasElement`
DataTransferItemList
====================

**`DataTransferItemList`** 对象是一组代表被拖动项的`DataTransferItem` 对象的列表。在拖动操作期间，每个`DragEvent` 都有一个 `dataTransfer` 属性，该属性是 `DataTransferItemList`.

该接口没有构造函数

属性
--

`DataTransferItemList.length` 只读 

`无符号长整型` ：列表中拖动项的数量。

方法
--

`DataTransferItemList.add()` (en-US)

向拖动项列表中添加新项 (`File`对象或`string`)，该方法返回一个 `DataTransferItem` 对象。

`DataTransferItemList.remove()` (en-US)

根据索引删除拖动项列表中的对象。

`DataTransferItemList.clear()` (en-US)

清空拖动项列表。

`DataTransferItemList.DataTransferItem()` (en-US)

取值方法：返回给定下标的`DataTransferItem`对象。

示例
--

每个方法或属性都有其引用页面，每一个引用页对应也有使用示例。

规范
--

| Specification |
| --- |
| HTML Standard # the-datatransferitemlist-interface |

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

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

`MediaQueryListEvent` 对象存储着发生在 `MediaQueryList` 对象上的变化的信息——作为一个在函数中被 `change` 事件引用的事件对象。

Event

MediaQueryListEvent构造函数
----

`MediaQueryListEvent()`

创建一个新的 `MediaQueryListEvent` 实例。

属性
--

*`MediaQueryListEvent` 接口的属性继承自它的父接口，`Event`。*

`MediaQueryListEvent.matches` (en-US) 只读 

 一个布尔值，如果 `document`
 目前匹配媒体查询列表，该值为 `true` ，反之为 `false`。


`MediaQueryListEvent.media` (en-US) 只读 

一个字符串，代表着一个序列化后的媒体查询。

方法
--

*`MediaQueryListEvent` 接口的方法继承自它的父接口，`Event`。*

示例
--


```js
var mql = window.matchMedia("(max-width: 600px)");

function screenTest(e) {
  if (e.matches) {
    /\* 视口等于或小于 600 像素 \*/
    para.textContent = "This is a narrow screen — less than 600px wide.";
    document.body.style.backgroundColor = "red";
  } else {
    /\* 视口大于 600 像素 \*/
    para.textContent = "This is a wide screen — more than 600px wide.";
    document.body.style.backgroundColor = "blue";
  }
}

mql.addListener(screenTest);
```

规范
--

| Specification |
| --- |
| CSSOM View Module # the-mediaquerylist-interface |

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

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

参见
--

* 媒体查询
* 在代码中使用媒体查询
* `window.matchMedia()`
* `MediaQueryList`
DataTransferItem
================

**`DataTransferItem`** 描述了一个拖拽项。在一个拖拽操作\*中，\*每一个 `drag event` 都有一个`dataTransfer` 属性，它包含一个存有拖拽数据的 `list` ，其中每一项都是一个 `DataTransferItem` 。

这个接口没有构造函数。

属性
--

`DataTransferItem.kind` 只读 

拖拽项的种类，`string` 或是 `file`。

`DataTransferItem.type` 只读 

拖拽项的类型，一般是一个 MIME 类型。

方法
--

`DataTransferItem.getAsFile()`

返回一个关联拖拽项的 `File` 对象（当拖拽项不是一个文件时返回 null）。

`DataTransferItem.getAsString()`

使用拖拽项的字符串作为参数执行指定回调函数。

`DataTransferItem.webkitGetAsEntry()` 
非标准

返回一个基于 `FileSystemEntry` (en-US) 的对象来表示文件系统中选中的项目。通常是返回一个`FileSystemFileEntry` 或是 `FileSystemDirectoryEntry` 对象。

例子
--

这个接口所有的属性和方法都有自己的介绍页，请到各自的介绍页中查看示例用法。

规范
--

| Specification |
| --- |
| HTML Standard # the-datatransferitem-interface |

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

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

`IdleDeadline` 接口是在调用 `Window.requestIdleCallback()` 时创建的闲置回调的输入参数的数据类型。它提供了 `timeRemaining()` 方法，用来判断用户代理预计还剩余多少闲置时间；以及 `didTimeout` (en-US) 属性，用来判断当前的回调函数是否因超时而被执行。

想要学习更多有关请求回调工作原理的知识，请参考后台任务协作调度。

实例属性
----

`IdleDeadline.didTimeout` (en-US) 只读 

一个布尔值，如果回调是因为超过了设置的超时时间而被执行的，则其值为 `true`。

实例方法
----

`IdleDeadline.timeRemaining()`

返回一个 `DOMHighResTimeStamp`，其为浮点数，用来表示当前闲置周期的预估剩余毫秒数。如果闲置期已经结束，则其值为 0。你的回调函数可以重复调用该函数，以判断目前是否有足够的时间来执行更多的任务。

示例
--

在后台任务协作调度 API 中查看我们的完整示例。

规范
--

| Specification |
| --- |
| requestIdleCallback() Cooperative Scheduling of Background Tasks # the-idledeadline-interface |

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

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

参见
--

* 后台任务协作调度 API
* `Window.requestIdleCallback()`
* `Window.cancelIdleCallback()`
Blob
====

`Blob` 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 `ReadableStream` 来用于数据操作。

Blob 表示的不一定是 JavaScript 原生格式的数据。`File` 接口基于 `Blob`，继承了 blob 的功能并将其扩展以支持用户系统上的文件。

使用 blob
-------

要从其他非 blob 对象和数据构造一个 `Blob`，请使用 `Blob()` 构造函数。要创建一个 blob 数据的子集 blob，请使用 `slice()` 方法。要获取用户文件系统上的文件对应的 `Blob` 对象，请参阅 `File` 文档。

接受 `Blob` 对象的 API 也被列在 `File` 文档中。

构造函数
----

`Blob()`

返回一个新创建的 `Blob` 对象，其内容由参数中给定的数组拼接组成。

实例属性
----

`Blob.size` 只读 

`Blob` 对象中所包含数据的大小（字节）。

`Blob.type` 只读 

一个字符串，表明该 `Blob` 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。

实例方法
----

`Blob.arrayBuffer()`

返回一个 promise，其会兑现一个包含 `Blob` 所有内容的二进制格式的 `ArrayBuffer`。

`Blob.slice()`

返回一个新的 `Blob` 对象，包含了源 `Blob` 对象中指定范围内的数据。

`Blob.stream()`

返回一个能读取 `Blob` 内容的 `ReadableStream`。

`Blob.text()`

返回一个 promise，其会兑现一个包含 `Blob` 所有内容的 UTF-8 格式的字符串。

示例
--

### 创建一个 blob

`Blob()` 构造函数可以通过其他对象创建 blob。例如，用一个 JSON 字符串构造一个 blob：


```js
const obj = { hello: "world" };
const blob = new Blob([JSON.stringify(obj, null, 2)], {
  type: "application/json",
});
```

### 创建一个指向类型化数组的 URL

以下代码创建了一个 JavaScript 类型化数组，并创建一个新的，包含类型化数组中的数据的 `Blob`。然后调用 `URL.createObjectURL()` 方法，将 blob 转换为一个 URL。

#### HTML


```html
<p>
  此示例创建一个类型化数组，其中包含空格以及 A 到 Z 的 ASCII
  字符。然后将其转换为一个对象 URL。并创建一个打开该对象 URL
  的链接。点击这个链接以查看对象 URL 解码后的内容。
</p>
```


#### JavaScript

该示例代码片段的主要片段是 `typedArrayToURL()` 函数，其用于从给定的类型化数组创建一个 `Blob`，并返回该 `Blob` 的对象 URL。将数据转换为对象 URL 后，可通过多种方式使用，包括：作为 `<img>` 元素 `src` 属性的值（当然，假设给定的数据包含了一张图片）。


```js
function showViewLiveResultButton() {
  if (window.self !== window.top) {
    // 如果当前文档是否在一个 frame 中，则
    // 确保让用户在新的标签页或窗口中打开它。
    // 否则，此示例将无法正常演示。
    const p = document.querySelector("p");
    p.textContent = "";
    const button = document.createElement("button");
    button.textContent = "查看上面示例代码的渲染结果";
    p.append(button);
    button.addEventListener("click", () => window.open(location.href));
    return true;
  }
  return false;
}

if (!showViewLiveResultButton()) {
  function typedArrayToURL(typedArray, mimeType) {
    return URL.createObjectURL(
      new Blob([typedArray.buffer], { type: mimeType }),
    );
  }
  const bytes = new Uint8Array(59);

  for (let i = 0; i < 59; i++) {
    bytes[i] = 32 + i;
  }

  const url = typedArrayToURL(bytes, "text/plain");

  const link = document.createElement("a");
  link.href = url;
  link.innerText = "打开这个数组的 URL";

  document.body.appendChild(link);
}
```


#### 结果

### 从 blob 中提取数据

一种从 `Blob` 中读取内容的方法是使用 `FileReader`。以下代码将 `Blob` 的内容作为类型化数组读取：


```js
const reader = new FileReader();
reader.addEventListener("loadend", () => {
  // reader.result 包含被转化为类型化数组的 blob 中的内容
});
reader.readAsArrayBuffer(blob);
```


另一种读取 `Blob` 中内容的方式是使用 `Response` 对象。下述代码将 `Blob` 中的内容读取为文本：


```js
const text = await new Response(blob).text();
```


或者，也可以使用 `Blob.text()`：


```js
const text = await blob.text();
```


通过使用 `FileReader` 的其他方法可以把 Blob 读取为字符串或者数据 URL。

规范
--

| Specification |
| --- |
| File API # blob-section |

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

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

参见
--

* `FileReader`
* `File`
* `URL.createObjectURL`
* 在 web 应用程序中使用文件
ChannelMergerNode
=================

`ChannelMergerNode` 接口，经常与其对应的 `ChannelSplitterNode` (en-US) 接口一起使用，将不同的单声道输入重新组合成单个输出。每个输入用于填充输出的一个通道。这对于分别访问每个通道非常有用，例如，执行通道混合时，必须在每个信道上单独控制增益。

![](/zh-CN/docs/Web/API/ChannelMergerNode/webaudiomerger.png)

如果 `ChannelMergerNode` 用于一个单一输出，但输入数量与用于合并的信道数量相同；输入的数量被定义为其构造函数的参数及对 `AudioContext.createChannelMerger` 的调用。如果没有给出值，则为默认值 `6`。

使用 `ChannelMergerNode`，可以创建比渲染硬件能处理的更多的通道输出。在这种情况下，当信号发送至 `AudioContext.listener` 对象时，额外的信道将被忽略。

|  |  |
| --- | --- |
| 输入数量 | 变量; 默认为 `6`. |
| 输出数量 | `1` |
| 通道计数模式 | `"max"` |
| 通道数量 | `2` (不在默认计数模式下使用) |
| 频道解释 | `"speakers"` |

构造函数
----

`ChannelMergerNode()`

生成一个新的 `ChannelMergerNode` 对象实例。

属性
--

*没有具体属性；从其父级继承属性，`AudioNode`。*

方法
--

*没有具体方法；从其父级继承方法，`AudioNode`。*

例子
--

参见 `BaseAudioContext.createChannelMerger()` 以获取示例代码。

规格
--

| Specification |
| --- |
| Web Audio API # ChannelMergerNode |

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

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

参见
--

* Using the Web Audio API (en-US)
WebCodecs API
=============

**WebCodecs API** 为 web 开发者提供了对视频流的单个帧和音频数据块的底层访问能力。这对于那些需要完全控制媒体处理方式的 web 应用程序非常有用。例如，视频或音频编辑器，以及视频会议。

概念和用法
-----

许多 Web API 在内部都使用了媒体编码器。例如，`Web Audio API`，以及 `WebRTC API`。然而，这些 API 不允许开发者处理视频流的单个帧和未合成的编码音频块或视频块。

Web 开发者通常使用 WebAssembly 来绕过这一限制，并在浏览器中使用媒体编解码器。然而，这需要额外的带宽来下载浏览器中已经存在的编解码器，降低了性能和能效，并增加了额外的开发成本。

WebCodecs API 提供了对浏览器中已存在的编解码器的访问能力。它可以访问原始视频帧、音频数据块、图像解码器、音频和视频的编码器及解码器

接口
--

`AudioDecoder` (en-US)

解码 `EncodedAudioChunk` (en-US) 对象。

`VideoDecoder` (en-US)

解码 `EncodedVideoChunk` (en-US) 对象。

`AudioEncoder` (en-US)

编码 `AudioData` (en-US) 对象。

`VideoEncoder` (en-US)

编码 `VideoFrame` (en-US) 对象。

`EncodedAudioChunk` (en-US)

表示特定于编解码器的编码音频字节。

`EncodedVideoChunk` (en-US)

表示特定于编解码器的编码视频字节。

`AudioData` (en-US)

表示未编码的音频数据。

`VideoFrame` (en-US)

表示一帧未编码的视频数据。

`VideoColorSpace` (en-US)

表示视频帧的颜色空间。

`ImageDecoder` (en-US)

解包和解码图像数据，允许访问动画图像中的帧序列。

`ImageTrackList` (en-US)

表示图像中可用的轨道列表。

`ImageTrack` (en-US)

表示单个图像轨道。

示例
--

在下面这个例子中，获取从 `MediaStreamTrackProcessor` (en-US) 中返回的帧，然后对他们进行编码。在文章使用 WebCodec 处理视频查看完整示例并了解更多细节。


```js
let frame_counter = 0;
const track = stream.getVideoTracks()[0];
const media_processor = new MediaStreamTrackProcessor(track);
const reader = media_processor.readable.getReader();
while (true) {
  const result = await reader.read();
  if (result.done) break;
  let frame = result.value;
  if (encoder.encodeQueueSize > 2) {
    // Too many frames in flight, encoder is overwhelmed
    // let's drop this frame.
    frame.close();
  } else {
    frame_counter++;
    const insert_keyframe = frame_counter % 150 === 0;
    encoder.encode(frame, { keyFrame: insert_keyframe });
    frame.close();
  }
}
```

参考
--

* 使用 WebCodec 处理视频
SVGGraphicsElement
==================

**`SVGGraphicsElement`** 接口表示 SVG 元素，其主要目的是将图形直接渲染到组中。

**备注：** 该接口是 SVG 2 中引入的，它取代了 SVG 1.1 中的`SVGLocatable`和`SVGTransformable`接口。

属性
--

此接口还从其父接口`SVGElement`继承属性

`SVGGraphicsElement.transform` 只读 

一个`SVGAnimatedTransformList` (en-US)反映给定元素的`transform`属性的计算值及其对应的`transform`属性。

方法
--

此接口还从其父方法`SVGElement`继承方法。

`SVGGraphicsElement.getBBox()`

返回一个`DOMRect`，它表示当前元素的计算出的边界框。

`SVGGraphicsElement.getCTM()`

返回一个`DOMMatrix`，代表将当前元素的坐标系转换为其 SVG 视口的坐标系的矩阵。

`SVGGraphicsElement.getScreenCTM()`

返回一个`DOMMatrix`代表表示将当前元素的坐标系转换为 SVG 文档片段的 SVG 视口的坐标系的矩阵。

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGGraphicsElement |

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

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