Error: VIDEOJS: TypeError: this.el_[a] is not a function

[uto-usui]

Hi, thanks for your great project !!✨

I used this, but it did not work, so please let me know if there is a solution.

import bc from '@brightcove/player-loader'

bc({
  refNode: document.querySelector('#video'),
  refNodeInsert: 'replace',
  accountId: 'xxx',
  playerId: 'xxxx',
  embedId: 'default',
  videoId: 'xxxxx'
}).then(function(success) {
  console.log('good', success)
}).catch(function(error) {
  console.log('bad', error)
});

△ js

<div id="video"></div>

△ html

Then, it succeeds in acquiring the resource as follows, but an error occurs.

△ success object

△ error message

This is the structure of html output.

environment

node v9.11.2 webpack v4.16.5

Please let me know if I am wrong or advise. Thanks :)

[samson-sham]

Probably you're using an unsupported version of Brightcove Player. I have got this error because of it.

Brightcove Player Support Currently, this library supports Brightcove Players v6.11.0 and higher.

The supported version is stated on Readme.

[uto-usui]

I checked the versions that followed your advice, and when I updated it was able to display video.

Thank you for your reply soon.

[gkatsev]

We should see if we can log an error or something saying that the version of the player is not supported.

[misteroneill]

v1.4.0 is released. Anyone encountering this error going forward has two options.

First, and easiest, you can update your Brightcove Player to the latest version. This is recommended!

Second, you can make sure you're on v1.4+ of this library and pass a custom embed tag name to override the default <video-js> element with a <video> element. Therefore, the example from the original issue:

import bc from '@brightcove/player-loader'

bc({
  refNode: document.querySelector('#video'),
  refNodeInsert: 'replace',
  accountId: 'xxx',
  playerId: 'xxxx',
  embedId: 'default',
  videoId: 'xxxxx',
  embedOptions: {
    tagName: bc.EMBED_TAG_NAME_VIDEO
  }
}).then(function(success) {
  console.log('good', success)
}).catch(function(error) {
  console.log('bad', error)
});

But, again, updating your Player is our recommendation. We think the default <video-js> element is superior because it gives Video.js (and, therefore, the Brightcove Player) a cleaner player initialization process with less chance for race conditions based on the browser's handling of the native <video> element.

[uto-usui]

Thank you for kind commit !! But, as you say, I will basically consider using a new version. I would like to use this option if it is difficult to update what I used in the past.

thanks 🙏🏻