Brightcove Player

Video & Audio Demo

Video player

動画切替、相対シーク、再生速度、音量操作を確認できます。

Loading player
Loading video...
00:00 00:00
Playback speed
Volume

Choose video

Change(videoid, true)

Quick actions

Public API
Current 00:00
Remaining 00:00
Speed 1x
Volume 100%
Minimal setup HTML 
<div id="videoPlayer"></div>
Script — load once per page 
<script src="https://cdn.jsdelivr.net/npm/js-player-module-brightcove@latest/dist/js-player-module-brightcove.js"></script>
Initialization 
const videoPlayer = new PLAYER_MODULE_BRIGHTCOVE({
  id: 'videoPlayer',
  videoid: '4230322585001',
  account: '20318290001'
});
Full setup with callbacks HTML and controls 
<div id="videoPlayer">
  <button type="button" onclick="PMB.Play()">Play</button>
  <button type="button" onclick="PMB.Pause()">Pause</button>
  <button type="button" onclick="PMB.Stop()">Stop</button>
  <button type="button" onclick="PMB.PauseAll()">Pause all</button>
  <button type="button" onclick="PMB.StopAll()">Stop all</button>
  <button type="button" onclick="PMB.Mute()">Mute toggle</button>
  <button type="button" onclick="PMB.SetVolume(0.5)">Volume 50%</button>

  <button type="button" onclick="PMB.SeekBy(-10)">Back 10 seconds</button>
  <button type="button" onclick="PMB.SeekBy(10)">Forward 10 seconds</button>
  <button type="button" onclick="PMB.SeekTo(30)">Seek to 30 seconds</button>
  <button type="button" onclick="PMB.SeekTo(60)">Seek to 60 seconds</button>

  <button type="button" onclick="PMB.SetPlaybackRate(0.5)">0.5x</button>
  <button type="button" onclick="PMB.SetPlaybackRate(1)">1x</button>
  <button type="button" onclick="PMB.SetPlaybackRate(1.5)">1.5x</button>
  <button type="button" onclick="PMB.SetPlaybackRate(2)">2x</button>

  <button type="button" onclick="PMB.Change('4230322585001')">Change video 01</button>
  <button type="button" onclick="PMB.Change('4231692338001')">Change video 02</button>

  <button type="button" class="ui-btn-change" data-pmb-id="4230322585001">Change video 01</button>
  <button type="button" class="ui-btn-change" data-pmb-id="4231692338001">Change video 02</button>

  <p class="ui-time-now">00:00</p>
  <p class="ui-time-down">00:00</p>
</div>
Initialization 
const PMB = new PLAYER_MODULE_BRIGHTCOVE({
  mode: 'movie',
  id: 'videoPlayer',
  videoid: '4230322585001',
  account: '20318290001',
  player: 'default',
  width: '',
  height: '',
  video_title: 'Brightcove video player',
  volume: 1,

  playsinline: true,
  loop: false,
  muted: false,
  ui_controls: false,
  ui_autoplay: false,
  ui_default: true,
  ui_default_css: true,
  pause_others_on_play: false,
  stop_outfocus: false,

  poster: '',
  add_style: '',
  classname_loaded_wrap: 'is-pmb-loaded-wrap',
  classname_active_wrap: 'is-pmb-active-wrap',
  classname_active: 'is-pmb-active',

  on: {
    PlayerInit(instance, player) {},
    PlayerEnded(instance, player) {},
    PlayerPlay(instance, player) {},
    PlayerPause(instance, player) {},
    TimeUpdate(time) {},
    VolumeChange(volume) {},
    PlaybackRateChange(rate) {},
    PlayPrep(instance, player) {},
    Play(instance, player) {},
    Pause(instance, player) {},
    Stop(instance, player) {},
    PauseAll(instance, player) {},
    StopAll(instance, player) {},
    Change(instance, player) {}
  }
});

Audio player

音声向けのコンパクトな再生UIと速度変更を確認できます。

Loading player
Loading audio...
00:00 00:00
Playback speed
Volume
Minimal setup HTML 
<div id="audioPlayer"></div>
Script — load once per page 
<script src="https://cdn.jsdelivr.net/npm/js-player-module-brightcove@latest/dist/js-player-module-brightcove.js"></script>
Initialization 
const audioPlayer = new PLAYER_MODULE_BRIGHTCOVE({
  mode: 'audio',
  id: 'audioPlayer',
  videoid: '4231692338001',
  account: '20318290001'
});
Full setup with callbacks HTML and controls 
<div id="audioPlayer">
  <button type="button" onclick="PMA.Play()">Play</button>
  <button type="button" onclick="PMA.Pause()">Pause</button>
  <button type="button" onclick="PMA.Stop()">Stop</button>
  <button type="button" onclick="PMA.PauseAll()">Pause all</button>
  <button type="button" onclick="PMA.StopAll()">Stop all</button>
  <button type="button" onclick="PMA.Mute()">Mute toggle</button>
  <button type="button" onclick="PMA.SetVolume(0.5)">Volume 50%</button>

  <button type="button" onclick="PMA.SeekBy(-10)">Back 10 seconds</button>
  <button type="button" onclick="PMA.SeekBy(10)">Forward 10 seconds</button>
  <button type="button" onclick="PMA.SeekTo(30)">Seek to 30 seconds</button>

  <button type="button" onclick="PMA.SetPlaybackRate(0.5)">0.5x</button>
  <button type="button" onclick="PMA.SetPlaybackRate(1)">1x</button>
  <button type="button" onclick="PMA.SetPlaybackRate(1.5)">1.5x</button>
  <button type="button" onclick="PMA.SetPlaybackRate(2)">2x</button>

  <button type="button" onclick="PMA.Change('4230322585001')">Change audio 01</button>
  <button type="button" onclick="PMA.Change('4231692338001')">Change audio 02</button>

  <button type="button" class="ui-btn-change" data-pmb-id="4230322585001">Change audio 01</button>
  <button type="button" class="ui-btn-change" data-pmb-id="4231692338001">Change audio 02</button>

  <p class="ui-time-now">00:00</p>
  <p class="ui-time-down">00:00</p>
</div>
Initialization 
const PMA = new PLAYER_MODULE_BRIGHTCOVE({
  mode: 'audio',
  id: 'audioPlayer',
  videoid: '4231692338001',
  account: '20318290001',
  player: 'default',
  width: '',
  height: '',
  video_title: 'Brightcove audio player',
  volume: 1,

  playsinline: true,
  loop: false,
  muted: false,
  ui_controls: false,
  ui_autoplay: false,
  ui_default: true,
  ui_default_css: true,
  pause_others_on_play: false,
  stop_outfocus: false,

  poster: '',
  add_style: '',
  classname_loaded_wrap: 'is-pmb-loaded-wrap',
  classname_active_wrap: 'is-pmb-active-wrap',
  classname_active: 'is-pmb-active',

  on: {
    PlayerInit(instance, player) {},
    PlayerEnded(instance, player) {},
    PlayerPlay(instance, player) {},
    PlayerPause(instance, player) {},
    TimeUpdate(time) {},
    VolumeChange(volume) {},
    PlaybackRateChange(rate) {},
    PlayPrep(instance, player) {},
    Play(instance, player) {},
    Pause(instance, player) {},
    Stop(instance, player) {},
    PauseAll(instance, player) {},
    StopAll(instance, player) {},
    Change(instance, player) {}
  }
});

Shared controls

ページ内に登録されたすべてのプレイヤーを操作します。