# @antmedia/web\_player 中文文档

规范地址：https://npmcn.com/package/%40antmedia/web_player/

版本：2\.13\.2
npm 元数据更新时间：2026-09-07T10:48:27.765Z
中文译文更新时间：2026-11-06T15:03:21.358Z
软件包许可：ISC

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40antmedia/web_player
原文对照：https://npmcn.com/package/%40antmedia/web_player/?lang=original
项目主页：https://github.com/ant-media/Web-Player#readme
源码仓库：https://github.com/ant-media/Web-Player

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：13.8 MB，44 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：9 个
- 首次发布：2024-01-22T10:13:50.705Z
- 最新版本发布：2026-09-07T10:48:27.369Z
- 近 30 天下载量：2964（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：67（近 12 个月 6 个）

## 中文简介

能播放 WebRTC, HLS, DASH 的蚂蚁媒体服务器播放器

## 安装

```sh
npm install @antmedia/web_player
```

也可以使用：`pnpm add @antmedia/web_player`、`yarn add @antmedia/web_player`、`bun add @antmedia/web_player`

## README

# 蚂蚁媒体服务器的网络播放器

Web Player是Ant Media Server的强大多能的玩家,旨在将流直接嵌入并播放于网络应用中. 它支持包括WebRTC,HLS,DASH,和VR 360在内的各种流类型,确保了广泛的相容性和高性能. 玩家可以通过URL参数或直接在您的代码中进行配置,既提供灵活性,也提供使用方便.

## 特征

-   支持WebRTC,HLS,DASH,和VR 360流.
-   通过 URL 参数或直接在代码中配置 .
-   支持基于符号的对流访问的安全性.
-   用于无缝用户体验的自动播放和哑弹选项.
-   不同流技术和格式的自定义播放顺序和类型.
-   DASH 玩家的可调整目标延迟 .
-   360度视频回放能力.

## 安装

使用 npm 安装 Web Player 软件包 :

```bash
npm i @antmedia/web_player
```

## 使用量

### 基本用途

要使用"Web Player",导入并初始化它,使用从URL收到的参数. 详见下文配置参数部分.

1.  在您的网络应用程序中, 创建带有 id 视频 container 的 div 。 这将成为玩家的容器.

```
<div id="video_container" ></div>
```

2.  初始化玩家如下:

```javascript
import { WebPlayer } from "@antmedia/web_player";

var embeddedPlayer = new WebPlayer(window, document.getElementById("video_container"), null);

embeddedPlayer.initialize().then(() => {
  embeddedPlayer.play();
});
```

该用法的样本见: [在 StreamApp 中播放.html](https://github.com/ant-media/StreamApp/blob/master/src/main/webapp/play.html)

### 高级使用

或者,您可将参数作为对象传递到 WebPlayer 构建器.

1.  在您的网络应用程序中, 创建带有 id 视频 container 的 div 。 这将成为玩家的容器.

```
<div id="video_container" ></div>
```

2.  初始化玩家如下

```javascript
var player = new WebPlayer({
  streamId: "myStreamId",
  httpBaseURL: "http://example.antmedia.io:5080/WebRTCAppEE/", //Remember to add trailing slash(/)
}, document.getElementById("video_container"), null);

player.initialize().then(() => {
  player.play();
}).catch((error) => {
  console.error("Error while initializing embedded player: " + error);
});
```

该用法的样本见: [ant-Media-Management-Console中的app.page.组件.ts](https://github.com/ant-media/Ant-Media-Management-Console/blob/master/src/app/app.page/app.page.component.ts)

## 配置参数

玩家通过URL或直接在代码中接受多个配置参数:

1.  `id` (String):要播放的溪流ID. 此参数为强制.
2.  `token` (String):用于溪流访问的标志. 如果在服务器一侧启用了符号安全,则强制要求.
3.  `autoplay` (Boolean):如果有的话,自动播放流. 可选的 默认值是 `true`。 。 。 .
4.  `mute` (Boolean):如果有流水可用,则开始以哑弹模式播放. 可选的 默认值是 `true`。 。 。 .
5.  `playOrder` (平按:取出"活活"作取出"活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活 可选的 默认值是 `"webrtc,hls"`。可能数值包括: `"hls,webrtc"`, (中文(简体) ), `"webrtc"`, (中文(简体) ), `"hls"`, (中文(简体) ), `"vod"`, (中文(简体) ), `"dash"`。 。 。 .
6.  `playType` (平按:作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作作 可选的 默认值是 `"mp4,webm"`。可能数值包括: `"webm,mp4"`, (中文(简体) ), `"mp4"`, (中文(简体) ), `"webm"`, (中文(简体) ), `"mov"`。 。 。 .
7.  `targetLatency` (数量):DASH玩家的目标延迟. 可选的 默认值是 `3`。 。 。 .
8.  `is360` (Boolean):以360模式启用回放. 可选的 默认值是 `false`。 。 。 .

## 支助

如需协助和进一步查询,请访问 [蚂蚁媒体服务器社区](https://github.com/orgs/ant-media/discussions)。 如果您是企业用户, 您可以通过发送电子邮件获得支持 [支持@antmedia.io](mailto:support@antmedia.io)。 。 。 .

## 问题

关于报告问题,请在《公约》 [蚂蚁-媒体-服务器问题页面](https://github.com/ant-media/Ant-Media-Server/issues)。 。 。 .

## 捐款

捐款受到热烈欢迎。 如果您想帮助改进Web Player,请向寄存器提交拉出请求或报告遇到的任何问题.

享受与蚂蚁媒体服务器的Web Player的流媒体!

## 常见问题

### @antmedia/web\_player 是什么？

能播放 WebRTC, HLS, DASH 的蚂蚁媒体服务器播放器

### 如何安装 @antmedia/web\_player？

在项目目录运行 npm install @antmedia/web\_player，或使用 pnpm add / yarn add / bun add。

### @antmedia/web\_player 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @antmedia/web\_player 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @antmedia/web\_player 可以商用吗？

@antmedia/web\_player 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @antmedia/web\_player 的下载量有多少？

根据 npm 官方下载统计，@antmedia/web\_player 在 2026/10/06 – 2026/11/04 这 30 天内被下载 2,964 次，日均约 99 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @antmedia/web\_player 还在维护吗？

最新版本 2\.13\.2 发布于 2026/09/07（2 个月前）；至今共发布 67 个版本，其中过去 12 个月发布了 6 个；首次发布于 2024/01/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。