# @brightcove/react-player-loader 中文文档

规范地址：https://npmcn.com/package/%40brightcove/react-player-loader/

版本：1\.5\.1
npm 元数据更新时间：2026-11-05T21:27:26.590Z
中文译文更新时间：2026-11-08T15:16:55.484Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40brightcove/react-player-loader
原文对照：https://npmcn.com/package/%40brightcove/react-player-loader/?lang=original
项目主页：https://github.com/brightcove/react-player-loader#readme
源码仓库：https://github.com/brightcove/react-player-loader

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

- 包体积（解压后）：649 kB，15 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：1 个
- peer 依赖：react \>=15\.0\.0
- 首次发布：2018-08-21T21:11:41.653Z
- 最新版本发布：2025-10-17T15:55:14.520Z
- 近 30 天下载量：200017（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：17（近 12 个月 0 个）

## 中文简介

Blightcove 玩家的官方反应组件

## 安装

```sh
npm install @brightcove/react-player-loader
```

也可以使用：`pnpm add @brightcove/react-player-loader`、`yarn add @brightcove/react-player-loader`、`bun add @brightcove/react-player-loader`

## README

# @ brightcove/ react-player-loader (英语)

[![Build Status](https://travis-ci.org/brightcove/react-player-loader.svg?branch=master)](https://travis-ci.org/brightcove/react-player-loader) [![Greenkeeper badge](https://badges.greenkeeper.io/brightcove/react-player-loader.svg)](https://greenkeeper.io/)

[![NPM](https://nodeico.herokuapp.com/@brightcove/react-player-loader.svg)](https://npmjs.com/package/@brightcove/react-player-loader)

在浏览器中装入 Blightcove Player 的回放组件 .

## Blightcove 玩家支持

这个图书馆 [与 Blightcove 玩家加载器相同的支持特性](https://github.com/brightcove/player-loader#brightcove-player-support)。 。 。 .

## 目录

-   [安装](https://npmcn.com/package/%40brightcove/react-player-loader/#readme-installation)
-   [JSX的标准使用](https://npmcn.com/package/%40brightcove/react-player-loader/#readme-standard-usage-with-jsx)
-   [道具](https://npmcn.com/package/%40brightcove/react-player-loader/#readme-props)
    -   [`attrs`](https://npmcn.com/package/%40brightcove/react-player-loader/#readme-attrs)
    -   [`baseUrl`](https://npmcn.com/package/%40brightcove/react-player-loader/#readme-baseurl)
    -   [`manualReloadFromPropChanges`](https://npmcn.com/package/%40brightcove/react-player-loader/#readme-manualreloadfrompropchanges)
    -   [其他提案](https://npmcn.com/package/%40brightcove/react-player-loader/#readme-other-props)
-   [提案更改的影响](https://npmcn.com/package/%40brightcove/react-player-loader/#readme-effects-of-prop-changes)
-   [查看演示](https://npmcn.com/package/%40brightcove/react-player-loader/#readme-view-the-demo)
-   [备选用途](https://npmcn.com/package/%40brightcove/react-player-loader/#readme-alternate-usage)
    -   [ES模块(不含JSX)](https://npmcn.com/package/%40brightcove/react-player-loader/#readme-es-module-without-jsx)
    -   [常见JS](https://npmcn.com/package/%40brightcove/react-player-loader/#readme-commonjs)
    -   [`<script>` 标记](https://npmcn.com/package/%40brightcove/react-player-loader/#readme-script-tag)

## 安装

无论您如何使用此组件, 唯一可用的是 npm .

```sh
npm install --save @brightcove/react-player-loader
```

## JSX的标准使用

大多数反应应用程序使用JSX和由JSX提供的工具链 `create-react-app`。 。 。 .

安装后, `import` 模块并使用 `ReactPlayerLoader` 与您 React 应用程序中的其他组件相类似的组件 :

> **注:** `React`编号 :`ReactDOM` 为: **没有** 需要时, 它们仅用于显示完整的工作示例 !

```js
import React from 'react';
import ReactDOM from 'react-dom';
import ReactPlayerLoader from '@brightcove/react-player-loader';

let reactPlayerLoader;
const onSuccess = function(success) {

  // The player object or iframe element (depending on embed type) can be
  // accessed in two ways.
  // 
  // From the success object passed to the `onSuccess` callback:
  console.log(success.ref);

  // As a property of the component instance:
  console.log(reactPlayerLoader.player);
};

reactPlayerLoader = ReactDOM.render(
  <ReactPlayerLoader accountId='1234678' onSuccess={onSuccess}/>,
  document.getElementById('fixture')
);
```

见 [备选用途](https://npmcn.com/package/%40brightcove/react-player-loader/#readme-alternate-usage) 以下列出使用这一构成部分的不太常见的方法.

## 道具

### `attrs`

类型 : `Object`

为组件元素提供属性(道克).

例如,您可能想要自定义 `className` (默认情况下, `"brightcove-react-player-loader"`) 通过在这样的组件上设置道具:

```jsx
<ReactPlayerLoader attrs={{className: 'my-custom-class'}} />
```

### `baseUrl`

类型 : `string`

用于为被嵌入的 Blightcove 玩家覆盖基础 URL .

大多数用户永远不会需要这个道具. 默认情况下,玩家会从布莱克科夫的玩家CDN(`players.brightcove.net`) (中文(简体) ).

### `manualReloadFromPropChanges`

类型 : `boolean`

用于指定在道具更改后重新装入玩家是否会被手动处理. 这可以通过拨打 `refToReactPlayerLoader.loadPlayer()`。 。 。 .

见 [提案更改的影响](https://npmcn.com/package/%40brightcove/react-player-loader/#readme-effects-of-prop-changes) 下文列出道具变化的影响.

### 其他提案

上面没有说明的所有道具都交给 [亮湾玩家加载器](https://github.com/brightcove/player-loader#parameters) 有一些不同之处:

1.  我们不能轻易暴露玩家加载者的承诺,所以你必须使用 `onSuccess` 财务报告和审定财务报表 `onFailure` 召回电话.
2.  如果你不提供 `onFailure` callback, 失败将通过抛出错误处理 .
3.  我们需要使用 `refNode` 财务报告和审定财务报表 `refNodeInsert` 内部,所以这些道具会被忽略.

## 提案更改的影响

当一个道具传递到这个组件时,它会产生两种效果之一:

1.  处理/ 重新装入玩家 。 这是最常见的案例.
2.  更新玩家状态(例如获取新视频).

以下道具将更新玩家状态 _无_ 重装:

-   `catalogSearch`
-   `catalogSequence`
-   `playlistId`
-   `playlistVideoId`
-   `videoId`

所有其他道具变化,不包括 `function`'s, 会导致一个完整的处理/ 重载 .

## 查看演示

该寄存器包括一个赤骨演示/实例页.

1.  清除仓库
2.  移动到仓库中
3.  运行 `npm install`
4.  运行 `npm start`
5.  导航到 `http://localhost:9999` 在浏览器中

## 备选用途

### ES模块(不含JSX)

安装后, `import` 并使用 `ReactPlayerLoader` 与您 React 应用程序中的其他组件相类似的组件 :

> **注:** `React`编号 :`ReactDOM` 为: **没有** 需要时, 它们仅用于显示完整的工作示例 !

```js
import React from 'react';
import ReactDOM from 'react-dom';
import ReactPlayerLoader  from '@brightcove/react-player-loader';

const reactPlayerLoader = ReactDOM.render(
  React.createElement(ReactPlayerLoader, {
    accountId: '1234678',
    onSuccess(success) {
      // two ways to get the underlying player/iframe at this point.
      console.log(success.ref)
      console.log(reactPlayerLoader.player);
    }
  }),
  document.getElementById('fixture')
);

```

### 常见JS

安装后, `require` 并使用 `ReactPlayerLoader` 与您 React 应用程序中的其他组件相类似的组件 :

> **注:** `React`编号 :`ReactDOM` 为: **没有** 需要时, 它们仅用于显示完整的工作示例 !

```js
var React = require('react');
var ReactDOM = require('react-dom');
var ReactPlayerLoader = require('@brightcove/react-player-loader');

var reactPlayerLoader = ReactDOM.render(
  React.createElement(ReactPlayerLoader, {
    accountId: '1234678',
    onSuccess: function(success) {
      // two ways to get the underlying player/iframe at this point.
      console.log(success.ref)
      console.log(reactPlayerLoader.player);
    }
  }),
  document.getElementById('fixture')
);

```

### `<script>` 标记

_本案极不可能被利用._

安装或从CDN装入后,使用 `script` 标记以包含模块到您的 HTML 中并使用全局 `window.BrightcoveReactPlayerLoader` 用于构建组件.

```html
<div id="fixture"></div>
<script src="//path/to/react.min.js"></script>
<script src="//path/to/react-dom.min.js"></script>
<script src="//path/to/brightcove-react-player-loader.min.js"></script>
<script>
  var React = window.React;
  var ReactDOM = window.ReactDOM;

  var reactPlayerLoader = ReactDOM.render(
    React.createElement(window.BrightcoveReactPlayerLoader, {
      accountId: '1234678',
      onSuccess: function(success) {
        // two ways to get the underlying player/iframe at this point.
        console.log(success.ref)
        console.log(reactPlayerLoader.player);
      }
    }),
    document.getElementById('fixture')
  );
</script>
```

## 常见问题

### @brightcove/react-player-loader 是什么？

Blightcove 玩家的官方反应组件

### 如何安装 @brightcove/react-player-loader？

在项目目录运行 npm install @brightcove/react-player-loader，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=15\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @brightcove/react-player-loader 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/brightcove\_\_react-player-loader 是否存在。

### @brightcove/react-player-loader 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @brightcove/react-player-loader 可以商用吗？

@brightcove/react-player-loader 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @brightcove/react-player-loader 的下载量有多少？

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

### @brightcove/react-player-loader 还在维护吗？

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