PLAYER MODULE BRIGHTCOVE

Feature

Brightcove custom player using the Brightcove Player API. The official document is here. -> https://docs.brightcove.com/brightcove-player/current-release/Player.html

Demo

https://yama-dev.github.io/js-player-module-brightcove/examples/

Installation,Download

npm -> https://www.npmjs.com/package/js-player-module-brightcove
Standalone(CDN) -> https://cdn.jsdelivr.net/gh/yama-dev/js-player-module-brightcove@v6.4.3/dist/js-player-module-brightcove.js
Zip -> yama-dev/js-player-module-brightcove

Using

NPM Usage

# install npm.
npm install --save js-player-module-brightcove

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

Basic Standalone Usage

<script src="./js-player-module-brightcove.js"></script>
<div id="brightcovePlayer1">
  <script>
    new PLAYER_MODULE_BRIGHTCOVE({
      id: 'brightcovePlayer1',
      videoid: '4230322585001',
      account: '20318290001'
    });
  </script>
</div>

Sample Code

①BASIC Player

<div id="brightcovePlayer1">
  <script>
    new PLAYER_MODULE_BRIGHTCOVE({
      id: 'brightcovePlayer1',
      videoid: '4230322585001',
      account: '20318290001'
    });
  </script>
</div>

②Original image Player

<div id="brightcovePlayerOriginalimage">
  <script>
    new PLAYER_MODULE_BRIGHTCOVE({
      id: 'brightcovePlayerOriginalimage',
      videoid: '4230322585001',
      account: '20318290001'
      ui_default: false
    });
  </script>
  <div class="player__btn">
    <div class="btn_play"><img class="on" src="http://placehold.jp/14/333/ddd/120x30.png?text=PLAY" alt=""><img class="off" src="http://placehold.jp/14/ddd/333/120x30.png?text=PLAY" alt=""></div>
    <div class="btn_pause"><img class="on" src="http://placehold.jp/14/333/ddd/120x30.png?text=PAUSE" alt=""><img class="off" src="http://placehold.jp/14/ddd/333/120x30.png?text=PAUSE" alt=""></div>
    <div class="btn_stop"><img class="on" src="http://placehold.jp/14/333/ddd/120x30.png?text=STOP" alt=""><img class="off" src="http://placehold.jp/14/ddd/333/120x30.png?text=STOP" alt=""></div>
    <div class="btn_mute"><img class="on" src="http://placehold.jp/14/333/ddd/120x30.png?text=MUTE" alt=""><img class="off" src="http://placehold.jp/14/ddd/333/120x30.png?text=MUTE" alt=""></div>
  </div>
</div>

③AUDIO Player

<div id="brightcovePlayerAudio">
  <script>
    new PLAYER_MODULE_BRIGHTCOVE({
      mode: 'audio',
      id: 'brightcovePlayerAudio',
      videoid: '4230322585001',
      account: '20318290001'
    });
  </script>
</div>

④ Full Custom Player

