# @bitmovin/player-web-x 中文文档

规范地址：https://npmcn.com/package/%40bitmovin/player-web-x/

版本：10\.3\.1
npm 元数据更新时间：2026-11-05T09:04:44.352Z
中文译文更新时间：2026-11-08T04:35:26.740Z
软件包许可：未声明

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

原始 npm 页面：https://www.npmjs.com/package/%40bitmovin/player-web-x
原文对照：https://npmcn.com/package/%40bitmovin/player-web-x/?lang=original
项目主页：https://bitmovin.com/

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

- 包体积（解压后）：6.4 MB，489 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2023-11-16T13:44:30.027Z
- 最新版本发布：2026-10-27T16:13:45.511Z
- 近 30 天下载量：30224（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：56（近 12 个月 32 个）

## 中文简介

用于 MPEG- DASH 和 HLS 的 Bitmovin HTML5 适应性流线播放器

## 安装

```sh
npm install @bitmovin/player-web-x
```

也可以使用：`pnpm add @bitmovin/player-web-x`、`yarn add @bitmovin/player-web-x`、`bun add @bitmovin/player-web-x`

## README

# 玩家-网络-x

下一代Bitmovin网络播放器.

玩家Web X(简称PWX)是Bitmovin公司开发的网络的新视频播放器. 它基于一个内部开发的图书馆,我们称之为"凤凰框架".

凤凰城框架从地上建起,其基本原理包括结构化的通币、效果系统和一揽子第一架构,促进扩展。 玩家Web X是建立在框架上方的由状态驱动的架构上. 玩家Web X的开发重点是使一个表现高的玩家,由不同包组成的不同,更小和目的所构建的捆绑,以及一个包API. API软件包允许自定义行为和功能在玩家外部构建,使我们的客户能够支持自己的使用案例而不需要我们的帮助.

目前,Player Web X有对使用fMP4和TS片段格式的HLS流的支持和对DASH流和黏膜内容的部分支持. 关于所支持的特性的更详细和完整的清单,请参见: [支持矩阵](https://developer.bitmovin.com/playback/docs/player-web-x-support-matrix)。 。 。 .

要了解更多框架和玩家,请检查我们 [完整文档](https://developer.bitmovin.com/playback/docs/about-player-web-x)。 。 。 .

## 开始

用 Player Web X 启动最简单的方式是使用我们从 cdn 开始的捆绑和一个简单的 HTML 页面将玩家嵌入其中. 你可以更多地读到我们的不同方法 [正在启动页面](https://developer.bitmovin.com/playback/docs/player-web-x-getting-started)。 。 。 .

但在这里,我们将只覆盖 Npm 包的使用 将玩家捆绑到您的应用程序.

### 使用 npm 软件包

此示例显示如何从 npm 使用单曲播放器 。 首先您需要将玩家安装到您的工程中

```
npm install @bitmovin/player-web-x
```

```typescript
import { Player } from '@bitmovin/player-web-x/bundles/playerx-hls';

const player = Player({
  key: 'YOUR-PLAYER-KEY',
  defaultContainer: document.getElementById('player-container')
});

const sourceConfig = {
  resources: [{
    url: 'https://cdn.bitmovin.com/content/assets/streams-sample-video/tos/m3u8/index.m3u8',
  }]
}

player.sources.add(sourceConfig);
```

或用包裹. 在这种情况下,您需要自己合并API类型.

```typescript

import { Player } from '@bitmovin/player-web-x/bundles/playerx-core';
import { AdaptationPackage } from '@bitmovin/player-web-x/packages/playerx-adaptation.package';
import { CapabilitiesPackage } from '@bitmovin/player-web-x/packages/playerx-capabilities.package';
import { ContainerMp4Package } from '@bitmovin/player-web-x/packages/playerx-container-mp4.package';
import { DataPackage } from '@bitmovin/player-web-x/packages/playerx-data.package';
import { HlsPackage } from '@bitmovin/player-web-x/packages/playerx-hls.package';
import { HlsParsingPackage } from '@bitmovin/player-web-x/packages/playerx-hls-parsing.package';
import { HlsTranslationPackage } from '@bitmovin/player-web-x/packages/playerx-hls-translation.package';
import { NetworkPackage } from '@bitmovin/player-web-x/packages/playerx-network.package';
import { PresentationPackage } from '@bitmovin/player-web-x/packages/playerx-presentation.package';
import { SegmentProcessingPackage } from '@bitmovin/player-web-x/packages/playerx-segment-processing.package';
import { SourcePackage } from '@bitmovin/player-web-x/packages/playerx-source.package';
import { SourcesApiPackage }  from '@bitmovin/player-web-x/packages/playerx-sources-api.package';
import { ViewModePackage }  from '@bitmovin/player-web-x/packages/playerx-view-mode.package';
import type { ViewModeApi } from '@bitmovin/player-web-x/types/framework/core/view-mode/Types'
import type { SourceApiBase, SourcesApi } from '@bitmovin/player-web-x/types/framework/core/sources-api/Types'
import type { PlayerApi }  from '@bitmovin/player-web-x/types/framework/core/player-api/Types'

type SourceApi = SourceApiBase & ViewModeApi;
type MyApi = PlayerApi & SourcesApi<SourceApi>;

const player = Player({
  key: 'YOUR-PLAYER-KEY',
  defaultContainer: document.getElementById('player-container')
}) as MyApi

player.packages.add(CapabilitiesPackage);
player.packages.add(SegmentProcessingPackage);
player.packages.add(ContainerMp4Package);
player.packages.add(DataPackage);
player.packages.add(NetworkPackage);
player.packages.add(HlsTranslationPackage);
player.packages.add(HlsParsingPackage);
player.packages.add(HlsPackage);
player.packages.add(PresentationPackage);
player.packages.add(SourcePackage);
player.packages.add(AdaptationPackage);
player.packages.add(SourcesApiPackage);
player.packages.add(ViewModePackage);

const sourceConfig = {
  resources: [{
    url: 'https://cdn.bitmovin.com/content/assets/streams-sample-video/tos/m3u8/index.m3u8',
  }]
}

player.sources.add(sourceConfig);
```

## Bitmovin 播放器 V8 兼容性

为了避免被干扰,我们还建立了一个兼容层,允许您使用此玩家作为v8的下拉- 更多关于它的读取在我们 [文档](https://developer.bitmovin.com/playback/docs/player-web-x-v8-compatibility)

## 软件包模板存储器

为了了解更多关于软件包以及如何构建软件包,请检查我们的 [软件包模板仓库](https://github.com/bitmovin/pwx-package-template)。它包括各种类型的软件包的例子,也作为软件包构建系统发挥作用.

## 常见问题

### @bitmovin/player-web-x 是什么？

用于 MPEG- DASH 和 HLS 的 Bitmovin HTML5 适应性流线播放器

### 如何安装 @bitmovin/player-web-x？

在项目目录运行 npm install @bitmovin/player-web-x，或使用 pnpm add / yarn add / bun add。

### @bitmovin/player-web-x 支持 TypeScript 吗？

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

### @bitmovin/player-web-x 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @bitmovin/player-web-x 可以商用吗？

@bitmovin/player-web-x 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @bitmovin/player-web-x 的下载量有多少？

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

### @bitmovin/player-web-x 还在维护吗？

最新版本 10\.3\.1 发布于 2026/10/28（11 天前）；至今共发布 56 个版本，其中过去 12 个月发布了 32 个；首次发布于 2023/11/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。