.player is not a function about bitmovin-player-ui

[stonko1994]

Which player-version are you using?
Can you provide the steps how you include and setup the player?

[josephlodero]

"bitmovin-player-ui": "^2.18.0"

and i just imported it in my page.
import * as bitmovinPlayer from 'bitmovin-player-ui'

constructor(
) {
let player = bitmovinPlayer.player('id');
let config = {
source: {
dash: 'https://path/to/mpd/file.mpd',
hls: 'https://path/to/hls/playlist/file.m3u8',
smooth: 'https://path/to/manifest/file/Manifest'
}
}

player.setup(config).then(
  function(player) {
    console.log('Successfully created Bitmovin Player instance');
  },
  function(reason) {
    console.log('Error while creating Bitmovin Player instance');
  }
);

}

[protyposis]

If you really are importing the player from the UI package, that's the issue. For the player you need bitmovin-player instead of bitmovin-player-ui.

[stonko1994]

Another thing: You need to move the player initialization to the ionViewDidEnter method or at least out of the constructor. Because the HTML and therefore the #player-element isn't accessible there.

[josephlodero]

thanks for the reply guys..
i already change the import into bitmovin-player
"bitmovin-player": "^7.3.10",

and put the player initialization to ionViewDidEnter

but still got the error:

[stonko1994]

First you could use lastest release version:

"bitmovin-player": "^7.8.3",
"bitmovin-player-ui": "^2.18.0",

A working sample for ionic3 look like:
in the html file:

<ion-content>
...
<div id="player"></div>
...
</ion-content>

in the ts file:

  import bitmovinPlayer from 'bitmovin-player';
  import bitmovinPlayerUI from 'bitmovin-player-ui';

  ...

  ionViewDidEnter() {
    let config = {
      key: 'YOUR KEY HERE',
      style: {
        ux: false,
      },
      source: {
        progressive: '//bitdash-a.akamaihd.net/content/sintel/Sintel.mp4',
        poster: '//bitdash-a.akamaihd.net/content/sintel/poster.png',
      }
    };

    let player = bitmovinPlayer('player');
    player.setup(config).then(() => {
      let uiManager = bitmovinPlayerUI.UIManager.Factory.buildDefaultUI(player, {});
      console.log('success');
    }).catch(() => {
      console.log('failure');
    })
  }

For the css for the playerUI follow these steps and add @import 'bitmovinplayer-ui'; to your .scss file

[josephlodero]

Hi! Thank You for your help..
I already follow your instruction and i got this error:

[josephlodero]

okay i already got it.
i just included this to my copy.config.js:

[josephlodero]

Hi @stonko1994
can you please help me with these error?

it always happen when im going back to the list of video and revisit the page

[stonko1994]

Unfortunately this stacktrace doesn't provide much information. But it seems that it's not UI related.

[h0jeZvgoxFepBQ2C]

Hi! Thank You for your help.. I already follow your instruction and i got this error:

I have this issue now, with the latest version. @josephlodero where do you set this config?