@brightcove/web-sdk

中文文档

1.3.4发布于 2026/11/10UNLICENSEDTypeScriptESM + CJS零依赖近 30 天下载 6796

闪亮的曲线 Web & Smart TV SDK

文档目录20 节

目录
API 参考
安装
国家预防机制
光盘N
使用量
导入玩家
初始化玩家
随附和分离
更新配置
装入媒体
IntegrationsManager
NetworkingManager
UiManager 和 UI 组件
PlaylistManager 财务报告和审定财务报表 Playlist
活动
错误
样式
空间导航和智能电视的使用
本地化

闪光湾网络和智能电视SDK

Blightcove Web和Smart TV SDK是用于在基于网络的平台——桌面浏览器,移动浏览器,和基于网络的Smart TV等现代应用中执行"Blightcove Player"的通用SDK.

API 参考

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

安装

国家预防机制

npm install @brightcove/web-sdk

光盘N

<script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/playback/index.iife.min.js"></script>

指定版本

如您所注意到的, CDN urls 有一个版本的占位符: {VERSION}。。。 .

要在 CDN URL 中指定一个版本:

使用 v{major} 将最新更新内容纳入主要版本.
使用 v{major}.{minor} 将最新更新纳入一个小版本.
使用 v{major}.{minor}.{patch} 包括特定版本.

例如:

<script src="https://players.brightcove.net/sdk/v1/web-sdk/playback/index.iife.min.js"></script>
<script src="https://players.brightcove.net/sdk/v1.1/web-sdk/playback/index.iife.min.js"></script>
<script src="https://players.brightcove.net/sdk/v1.1.1/web-sdk/playback/index.iife.min.js"></script>

以下是所有可用的CDN资源列表:

只播放播放器

# 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 播放器

# 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

缩略图集成

# 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

固定集成

# 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

自定义结束屏幕集成

# 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

# 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

# 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 客户端集成

# 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 一体化

# 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在上面.

国家预防机制

import { Player } from '@brightcove/web-sdk/playback';

光盘N

<script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/playback/index.iife.min.js"></script>
<script>
  // BrightcoveWebSdkPlayback is globally available namespace
  const { Player } = BrightcoveWebSdkPlayback;
</script>

与 UI 回放

对于需要与UI一起播放功能的应用程序,使用以下玩家入口:

国家预防机制

import { Player } from '@brightcove/web-sdk/ui';
import '@brightcove/web-sdk/ui/styles';

光盘N

<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.css">
<!--...-->
<script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.iife.min.js"></script>
<script>
  // BrightcoveWebSdkUi is globally available namespace
  const { Player } = BrightcoveWebSdkUi;
</script>

初始化玩家

// Account ID is required to initialize a player
const player = new Player({ accountId: '<ACCOUNT_ID>' });

随附和分离

// 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();

更新配置

// you can update player configuration during runtime, example:
player.updateConfiguration({
  brightcove: {
    policyKey: '<POLICY_KEY>'
  },
  ui: {
    language: 'en',
    playsinline: true
  }
});

装入媒体

视频云 VOD

// you should pass policy key or authToken before using any Brightcove API:
player.updateConfiguration({
  brightcove: {
    policyKey: '<POLICY_KEY>',
    // authToken: '<AUTH_TOKEN>' // or authToken
  },
});

async function loadVideo(videoId) {
  // you can also abort request by calling abort()
  const { abort, promise } = player.getVideoByIdFromPlaybackApi({ videoId: '<VIDEO_ID>' });

  try {
    let brightcoveVideoModel = await promise;

    player.loadBrightcoveVideoModel(brightcoveVideoModel);
  } catch (error) {
    // Handle error
    console.error('Error loading video:', error);
  }
}

loadVideo('<VIDEO_ID>');

视频云播放列表

