js-player-module-brightcove

Brightcove Player API を使ったカスタムプレーヤー用 JavaScript ライブラリです。

Features

• Brightcove Player の埋め込みタグとプレーヤースクリプトを生成
• 標準 UI の表示、非表示を切り替え可能
• 動画、音声モードを切り替え可能
• 再生、停止、一時停止、ミュート、シーク、音量変更、動画差し替え API を提供
• 再生状態、時間更新、音量変更、動画変更などの callback を提供

Demo

• Video & Audio Player Demo
• Examples

Requirements

• Brightcove account id
• Brightcove video id
• Browser target: ES2015+

v7 以降は IE11 をサポートしていません。

Installation

npm install js-player-module-brightcove

import PLAYER_MODULE_BRIGHTCOVE from 'js-player-module-brightcove';

Standalone で使う場合は npm package に含まれる dist/js-player-module-brightcove.js を読み込んでください。

<script src="https://cdn.jsdelivr.net/npm/js-player-module-brightcove@latest/dist/js-player-module-brightcove.js"></script>

Basic Usage

<div id="brightcovePlayer"></div>

<script>
  const player = new PLAYER_MODULE_BRIGHTCOVE({
    id: 'brightcovePlayer',
    videoid: '4230322585001',
    account: '20318290001',
    aspect_ratio: '16:9'
  });
</script>

Brightcove Player script は account と player option から次の形式で読み込まれます。

//players.brightcove.net/{account}/{player}_default/index.min.js

player を指定しない場合は default が使われます。

Usage Examples

Audio Mode

new PLAYER_MODULE_BRIGHTCOVE({
  mode: 'audio',
  id: 'audioPlayer',
  videoid: '4230322585001',
  account: '20318290001'
});

Custom UI

ui_default: false を指定すると、ライブラリが出力する標準 UI を使わずに独自 UI を実装できます。

<div id="customPlayer">
  <button type="button" onclick="player.Play()">Play</button>
  <button type="button" onclick="player.Pause()">Pause</button>
  <button type="button" onclick="player.Stop()">Stop</button>
</div>

<script>
  const player = new PLAYER_MODULE_BRIGHTCOVE({
    id: 'customPlayer',
    videoid: '4230322585001',
    account: '20318290001',
    ui_default: false
  });
</script>

Callbacks

const player = new PLAYER_MODULE_BRIGHTCOVE({
  id: 'brightcovePlayer',
  videoid: '4230322585001',
  account: '20318290001',
  on: {
    PlayerInit(instance, brightcovePlayer) {
      console.log(instance.GetMediaInfo());
    },
    TimeUpdate(time) {
      console.log(time.current, time.max, time.par);
    },
    VolumeChange(volume) {
      console.log(volume.volume, volume.par);
    },
    Change(instance) {
      console.log(instance.GetPoster());
    }
  }
});

Options

Option	Type	Default	Description
id	string	pmb	プレーヤーを出力する wrapper 要素の id。
videoid	string	4929511769001	初期表示する Brightcove video id。
account	string	''	Brightcove account id。
player	string	default	Brightcove player id。
mode	string	movie	movie または audio。
width	string	''	video 要素の width。
height	string	''	video 要素の height。
aspect_ratio	string	16:9	初期CSS利用時の表示比率。9:16 など任意の 横:縦 を指定可能。
video_title	string	''	video 要素の title 属性。
volume	number	1	初期音量。0 から 1 の範囲。
playsinline	boolean	true	inline 再生属性を付与するか。
loop	boolean	false	loop 属性を付与するか。
muted	boolean	false	muted 属性を付与するか。
ui_controls	boolean	false	Brightcove 標準 controls 属性を付与するか。
ui_autoplay	boolean	false	autoplay 属性を付与するか。
ui_default	boolean	true	ライブラリ標準 UI を出力するか。
ui_default_css	boolean	true	ライブラリ標準 CSS を出力するか。
pause_others_on_play	boolean	false	再生開始時に再生中の他プレーヤーを一時停止するか。
stop_outfocus	boolean	false	window blur 時に停止するか。
poster	string	''	poster 画像 URL。
add_style	string	''	追加 CSS。
classname_loaded_wrap	string	is-pmb-loaded-wrap	読み込み完了時に wrapper へ付与する class。
classname_active_wrap	string	is-pmb-active-wrap	再生中に wrapper へ付与する class。
classname_active	string	is-pmb-active	active 状態の UI に付与する class。
on	object	{}	callback 設定。

Callbacks

Callback	Payload	Timing
PlayerInit	(instance, brightcovePlayer)	Brightcove player 初期化後。
PlayerEnded	(instance, brightcovePlayer)	再生終了時。
PlayerPlay	(instance, brightcovePlayer)	Brightcove player の play event。
PlayerPause	(instance, brightcovePlayer)	Brightcove player の pause event。
TimeUpdate	{ current, max, down, ratio, par }	timeupdate 時。
VolumeChange	{ volume, par }	volumechange 時。
PlaybackRateChange	rate	ratechange 時。
PlayPrep	(instance, brightcovePlayer)	Play() 実行直前。
Play	(instance, brightcovePlayer)	Play() 実行後。
Pause	(instance, brightcovePlayer)	Pause() 実行後。
Stop	(instance, brightcovePlayer)	Stop() 実行後。
PauseAll	(instance, brightcovePlayer)	PauseAll() 実行後。
StopAll	(instance, brightcovePlayer)	StopAll() 実行後。
Change	(instance, brightcovePlayer)	Change() による動画変更後。

Methods

Method	Description
Play(forceplay?, callback?)	再生します。再生中の場合は一時停止します。
Stop(callback?)	一時停止して再生位置を 0 に戻します。
Pause(callback?)	一時停止します。
Mute()	mute 状態を切り替えます。
Change(videoid, isplay?, callback?)	動画を差し替えます。
PauseAll(callback?)	登録済みの全プレーヤーを一時停止します。
StopAll(callback?)	登録済みの全プレーヤーを停止します。
SeekTo(sec)	指定秒数へシークします。
SeekBy(sec)	現在位置から指定秒数だけ前後へシークします。
GetPlaybackRate()	現在の再生速度を返します。
SetPlaybackRate(rate)	再生速度を 0.5 から 2 の範囲で設定します。
GetTime()	現在時間を mm:ss 形式で返します。
GetTimeDown()	残り時間を mm:ss 形式で返します。
GetTimeMax()	動画時間を mm:ss 形式で返します。
GetTimeRatio()	現在位置を 0 から 1 の比率で返します。
GetTimePar()	現在位置を % 文字列で返します。
GetPoster()	現在の poster を返します。
GetMediaInfo()	Brightcove の media info を返します。
SetVolume(volume)	音量を設定します。0 から 1 の範囲を指定します。
SetVideoTitle(title)	video 要素の title 属性を更新します。
SetPoster(path?)	poster を更新し、UI に反映します。
Destroy()	Brightcove player を reset します。

Links

• npm
• Brightcove Player API
• GitHub Releases

License

MIT