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

        
          <div id="brightcovePlayerOriginalimage">
            <script>
              new PLAYER_MODULE_BRIGHTCOVE({
                id: 'brightcovePlayerOriginalimage',
                videoid: '4230322585001',
                account: '20318290001',
                loop: true,
                muted: true,
                ui_default: false
              });
            </script>
            <div>
              <div class="ui-btn-play">
                <img class="on" src="//placehold.jp/14/333/ddd/120x30.png?text=PLAY" alt="">
                <img class="off" src="//placehold.jp/14/ddd/333/120x30.png?text=PLAY" alt="">
              </div>
              <div class="ui-btn-pause">
                <img class="on" src="//placehold.jp/14/333/ddd/120x30.png?text=PAUSE" alt="">
                <img class="off" src="//placehold.jp/14/ddd/333/120x30.png?text=PAUSE" alt="">
              </div>
              <div class="ui-btn-stop">
                <img class="on" src="//placehold.jp/14/333/ddd/120x30.png?text=STOP" alt="">
                <img class="off" src="//placehold.jp/14/ddd/333/120x30.png?text=STOP" alt="">
              </div>
              <div class="ui-btn-mute">
                <img class="on" src="//placehold.jp/14/333/ddd/120x30.png?text=MUTE" alt="">
                <img class="off" src="//placehold.jp/14/ddd/333/120x30.png?text=MUTE" alt="">
              </div>
            </div>
          </div>
        

          
          <script>
            var PMB = new PLAYER_MODULE_BRIGHTCOVE({
              id:'brightcovePlayerCustom',
              ui_controls:true,
              ui_default:true,
              videoid:'4230322585001',
              account:'20318290001',
              width: '480px',
              height: '300px',
              volume: 0.5,
              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.Stop()">Media停止(Stop)</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>
          <button class="btn_change btn btn-secondary" data-PMB-id="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="display_time">00:00</p>
            <p class="display_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 id="brightcovePlayerAudio">
            <script>
              new PLAYER_MODULE_BRIGHTCOVE({
                mode: 'audio',
                id:'brightcovePlayerAudio',
                videoid:'4230322585001',
                account:'20318290001',
              });
            </script>
          </div>