// you should pass policy key or authToken before using any Brightcove API:
player.updateConfiguration({
  brightcove: {
    policyKey: '<POLICY_KEY>',
    // authToken: '<AUTH_TOKEN>' // 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('<PLAYLIST_ID>');

function advanceToNextItem() {
  const playlistManager = player.getPlaylistManager();
  const playlist = playlistManager.getPlaylist();

  // Advance to the next item
  playlist.moveToNext();
  player.loadBrightcoveVideoModel(playlist.getCurrentItem());
}

advanceToNextItem();

// you should pass policy key or authToken before using any Brightcove API:
player.updateConfiguration({
  brightcove: {
    policyKey: '<POLICY_KEY>',
    // authToken: '<AUTH_TOKEN>' // 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('<VIDEO_ID>');

function advanceToNextItem() {
  const playlistManager = player.getPlaylistManager();
  const playlist = playlistManager.getPlaylist();

  // Advance to the next item
  playlist.moveToNext();
  player.loadBrightcoveVideoModel(playlist.getCurrentItem());
}

advanceToNextItem();

视频云搜索

// you should pass policy key or authToken before using any Brightcove API:
player.updateConfiguration({
  brightcove: {
    policyKey: '<POLICY_KEY>',
    // authToken: '<AUTH_TOKEN>' // 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('<QUERY>');

function advanceToNextItem() {
  const playlistManager = player.getPlaylistManager();
  const playlist = playlistManager.getPlaylist();

  // Advance to the next item
  playlist.moveToNext();
  player.loadBrightcoveVideoModel(playlist.getCurrentItem());
}

advanceToNextItem();

远程源

const source = {
  url: 'http://video.com/index.m3u8'
};

player.loadRemoteVideo(source);

`IntegrationsManager`

您可以使用模块导入和 IntegrationsManager数字 :

国家预防机制

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: '<ACCOUNT_ID>' });

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

<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.css">
<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/thumbnails/index.css">
<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/pinning/index.css">
<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/imaClientSide/index.css">
<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/index.css">
<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/index.css">
<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/index.css">
<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/index.css">
<!--...-->
<script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.iife.min.js"></script>
<script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/thumbnails/index.iife.min.js"></script>
<script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/pinning/index.iife.min.js"></script>
<script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/imaClientSide/index.iife.min.js"></script>
<script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/index.iife.min.js"></script>
<script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/index.iife.min.js"></script>
<script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/index.iife.min.js"></script>
<script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/index.iife.min.js"></script>
<script>
  // BrightcoveWebSdkUi is available when including web-sdk/ui/index.iife.min.js
  // BrightcoveWebSdkThumbnailsIntegration is available when including web-sdk/integrations/thumbnails/index.iife.min.js
  // BrightcoveWebSdkImaClientSideIntegration is available when including web-sdk/integrations/imaClientSide/index.iife.min.js
  // BrightcoveWebSdkSocialSharingIntegration is available when including web-sdk/integrations/socialSharing/index.iife.min.js
  // BrightcoveWebSdkPinningIntegration is available when including web-sdk/integrations/pinning/index.iife.min.js
  // BrightcoveWebSdkSocialEndScreenIntegration is available when including web-sdk/integrations/socialEndScreen/index.iife.min.js
  // BrightcoveWebSdkCustomEndScreenIntegration is available when including web-sdk/integrations/customEndScreen/index.iife.min.js
  // BrightcoveWebSdkSsaiIntegration is available when including web-sdk/integrations/ssai/index.iife.min.js

  // NOTE! this example is just a demonstration of the IntegrationsManager's available API for each integration.
  // Some integrations might conflict with each other, for example: custom end screen and social end screen.
  // Please do not use this snippet in production.

  const { Player, IntegrationsManager } = BrightcoveWebSdkUi;

  const { ThumbnailsIntegrationFactory } = BrightcoveWebSdkThumbnailsIntegration;
  const { ImaClientSideIntegrationFactory } = BrightcoveWebSdkImaClientSideIntegration;
  const { SocialSharingIntegrationFactory  } = BrightcoveWebSdkSocialSharingIntegration;
  const { PinningIntegrationFactory } = BrightcoveWebSdkPinningIntegration;
  const { SocialEndScreenIntegrationFactory } = BrightcoveWebSdkSocialEndScreenIntegration;
  const { CustomEndScreenIntegrationFactory } = BrightcoveWebSdkCustomEndScreenIntegration;
  const { BrightcoveWebSdkSsaiIntegrationFactory } = BrightcoveWebSdkSsaiIntegration;

  // Register integrations before creating a Player
  IntegrationsManager.registerThumbnailsIntegrationFactory(ThumbnailsIntegrationFactory);
  IntegrationsManager.registerImaClientSideIntegrationFactory(ImaClientSideIntegrationFactory);
  IntegrationsManager.registerSocialSharingIntegrationFactory(SocialSharingIntegrationFactory);
  IntegrationsManager.registerPinningIntegrationFactory(PinningIntegrationFactory);
  IntegrationsManager.registerSsaiIntegrationFactory(BrightcoveWebSdkSsaiIntegrationFactory);
  // you can register only one end screen:
  IntegrationsManager.registerEndScreenIntegrationFactory(SocialEndScreenIntegrationFactory);
  // or
  IntegrationsManager.registerEndScreenIntegrationFactory(CustomEndScreenIntegrationFactory);

  const player = new Player({ accountId: '<ACCOUNT_ID>' });

  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();
</script>

`NetworkingManager`

这个 NetworkingManager 可用于连接 SDK 的请求/响应周期:

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。。。 .

见独立可传递给组件的基本选项列表的界面。注意不同的组件类型可以有额外的选项.

覆盖默认组件

SDK具有超越已存在的默认玩家组件的能力. 请注意: 默认玩家组件可以被推翻.

国家预防机制

import { UiManager, BigPlayButtonUiComponent, UiComponentType } from '@brightcove/web-sdk/ui';

class CustomPlayButton extends BigPlayButtonUiComponent {
   // ... custom play button code
}

UiManager.overrideDefaultComponent(UiComponentType.BigPlayButton, CustomPlayButton);

光盘N

<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.css">
<!--...-->
<script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.iife.min.js"></script>
<script>
  // BrightcoveWebSdkUi is globally available namespace
  const { UiManager, BigPlayButtonUiComponent, UiComponentType } = BrightcoveWebSdkUi;

  class CustomPlayButton extends BigPlayButtonUiComponent {
    // ... custom play button code
  }

  UiManager.overrideDefaultComponent(UiComponentType.BigPlayButton, CustomPlayButton);
</script>

自定义组件

自定义组件可以通过使用基本组件课.

注意自定义组件的每个实例应有一个独特的 name 属性.

国家预防机制

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

<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.css">
<!--...-->
<script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.iife.min.js"></script>
<script>
  // BrightcoveWebSdkUi is globally available namespace
  const { BaseUiComponent } = BrightcoveWebSdkUi;

  // ...

  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);
</script>

`PlaylistManager` 财务报告和审定财务报表 `Playlist`

这个 PlaylistManager 用于操纵一个 Playlist 对象,包括媒体来源列表:

const playlistManager = player.getPlaylistManager();

// Create playlist object from a Playback API response
const videoCloudPlaylist = playlistManager.createPlaylistFromBrightcoveVideoModels(/* Array<BrightcoveVideoModel> */);

// Create playlist object from remote sources
const remotePlaylist = playlistManager.createPlaylistFromRemoteSources(/* Array<Source> */);

// 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());

活动

// 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();

错误

// 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/<integration-name>/styles'

CSS 变量

CSS来自 '@brightcove/web-sdk/ui/styles' 带有一组预设的 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中的"空间导航"通过使用遥控箭头键在玩家内部通过交互元素进行导航,增强了用户体验和智能电视设备的可访问性.

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 - 当可聚焦组件清单发生变化时开火

本地化

对多语言和本地化的支持可以包括如下:

// 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 共发布 19 个版本，首次发布于 2024/06/15；过去 12 个月发布了 11 个版本。

版本	发布日期	距今
`1.3.4`latest	2026/11/10	今天
`1.3.4-rc.0`next	2026/10/29	12 天前
`1.3.3`	2026/10/08	1 个月前
`1.3.2`	2026/08/20	2 个月前
`1.3.1`	2026/08/04	3 个月前
`1.3.0`	2026/04/02	7 个月前

关于 @brightcove/web-sdk 的常见问题

@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 和提交记录判断。

npm install @brightcove/web-sdk

pnpmpnpm add @brightcove/web-sdk
yarnyarn add @brightcove/web-sdk
bunbun add @brightcove/web-sdk

在你的项目目录中运行此命令。

近 30 天下载

6,796

约 6796 次日均 227 次

统计周期 2026/10/09 – 2026/11/07
数据来自 npm 官方下载统计，2 天前更新

最新版本1.3.4发布于今天

开源许可UNLICENSED专有

包体积17.3 MB645 个文件 · 解压后

运行依赖0 个零依赖

模块格式ESM + CJS

TypeScript自带类型

发布版本19 个近 12 个月 11 个

首次发布2024/06/152 年前

元数据更新2026/11/10

每一个软件包背后，
都有分享与创造的人。

@brightcove/web-sdk

闪光湾网络和智能电视SDK

目录

API 参考

安装

国家预防机制

光盘N

指定版本

只播放播放器

回放 + UI 播放器

缩略图集成

固定集成

自定义结束屏幕集成

社会结束屏幕整合

社会分享一体化

IMA 客户端集成

SSAI 一体化

使用量

导入玩家

仅播放

国家预防机制

光盘N

与 UI 回放

国家预防机制

光盘N

初始化玩家

随附和分离

更新配置

装入媒体

视频云 VOD

视频云播放列表

视频云相关视频

视频云搜索

远程源

IntegrationsManager

国家预防机制

光盘N

NetworkingManager

UiManager 和 UI 组件

覆盖默认组件

国家预防机制

光盘N

自定义组件

国家预防机制

光盘N

PlaylistManager 财务报告和审定财务报表 Playlist

活动

错误

样式

CSS 变量

空间导航和智能电视的使用

启用空间导航

空间导航事件

本地化

版本与发布记录

关于 @brightcove/web-sdk 的常见问题

@brightcove/web-sdk 是什么？

如何安装 @brightcove/web-sdk？

@brightcove/web-sdk 支持 TypeScript 吗？

@brightcove/web-sdk 支持 ESM 还是 CommonJS？

@brightcove/web-sdk 可以商用吗？

@brightcove/web-sdk 的下载量有多少？

@brightcove/web-sdk 还在维护吗？

`IntegrationsManager`

`NetworkingManager`

`UiManager` 和 UI 组件

`PlaylistManager` 财务报告和审定财务报表 `Playlist`