# @brightcove/web-sdk 中文文档
规范地址：https://npmcn.com/package/%40brightcove/web-sdk/
版本：1\.3\.4
npm 元数据更新时间：2026-11-10T14:33:07.852Z
中文译文更新时间：2026-11-10T14:53:16.547Z
软件包许可：UNLICENSED
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40brightcove/web-sdk
原文对照：https://npmcn.com/package/%40brightcove/web-sdk/?lang=original
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：17.3 MB，645 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2024-06-14T19:51:45.675Z
- 最新版本发布：2026-11-10T14:33:07.450Z
- 近 30 天下载量：6796（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 11 个）
## 中文简介
闪亮的曲线 Web & Smart TV SDK
## 安装
```sh
npm install @brightcove/web-sdk
```
也可以使用：`pnpm add @brightcove/web-sdk`、`yarn add @brightcove/web-sdk`、`bun add @brightcove/web-sdk`
## README
# 闪光湾网络和智能电视SDK
Blightcove Web和Smart TV SDK是用于在基于网络的平台——桌面浏览器,移动浏览器,和基于网络的Smart TV等现代应用中执行"Blightcove Player"的通用SDK.
## 目录
- [闪光湾网络和智能电视SDK](https://npmcn.com/package/%40brightcove/web-sdk/#readme-brightcove-web-and-smart-tv-sdk)
- [API 参考](https://npmcn.com/package/%40brightcove/web-sdk/#readme-api-reference)
- [安装](https://npmcn.com/package/%40brightcove/web-sdk/#readme-installation)
- [国家预防机制](https://npmcn.com/package/%40brightcove/web-sdk/#readme-npm)
- [光盘N](https://npmcn.com/package/%40brightcove/web-sdk/#readme-cdn)
- [指定版本](https://npmcn.com/package/%40brightcove/web-sdk/#readme-specifying-a-version)
- [只播放播放器](https://npmcn.com/package/%40brightcove/web-sdk/#readme-playback-only-player)
- [回放 + UI 播放器](https://npmcn.com/package/%40brightcove/web-sdk/#readme-playback--ui-player)
- [缩略图集成](https://npmcn.com/package/%40brightcove/web-sdk/#readme-thumbnails-integration)
- [固定集成](https://npmcn.com/package/%40brightcove/web-sdk/#readme-pinning-integration)
- [自定义结束屏幕集成](https://npmcn.com/package/%40brightcove/web-sdk/#readme-custom-end-screen-integration)
- [社会结束屏幕整合](https://npmcn.com/package/%40brightcove/web-sdk/#readme-social-end-screen-integration)
- [社会分享一体化](https://npmcn.com/package/%40brightcove/web-sdk/#readme-social-sharing-integration)
- [IMA 客户端集成](https://npmcn.com/package/%40brightcove/web-sdk/#readme-ima-client-side-integration)
- [SSAI 一体化](https://npmcn.com/package/%40brightcove/web-sdk/#readme-ssai-integration)
- [使用量](https://npmcn.com/package/%40brightcove/web-sdk/#readme-usage)
- [导入玩家](https://npmcn.com/package/%40brightcove/web-sdk/#readme-importing-the-player)
- [仅播放](https://npmcn.com/package/%40brightcove/web-sdk/#readme-playback-only)
- [国家预防机制](https://npmcn.com/package/%40brightcove/web-sdk/#readme-npm-1)
- [光盘N](https://npmcn.com/package/%40brightcove/web-sdk/#readme-cdn-1)
- [与 UI 回放](https://npmcn.com/package/%40brightcove/web-sdk/#readme-playback-with-ui)
- [国家预防机制](https://npmcn.com/package/%40brightcove/web-sdk/#readme-npm-2)
- [光盘N](https://npmcn.com/package/%40brightcove/web-sdk/#readme-cdn-2)
- [初始化玩家](https://npmcn.com/package/%40brightcove/web-sdk/#readme-initializing-a-player)
- [随附和分离](https://npmcn.com/package/%40brightcove/web-sdk/#readme-attach-and-detach)
- [更新配置](https://npmcn.com/package/%40brightcove/web-sdk/#readme-update-configuration)
- [装入媒体](https://npmcn.com/package/%40brightcove/web-sdk/#readme-loading-media)
- [视频云 VOD](https://npmcn.com/package/%40brightcove/web-sdk/#readme-video-cloud-vod)
- [视频云播放列表](https://npmcn.com/package/%40brightcove/web-sdk/#readme-video-cloud-playlist)
- [视频云相关视频](https://npmcn.com/package/%40brightcove/web-sdk/#readme-video-cloud-related-videos)
- [视频云搜索](https://npmcn.com/package/%40brightcove/web-sdk/#readme-video-cloud-search)
- [远程源](https://npmcn.com/package/%40brightcove/web-sdk/#readme-remote-source)
- [`IntegrationsManager`](https://npmcn.com/package/%40brightcove/web-sdk/#readme-integrationsmanager)
- [国家预防机制](https://npmcn.com/package/%40brightcove/web-sdk/#readme-npm-3)
- [光盘N](https://npmcn.com/package/%40brightcove/web-sdk/#readme-cdn-3)
- [`NetworkingManager`](https://npmcn.com/package/%40brightcove/web-sdk/#readme-networkingmanager)
- [`UiManager` 和 UI 组件](https://npmcn.com/package/%40brightcove/web-sdk/#readme-uimanager-and-ui-components)
- [覆盖默认组件](https://npmcn.com/package/%40brightcove/web-sdk/#readme-overriding-default-components)
- [国家预防机制](https://npmcn.com/package/%40brightcove/web-sdk/#readme-npm-4)
- [光盘N](https://npmcn.com/package/%40brightcove/web-sdk/#readme-cdn-4)
- [自定义组件](https://npmcn.com/package/%40brightcove/web-sdk/#readme-custom-components)
- [国家预防机制](https://npmcn.com/package/%40brightcove/web-sdk/#readme-npm-5)
- [光盘N](https://npmcn.com/package/%40brightcove/web-sdk/#readme-cdn-5)
- [`PlaylistManager` 财务报告和审定财务报表 `Playlist`](https://npmcn.com/package/%40brightcove/web-sdk/#readme-playlistmanager-and-playlist)
- [活动](https://npmcn.com/package/%40brightcove/web-sdk/#readme-events)
- [错误](https://npmcn.com/package/%40brightcove/web-sdk/#readme-errors)
- [样式](https://npmcn.com/package/%40brightcove/web-sdk/#readme-styling)
- [CSS 变量](https://npmcn.com/package/%40brightcove/web-sdk/#readme-css-variables)
- [空间导航和智能电视的使用](https://npmcn.com/package/%40brightcove/web-sdk/#readme-spatial-navigation-and-smart-tv-usage)
- [启用空间导航](https://npmcn.com/package/%40brightcove/web-sdk/#readme-enabling-spatial-navigation)
- [空间导航事件](https://npmcn.com/package/%40brightcove/web-sdk/#readme-spatial-navigation-events)
- [本地化](https://npmcn.com/package/%40brightcove/web-sdk/#readme-localizations)
## API 参考
```shell
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/docs/index.html
# use v{major} - latest API reference within a major version
# use v{major}.{minor} - latest API reference within a minor version
# use v{major}.{minor}.{patch} - API reference for a specific version
# Examples:
# latest API reference for v1.x.x:
https://players.brightcove.net/sdk/v1/web-sdk/docs/index.html
# latest API reference for v1.0.x
https://players.brightcove.net/sdk/v1.0/web-sdk/docs/index.html
# API reference for v1.0.0
https://players.brightcove.net/sdk/v1.0.0/web-sdk/docs/index.html
```
## 安装
### 国家预防机制
```sh
npm install @brightcove/web-sdk
```
### 光盘N
```html
```
#### 指定版本
如您所注意到的, CDN urls 有一个版本的占位符: `{VERSION}`。 。 。 .
要在 CDN URL 中指定一个版本:
- 使用 `v{major}` 将最新更新内容纳入主要版本.
- 使用 `v{major}.{minor}` 将最新更新纳入一个小版本.
- 使用 `v{major}.{minor}.{patch}` 包括特定版本.
例如:
```html
```
以下是所有可用的CDN资源列表:
#### 只播放播放器
```shell
# Playback-only player CDN JS bundle:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/playback/index.iife.min.js
# Playback-only player CDN JS alternative bundles:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/playback/index.cjs.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/playback/index.es.js
```
#### 回放 + UI 播放器
```shell
# Playback + UI player CDN JS bundle:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.iife.min.js
# Playback + UI player CDN JS alternative bundles:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.cjs.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.es.js
# Playback + UI player CDN CSS bundle:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.css
# Playback + UI player CDN language packs:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/languagePacks/ar.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/languagePacks/de.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/languagePacks/en.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/languagePacks/es.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/languagePacks/fr.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/languagePacks/ja.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/languagePacks/ko.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/languagePacks/zh-Hans.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/languagePacks/zh-Hant.js
```
#### 缩略图集成
```shell
# Thumbnails integration CDN JS bundle:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/thumbnails/index.iife.min.js
# Thumbnails integration CDN JS alternative bundles:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/thumbnails/index.cjs.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/thumbnails/index.es.js
# Thumbnails integration CDN CSS bundle:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/thumbnails/index.css
```
#### 固定集成
```shell
# Pinning integration CDN JS bundle:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/pinning/index.iife.min.js
# Pinning integration CDN JS alternative bundles:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/pinning/index.cjs.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/pinning/index.es.js
# Pinning integration CDN CSS bundle:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/pinning/index.css
```
#### 自定义结束屏幕集成
```shell
# Custom End Screen integration CDN JS bundle:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/index.iife.min.js
# Custom End Screen integration CDN JS alternative bundles:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/index.cjs.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/index.es.js
# Custom End Screen integration CDN CSS bundle:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/index.css
# Custom End Screen integration CDN language packs:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/languagePacks/ar.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/languagePacks/de.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/languagePacks/en.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/languagePacks/es.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/languagePacks/fr.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/languagePacks/ja.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/languagePacks/ko.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/languagePacks/zh-Hans.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/languagePacks/zh-Hant.js
```
#### 社会结束屏幕整合
```shell
# Social End Screen integration CDN JS bundle:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/index.iife.min.js
# Social End Screen integration CDN JS alternative bundles:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/index.cjs.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/index.es.js
# Social End Screen integration CDN CSS bundle:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/index.css
# Social End Screen integration CDN language packs:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/languagePacks/ar.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/languagePacks/de.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/languagePacks/en.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/languagePacks/es.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/languagePacks/fr.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/languagePacks/ja.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/languagePacks/ko.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/languagePacks/zh-Hans.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/languagePacks/zh-Hant.js
```
#### 社会分享一体化
```shell
# Social Sharing integration CDN JS bundle:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/index.iife.min.js
# Social Sharing integration CDN JS alternative bundles:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/index.cjs.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/index.es.js
# Social Sharing integration CDN CSS bundle:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/index.css
# Social Sharing integration CDN language packs:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/languagePacks/ar.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/languagePacks/de.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/languagePacks/en.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/languagePacks/es.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/languagePacks/fr.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/languagePacks/ja.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/languagePacks/ko.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/languagePacks/zh-Hans.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/languagePacks/zh-Hant.js
```
#### IMA 客户端集成
```shell
# IMA Client Side integration CDN JS bundle:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/imaClientSide/index.iife.min.js
# IMA Client Side integration CDN JS alternative bundles:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/imaClientSide/index.cjs.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/imaClientSide/index.es.js
# IMA Client Side integration CDN CSS bundle:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/imaClientSide/index.css
```
#### SSAI 一体化
```shell
# SSAI integration CDN JS bundle:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/index.iife.min.js
# SSAI integration CDN JS alternative bundles:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/index.cjs.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/index.es.js
# SSAI integration CDN CSS bundle:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/index.css
# SSAI integration CDN language packs:
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/languagePacks/ar.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/languagePacks/de.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/languagePacks/en.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/languagePacks/es.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/languagePacks/fr.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/languagePacks/ja.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/languagePacks/ko.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/languagePacks/zh-Hans.js
https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/languagePacks/zh-Hant.js
```
## 使用量
### 导入玩家
#### 仅播放
SDK提供轻量级回放的播放器. 你可以用它来建立自己的玩家UI在上面.
##### 国家预防机制
```js
import { Player } from '@brightcove/web-sdk/playback';
```
##### 光盘N
```html
```
#### 与 UI 回放
对于需要与UI一起播放功能的应用程序,使用以下玩家入口:
##### 国家预防机制
```js
import { Player } from '@brightcove/web-sdk/ui';
import '@brightcove/web-sdk/ui/styles';
```
##### 光盘N
```html
```
### 初始化玩家
```js
// Account ID is required to initialize a player
const player = new Player({ accountId: '' });
```
### 随附和分离
```js
// you should "mount" player to some DOM element presented on the page, to start using it:
const root = document.querySelector('#player-mount-root');
player.attach(root);
// you can "unmount" player from the DOM during runtime:
player.detach();
```
### 更新配置
```js
// you can update player configuration during runtime, example:
player.updateConfiguration({
brightcove: {
policyKey: ''
},
ui: {
language: 'en',
playsinline: true
}
});
```
### 装入媒体
#### 视频云 VOD
```js
// you should pass policy key or authToken before using any Brightcove API:
player.updateConfiguration({
brightcove: {
policyKey: '',
// authToken: '' // or authToken
},
});
async function loadVideo(videoId) {
// you can also abort request by calling abort()
const { abort, promise } = player.getVideoByIdFromPlaybackApi({ videoId: '' });
try {
let brightcoveVideoModel = await promise;
player.loadBrightcoveVideoModel(brightcoveVideoModel);
} catch (error) {
// Handle error
console.error('Error loading video:', error);
}
}
loadVideo('');
```
#### 视频云播放列表
```js
// you should pass policy key or authToken before using any Brightcove API:
player.updateConfiguration({
brightcove: {
policyKey: '',
// authToken: '' // or authToken
},
});
async function loadPlaylist(playlistId) {
// you can also abort request by calling abort()
const { abort, promise } = player.getPlaylistByIdFromPlaybackApi({ playlistId });
try {
const playlistModel = await promise;
const playlistManager = player.getPlaylistManager();
// Create playlist object
const playlist = playlistManager.createPlaylistFromBrightcoveVideoModels(playlistModel.videos);
// Pass the playlist object to the PlaylistManager
playlistManager.setPlaylist(playlist);
// Load the first playlist item
player.loadBrightcoveVideoModel(playlist.getCurrentItem());
} catch (error) {
// Handle error
console.error('Error loading playlist:', error);
}
}
loadPlaylist('');
function advanceToNextItem() {
const playlistManager = player.getPlaylistManager();
const playlist = playlistManager.getPlaylist();
// Advance to the next item
playlist.moveToNext();
player.loadBrightcoveVideoModel(playlist.getCurrentItem());
}
advanceToNextItem();
```
#### 视频云相关视频
```js
// you should pass policy key or authToken before using any Brightcove API:
player.updateConfiguration({
brightcove: {
policyKey: '',
// authToken: '' // or authToken
},
});
async function loadRelatedVideos(videoId) {
// you can also abort request by calling abort()
const { abort, promise } = player.getRelatedVideosByVideoIdFromPlaybackApi({ videoId });
try {
const relatedVideos = await promise;
const playlistManager = player.getPlaylistManager();
// Create playlist object
const playlist = playlistManager.createPlaylistFromBrightcoveVideoModels(relatedVideos);
// Pass the playlist object to the PlaylistManager
playlistManager.setPlaylist(playlist);
// Load the first playlist item
player.loadBrightcoveVideoModel(playlist.getCurrentItem());
} catch (error) {
// Handle error
console.error('Error loading playlist:', error);
}
}
loadRelatedVideos('');
function advanceToNextItem() {
const playlistManager = player.getPlaylistManager();
const playlist = playlistManager.getPlaylist();
// Advance to the next item
playlist.moveToNext();
player.loadBrightcoveVideoModel(playlist.getCurrentItem());
}
advanceToNextItem();
```
#### 视频云搜索
```js
// you should pass policy key or authToken before using any Brightcove API:
player.updateConfiguration({
brightcove: {
policyKey: '',
// authToken: '' // or authToken
},
});
async function loadSearchVideos(query) {
// you can also abort request by calling abort()
const { abort, promise } = player.getVideosBySearchFromPlaybackApi({ q: query });
try {
const searchVideos = await promise;
const playlistManager = player.getPlaylistManager();
// Create playlist object
const playlist = playlistManager.createPlaylistFromBrightcoveVideoModels(searchVideos);
// Pass the playlist object to the PlaylistManager
playlistManager.setPlaylist(playlist);
// Load the first playlist item
player.loadBrightcoveVideoModel(playlist.getCurrentItem());
} catch (error) {
// Handle error
console.error('Error loading playlist:', error);
}
}
// see https://apis.support.brightcove.com/playback/references/reference_v2.html#tag/Videos/operation/Get_Videos
// for query guide
loadSearchVideos('');
function advanceToNextItem() {
const playlistManager = player.getPlaylistManager();
const playlist = playlistManager.getPlaylist();
// Advance to the next item
playlist.moveToNext();
player.loadBrightcoveVideoModel(playlist.getCurrentItem());
}
advanceToNextItem();
```
#### 远程源
```js
const source = {
url: 'http://video.com/index.m3u8'
};
player.loadRemoteVideo(source);
```
### `IntegrationsManager`
您可以使用模块导入和 `IntegrationsManager`数字 :
#### 国家预防机制
```js
import { Player, IntegrationsManager } from '@brightcove/web-sdk/ui';
import { ThumbnailsIntegrationFactory } from '@brightcove/web-sdk/integrations/thumbnails';
import { PinningIntegrationFactory } from '@brightcove/web-sdk/integrations/pinning';
import '@brightcove/web-sdk/ui/styles';
import '@brightcove/web-sdk/integrations/thumbnails/styles';
import '@brightcove/web-sdk/integrations/pinning/styles';
// Register integrations before creating a Player
IntegrationsManager.registerThumbnailsIntegrationFactory(ThumbnailsIntegrationFactory);
IntegrationsManager.registerPinningIntegrationFactory(PinningIntegrationFactory);
const player = new Player({ accountId: '' });
player.updateConfiguration({
// Integrations can have their own configuration options
integrations: {
pinning: {
posX: 'left',
posY: 'top',
closeable: true
}
}
});
const root = document.querySelector('#player-mount-root');
player.attach(root);
// Access individual integrations via the IntegrationsManager
const { pinningIntegration } = player.getIntegrationsManager();
// Perform integration-specific operations
pinningIntegration.togglePinning();
```
#### 光盘N
```html
```
### `NetworkingManager`
这个 `NetworkingManager` 可用于连接 SDK 的请求/响应周期:
```js
const networkingManager = player.getNetworkingManager();
networkingManager.addRequestInterceptor(Player.RequestType.HlsPlaylist, (request) => {
console.log('HLS Playlist request interceptor ', request);
// you can modify request, but you have to return request object:
return request;
});
networkingManager.addResponseInterceptor(Player.RequestType.HlsPlaylist, (response) => {
console.log('HLS Playlist response interceptor ', response);
// you can modify response, but you have to return response object:
return response;
});
```
### `UiManager` 和 UI 组件
UiManager可用于创建和管理UI组件. 所有 SDK UI 组件扩展 `UiComponent` 类,它有一个 [宽 API](https://bc-players-qa.s3.amazonaws.com/sdk/latest/web-sdk/docs/interfaces/core.UiComponent.html)。 。 。 .
见 [独立](https://bc-players-qa.s3.amazonaws.com/sdk/latest/web-sdk/docs/interfaces/core.UiComponentDependencies.html) 可传递给组件的基本选项列表的界面。 注意不同的组件类型可以有额外的选项.
#### 覆盖默认组件
SDK具有超越已存在的默认玩家组件的能力. 请注意: [默认玩家组件](https://bc-players-qa.s3.amazonaws.com/sdk/latest/web-sdk/docs/enums/core.DefaultPlayerComponents.html) 可以被推翻.
##### 国家预防机制
```js
import { UiManager, BigPlayButtonUiComponent, UiComponentType } from '@brightcove/web-sdk/ui';
class CustomPlayButton extends BigPlayButtonUiComponent {
// ... custom play button code
}
UiManager.overrideDefaultComponent(UiComponentType.BigPlayButton, CustomPlayButton);
```
##### 光盘N
```html
```
#### 自定义组件
自定义组件可以通过使用 [基本组件](https://bc-players-qa.s3.amazonaws.com/sdk/latest/web-sdk/docs/types/ui.BaseUiComponent.html) 课.
**注意自定义组件的每个实例应有一个独特的 `name` 属性.**
##### 国家预防机制
```js
import { BaseUiComponent } from '@brightcove/web-sdk/ui';
// import and initialize UI Player
const uiManager = player.getUiManager();
const playerComponent = uiManager.getPlayerContainerUiComponent();
// create a DOM element for the custom component
const customElement = document.createElement('div');
const customComponent = new BaseUiComponent({
// add a unique name
name: 'CustomUiComponent',
componentOptions: {
// pass the custom DOM element as an option
el: customElement,
},
});
// Add the custom component as a child of the player component
playerComponent.addChild(customComponent);
// Or add it as a child of another component, for example the ControlBar
const controlBarComponent = playerComponent.getChild('ControlBar');
controlBarComponent.addChild(customComponent);
```
##### 光盘N
```html
```
### `PlaylistManager` 财务报告和审定财务报表 `Playlist`
这个 `PlaylistManager` 用于操纵一个 `Playlist` 对象,包括媒体来源列表:
```js
const playlistManager = player.getPlaylistManager();
// Create playlist object from a Playback API response
const videoCloudPlaylist = playlistManager.createPlaylistFromBrightcoveVideoModels(/* Array */);
// Create playlist object from remote sources
const remotePlaylist = playlistManager.createPlaylistFromRemoteSources(/* Array */);
// Pass the playlist object to the PlaylistManager
playlistManager.setPlaylist(/* videoCloudPlaylist | remotePlaylist */);
// Load the first playlist item
player.loadBrightcoveVideoModel(playlist.getCurrentItem());
// Playlist methods to set a new item index as the current index
playlist.moveToNext();
playlist.moveToPrevious();
playlist.moveTo(/* index number */)
playlist.shuffle();
// Load the new playlist item
player.loadBrightcoveVideoModel(playlist.getCurrentItem());
```
### 活动
```js
// Handle only the first emission of the PlayerPlaying event
player.once(Player.Event.PlayerPlaying, (event) => {
console.log('PlayerPlaying event: ', event);
});
const handlePlayerQualityLevelsChanged = (event) => console.log('PlayerQualityLevelsChanged event: ', event);
// Handle every emission of the PlayerQualityLevelsChanged event
player.addEventListener(Player.Event.PlayerQualityLevelsChanged, handlePlayerQualityLevelsChanged);
// Remove one specific event listener
player.removeEventListener(Player.Event.PlayerQualityLevelsChanged, handlePlayerQualityLevelsChanged);
// Remove all listeners for a specific event
player.removeAllEventListenersForType(Player.Event.PlayerQualityLevelsChanged);
// Remove all event listeners
player.removeAllEventListeners();
```
### 错误
```js
// Listening for error events
this.player.addEventListener(Player.Event.PlayerError, (event) => {
const error = event.error;
console.log('An error occurred:', error);
});
```
### 样式
SDK为具有UI特性的特定模块提供CSS.
如果导入支持的用户界面 `Player` 类从 `'@brightcove/web-sdk/ui'` 切入点,您必须从 `'@brightcove/web-sdk/ui/styles'`。 。 。 .
此外,如果导入任何带有UI特性的集成,则您必须导入该集成的特定样式 `'@brightcove/web-sdk/integrations//styles'`
#### CSS 变量
CSS来自 `'@brightcove/web-sdk/ui/styles'` 带有一组预设的 CSS 变量来控制玩家造型的某些方面. 这些CSS变量可以通过重置值来被覆盖.
```css
.bc-sdk {
/* Override the default control bar color */
--bc-sdk-control-bar-color: red;
}
```
以下是所有可用的 CSS 变量及其默认值.
`--bc-sdk-control-color`
- 按钮和文字的颜色.
- 默认 : `#fff`
`--bc-sdk-progress-color`
- 进度栏的颜色 .
- 默认 : `#08088c`
`--bc-sdk-control-bar-transparency`
- 控制栏的背景颜色和大播放按钮的透明度.
- 默认 : `0.45`· ;
`--bc-sdk-control-bar-color`
- 控制栏的背景颜色和大播放按钮.
- 默认 : `rgba(0, 0, 0, var(--bc-sdk-control-bar-transparency))`· ;
`--bc-sdk-big-play-button--border`
- 大游戏按钮的边框.
- 默认 : `none`· ;
`--bc-sdk-big-play-button--width`
- 大播放按钮的宽度 .
- 默认 : `2em`· ;
`--bc-sdk-big-play-button--height`
- 大游戏按钮的高度.
- 默认 : `2em`· ;
### 空间导航和智能电视的使用
SDK中的"空间导航"通过使用遥控箭头键在玩家内部通过交互元素进行导航,增强了用户体验和智能电视设备的可访问性.
#### 启用空间导航
```js
player.updateConfiguration({
ui: {
spatialNavigation: {
// Enable Spatial Navigation
enabled: true,
// Enable horizontal navigation seek functionality, using right and left RCU arrow keys.
horizontalSeek: true,
}
}
});
const spatialNavigationManager = player.getSpatialNavigationManager()
// Start listening for keydown events
spatialNavigationManager.start();
// Pause listening for keydown events without removing listeners
spatialNavigationManager.pause();
// Resume listening for keydown events after pausing
spatialNavigationManager.resume();
// Disable Spatial Navigation by removing all keydown listeners
spatialNavigationManager.stop();
```
#### 空间导航事件
空间导航可提供两个您可以收听的事件:
- `Player.Event.SpatialNavigation.EndOfFocusableComponents` - 当玩家界面内没有更可聚焦的组件可用时,即开火.
- `Player.Event.SpatialNavigation.FocusableComponentsChanged` - 当可聚焦组件清单发生变化时开火
### 本地化
对多语言和本地化的支持可以包括如下:
```js
// Import general player localizations
import mainJapanese from '@brightcove/web-sdk/ui/languagePacks/ja';
// Import integration-specific localizations
import ssaiJapanese from '@brightcove/web-sdk/integrations/ssai/languagePacks/ja';
// .. other imports and code
const uiManager = player.getUiManager();
uiManager.addLanguagePack('ja', mainJapanese);
uiManager.addLanguagePack('ja', ssaiJapanese);
```
## 常见问题
### @brightcove/web-sdk 是什么？
闪亮的曲线 Web & Smart TV SDK
### 如何安装 @brightcove/web-sdk？
在项目目录运行 npm install @brightcove/web-sdk，或使用 pnpm add / yarn add / bun add。
### @brightcove/web-sdk 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @brightcove/web-sdk 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @brightcove/web-sdk 可以商用吗？
@brightcove/web-sdk 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。
### @brightcove/web-sdk 的下载量有多少？
根据 npm 官方下载统计，@brightcove/web-sdk 在 2026/10/09 – 2026/11/07 这 30 天内被下载 6,796 次，日均约 227 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @brightcove/web-sdk 还在维护吗？
最新版本 1\.3\.4 发布于 2026/11/10（今天）；至今共发布 19 个版本，其中过去 12 个月发布了 11 个；首次发布于 2024/06/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。