<div id="brightcovePlayerCustom">
  <script>
    var PMB = new PLAYER_MODULE_BRIGHTCOVE({
      mode: 'movie',

      id: 'brightcovePlayerCustom',
      ui_controls: true,
      ui_autoplay: false,
      ui_default: true,
      ui_default_css : true,

      videoid: '4230322585001',
      account: '20318290001',
      player: 'default',

      loop: false,
      muted: false,
      volume: 0.5,
      stop_outfocus : true,

      width: '480px',
      height: '300px',

      poster: 'https://placehold.jp/750x500.png',

      add_style : '',
      classname_loaded_wrap : 'is-pmb-loaded-wrap',
      classname_active_wrap : 'is-pmb-active-wrap',
      classname_active: 'is-pmb-active',
      on: {
        PlayerInit: function(player){
          console.log('PlayerInit', player);
          console.log(player.GetMediaInfo());
          console.log(player.GetPoster());
        },
        PlayerEnded: function(player){
          console.log('PlayerEnded', player);
        },
        PlayerPlay: function(player){
          console.log('PlayerPlay', player);
        },
        PlayerPause: function(player){
          console.log('PlayerPause', player);
          console.log(player.GetTime());
          console.log(player.GetTimeMax());
          console.log(player.GetTimeRatio());
          console.log(player.GetTimeDown());
        },

        TimeUpdate : function(obj){
          console.log('TimeUpdate', obj);
        },
        VolumeChange : function(obj){
          console.log('VolumeChange', obj);
        },

        Play: function(player){
          console.log('Play', player);
        },
        PlayPrep: function(player){
          console.log('PlayPrep', player);
        },
        Pause: function(player){
          console.log('Pause', player);
        },
        Stop: function(player){
          console.log('Stop', player);
        },
        StopAll: function(player){
          console.log('StopAll', player);
        },
        Change: function(player){
          console.log('Change', player);
          console.log(player.GetMediaInfo());
          console.log(player.GetPoster());
        }
      }
    });
  </script>

  <button class="btn btn-secondary" onclick="PMB.Play()">Media再生(Play)</button>
  <button class="btn btn-secondary" onclick="PMB.Stop()">Media停止(Stop)</button>
  <button class="btn btn-secondary" onclick="PMB.PauseAll()">Media全一時停止(PauseAll)</button>
  <button class="btn btn-secondary" onclick="PMB.StopAll()">Media全停止(StopAll)</button>

  <button class="btn btn-secondary" data-PMB-id="4230322585001" onclick="PMB.Change('4230322585001')">Media変更 id=4230322585001</button>
  <div class="btn btn-secondary" data-PMB-id="4231692338001" onclick="PMB.Change('4231692338001')">
    Media変更 id=4231692338001<br><br>
    <p class="ui-time">00:00</p>
    <p class="ui-time_down">00:00</p>
  </div>

  <button class="btn btn-secondary" onclick="PMB.SeekTo(30)">Media再生位置変更(SeekTo 30s)</button>
  <button class="btn btn-secondary" onclick="PMB.SeekTo(60)">Media再生位置変更(SeekTo 60s)</button>
</div>

API

Default

Parameter	Type	Default	Description
id	string	- ※省略不可	プレーヤーを出力する要素のidを設定します。
videoid	string	- ※省略不可	動画のvideoidを設定します。
account	string	- ※省略不可	BrightcovePlayerのaccountを設定します。

Options

Parameter	Type	Default	Description
playsinline	boolean	true	iOS10+でインライン再生をするかを指定します。デフォルトでは、`playsinline`属性が設定され、インライン再生されます。 ※`false`を指定するとiOS10+では全画面にプレーヤーが立ち上がります。
volume	number	1	初期の音量を指定します。(0.0～1.0) デフォルトでは、1(最大音量)がセットされます。 ※機種、ブラウザに依存します。
ui_controls	boolean	false	`control`を表示するかしないかを指定します。デフォルトでは、表示されません。
ui_default	boolean	true	ライブラリであらかじめ用意したUIパーツを表示するかしないかを指定します。デフォルトは、表示されます。 ※`false`を指定すると出力されません。
ui_default_css	boolean	true	ライブラリであらかじめ用意したCSSを出力するかしないかを指定します。デフォルトは、CSSを出力します。 ※`false`を指定すると出力されません。
ui_autoplay	boolean	false	自動再生をするか指定します。デフォルトでは、自動再生はされません。 ※`true`を設定すると、動画のロードが完了すると自動再生を開始します。
stop_outfocus	boolean	false	フォーカスが外れた時に自動停止するか指定します。デフォルトでは、自動停止しません。 ※`true`を設定すると、フォーカスが外れた時にメディアが自動停止します。
mode	string	'movie'	`'movie'` -> 動画モード `'audio` -> 音声モードデフォルトでは、動画モードになります。動画か音声のみかを簡単に切り替えが出来ます。 ※`'audio'`を設定すると、動画が表示されません。
poster	string	null	動画のポスター画像を設定できます。画像のパスを設定することで、サムネイルとして読み込まれます。

Dependencies

none

Licence

MIT

Author

yama-dev

yama-dev/js-player-module-brightcove

PLAYER MODULE BRIGHTCOVE

Feature

Demo

Installation,Download

Using

NPM Usage

Basic Standalone Usage

Sample Code

①BASIC Player

②Original image Player

③AUDIO Player

④ Full Custom Player

API

Default

Options

Dependencies

Licence

Author