# @broadcastingplatforms/player 中文文档

规范地址：https://npmcn.com/package/%40broadcastingplatforms/player/

版本：1\.5\.10
npm 元数据更新时间：2026-11-06T12:28:55.650Z
中文译文更新时间：2026-11-09T21:18:36.984Z
软件包许可：SEE LICENSE IN LICENSE

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

原始 npm 页面：https://www.npmjs.com/package/%40broadcastingplatforms/player
原文对照：https://npmcn.com/package/%40broadcastingplatforms/player/?lang=original

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

- 包体积（解压后）：2.2 MB，71 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：7 个
- 首次发布：2026-01-14T12:56:31.707Z
- 最新版本发布：2026-11-06T12:28:55.379Z
- 近 30 天下载量：1724（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：35（近 12 个月 35 个）

## 中文简介

用 Lit 构建的通用视频播放器网络组件

## 安装

```sh
npm install @broadcastingplatforms/player
```

也可以使用：`pnpm add @broadcastingplatforms/player`、`yarn add @broadcastingplatforms/player`、`bun add @broadcastingplatforms/player`

## README

# @ 广播平台/ 播放器

通用视频播放器网络组件由Lit. Supports HLS,WebRTC(通过纳米斯特雷姆)和LiveKit所建.

## 安装

```bash
npm install @broadcastingplatforms/player
# or
pnpm add @broadcastingplatforms/player
```

## 独立对非独立

### 独立套装

需要所有依赖性(HLS.js等)捆绑的单个文件时使用独立捆绑. CDN使用理想或简单的HTML页面.

```html
<script type="module" src="https://unpkg.com/@broadcastingplatforms/player/dist/bp-player.standalone.mjs"></script>

<bp-player
  source='{"sources":[{"type":"video","url":"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"}]}'
  muted
  autoplay
></bp-player>
```

### 非单体( 邦德勒 )

使用捆绑时使用标准导入( Vite, webpack等) 。 依附有外生而有树相起.

```ts
import '@broadcastingplatforms/player';
```

```html
<bp-player
  source='{"sources":[{"type":"video","url":"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"}]}'
  muted
  autoplay
></bp-player>
```

## 基本用途

### HLS 视频 (大巴克兔子)

```html
<bp-player
  source='{"sources":[{"type":"video","url":"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"}],"poster":"https://peach.blender.org/wp-content/uploads/bbb-splash.png"}'
  muted
  autoplay
></bp-player>
```

### 平流线

播放来自 BPLive 平台的直播流 :

```html
<bp-player id="live-player" muted autoplay></bp-player>

<script type="module">
  const player = document.getElementById('live-player');

  player.source = { sources: [{ type: 'bplive', streamId: 123 }] };
  player.config = {
    bpLive: {
      discoveryUrl: 'https://api.example.com',
      authToken: await getAuthToken() // Set programmatically, not in HTML
    }
  };
</script>
```

### BPLive 剪贴板

从 BPLive 平台播放剪辑 :

```html
<bp-player id="clip-player" muted autoplay></bp-player>

<script type="module">
  const player = document.getElementById('clip-player');

  player.source = {
    sources: [{ type: 'bplive', clipId: 456, preferredOrientation: 'portrait' }]
  };
  player.config = {
    bpLive: {
      discoveryUrl: 'https://api.example.com',
      authToken: await getAuthToken() // Set programmatically, not in HTML
    }
  };
</script>
```

### 带有默认 UI

```html
<bp-default-ui
  source='{"sources":[{"type":"video","url":"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"}]}'
></bp-default-ui>
```

### 程序控制

```ts
import { BPPlayer, type SourceDescription } from '@broadcastingplatforms/player';

const player = document.querySelector('bp-player') as BPPlayer;

// Set source via property (object)
player.source = {
  sources: [{ type: 'video', url: 'https://example.com/stream.m3u8' }],
  poster: 'https://example.com/poster.jpg'
};

player.addEventListener('ready', (e) => {
  const core = e.detail; // PlayerCore instance
  
  core.play();
  core.pause();
  core.seek(30); // seek to 30 seconds
  core.setVolume(0.5);
  core.setMuted(true);
  
  // Access current state
  console.log(core.state.currentTime);
  console.log(core.state.duration);
  console.log(core.state.paused);
});
```

## 属性

属性可以被设定为JSON字符串或JavaScript属性.

| 属性 | 类型 | 说明 |
| --- | --- | --- |
| `source` | `SourceDescription` (杰森语) | 源描述为 `sources` 数组和可选 `poster` |
| `config` | `ProviderConfig` (杰森语) | 提供者配置( HLS, NanoPlayer, LiveKit, BPLive) |
| `autoplay` | `boolean` | 自动启动播放 |
| `muted` | `boolean` | 开始哑声 |
| `loop` | `boolean` | 回放循环 |

### 来源描述

```ts
interface SourceDescription {
  sources: PlayerSource[];
  poster?: string;
}
```

### 玩家来源类型

```ts
// Standard video/HLS source
interface VideoSource {
  type: 'video';
  url: string;
}

// BPLive stream source
interface BPLiveStreamSource {
  type: 'bplive';
  streamId: number;
}

// BPLive clip source
interface BPLiveClipSource {
  type: 'bplive';
  clipId: number;
  preferredOrientation?: 'landscape' | 'portrait'; // defaults to 'landscape'
}
```

### 提供者配置

```ts
interface ProviderConfig {
  bpLive?: BPLiveConfig;
  // ... other provider configs
}

interface BPLiveConfig {
  discoveryUrl: string;  // Base URL of the BPLive API (required)
  authToken?: string;    // Bearer token for authenticated API requests
}
```

### 分析

通过 `ready` 使用 `@broadcastingplatforms/web-connectors`数字 :

```html
<bp-player
  id="player"
  source='{"sources":[{"type":"video","url":"..."}]}'
></bp-player>

<script type="module">
  import { createMuxConnector } from '@broadcastingplatforms/web-connectors/mux';

  document.getElementById('player').addEventListener('ready', (e) => {
    // Auto-destroys when player is destroyed
    createMuxConnector(e.detail, {
      envKey: 'your-mux-env-key',
      data: { video_title: 'My Video' }
    });
  });
</script>
```

## 活动

| 活动 | 细节 | 说明 |
| --- | --- | --- |
| `ready` | `PlayerCore` | 玩家准备好了就被解雇了 |
| `play` | \- 说吧 | 播放开始 |
| `pause` | \- 说吧 | 播放暂停 |
| `ended` | \- 说吧 | 播放结束 |
| `timeupdate` | \- 说吧 | 当前更新时间 |
| `error` | \- 说吧 | 回放出错 |

## 自定义视频元素

对于高级使用案例,您可以直接使用自定义视频元素:

```ts
import { HlsVideoElement, NanoVideoElement, LiveKitVideoElement } from '@broadcastingplatforms/player/elements';
```

这些是 [介质色调](https://www.media-chrome.org/) 兼容自定义元素.

## 常见问题

### @broadcastingplatforms/player 是什么？

用 Lit 构建的通用视频播放器网络组件

### 如何安装 @broadcastingplatforms/player？

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

### @broadcastingplatforms/player 支持 TypeScript 吗？

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

### @broadcastingplatforms/player 支持 ESM 还是 CommonJS？

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

### @broadcastingplatforms/player 可以商用吗？

@broadcastingplatforms/player 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @broadcastingplatforms/player 的下载量有多少？

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

### @broadcastingplatforms/player 还在维护吗？

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