videojs.ima is not a function

[a0937027831]

### Expected behaviour play ads

Actual behaviour

this.player.ima is not a function

Steps to reproduce

1.open cmd 2.npx nuxi init videojs_ima 3.npm i video.js、npm i videojs-contrib-ads、npm i videojs-ima

Environment

• Browser: chorme
• Version: 110.0.5481.178
• Operating System: nuxt
• Version: 3.2.3

Console errors (if any)

this.player.ima is not a function

Link to where the bug is happening

editor online

[netin1202]

Facing same issue in react js

[TodsapornSangpook]

I ran into the same problem as you in video.js 8.x

[a0937027831]

video.js version 7.21.3 videojs-ima version 2.1.0 =>can use

[Kiro705]

Hello @a0937027831 ,

In your sample I do not see a call loading in the IMA SDK:

<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

This is still required when using ES6 imports for the videoJS-IMA plugin.

In addition, I am not familiar with https://codesandbox.io/, but I did not see the various dependencies downloaded anywhere being used in the sample:

import videojs from 'video.js';
import 'videojs-contrib-ads';
import 'videojs-ima';
// Styles
import 'video.js/dist/video-js.min.css';
import 'videojs-contrib-ads/dist/videojs-contrib-ads.css';
import 'videojs-ima/src/css/videojs.ima.css';

Let me know if you have any additional questions.

Thank you, Jackson IMA SDK team

[a0937027831]

Hi @Kiro705 ,Thanks for your reply I add this script in head <script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script> but also show videojs.ima is not a function

start point onMounted(() => { player = videojs("video", videoOptions, onReady); });

function onReady() { var adsOptions = { debug: true, id: "video", adTagUrl: "http://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=xml_vmap1&unviewed_position_start=1&cust_params=sample_ar%3Dpremidpostpod%26deployment%3Dgmf-js&cmsid=496&vid=short_onecue&correlator=", }; player.ima(adsOptions); }

this my example github 1.npm install 2.npm run dev 3.open chrome http://localhost:3000/

[Kiro705]

Hello @a0937027831 ,

Thank you for sharing the sample, I was able to reproduce the issue with the Uncaught TypeError: player.ima is not a function error.

I think this might be an issue with somehow Nuxt not supporting how the videojs-ima plugin is set up. When testing, I see a request to http://localhost:63112/_nuxt/node_modules/.vite/deps/videojs-ima.js?t=1679412490332&v=3e4b2345 which seems to be a re-compiled version of the videojs-ima plugin files. This file is getting run, but does not seem to successfully register the plugin with video.js. I also do not see an explicit call to import videojs from 'video.js'; in the file which might be the reason why.

I am not very familiar with Nuxt and cannot confirm if it supports this plugin. If you create a different sample that does not use Nuxt, does the issue still happen?

Thank you, Jackson IMA SDK team

[a0937027831]

Hi @Kiro705 ,Thanks for your reply I can comprises this version to success play ads "dependencies":{ "video.js": "^7.21.3", "videojs-contrib-ads": "^6.9.0", "videojs-ima": "^2.1.0" } I got the test result :

1. if I use video.js 7+ version with videojs-contrib-ads 6.9.0 version can play
2. if you install video.js 8+ version , you need install videojs-contrib-ads 7.1.0 version，because videojs-contrib-ads 7.1.0 version not supper video.js 7+ !
3. So maybe videojs-contrib-ads 7.1.0 version there are changes something

this is my successed example project successed github onlineEditor

[adiffmike]

This is a peer dependencies issue that will arise if you're installing and using this as a module.

The videojs version in peerDependencies is capped at 7 "video.js": "^5.19.2 || ^6 || ^7" so yarn/npm will install version 7 for the videojs-ima module. That version is what will get the ima plugin attached but it won't be the version or instance of videojs that gets included in your source file that you use to create a player. You can see this if you use version 8 and videojs-contrib-ads in your package.json and install videojs-ima yarn will install videojs and videojs-contrib-ads under node_modules/videojs-ima/node_modules

Until this package gets updated you can force it to use the updated installed versions by adding the following to your package.json:

  "resolutions": {
    "videojs-contrib-ads": "^7.1.0",
    "video.js": "^8.0.4"
  }

Once you do this you shouldn't see the child packages installed under node_modules/videojs-ima/node_modules

[a0937027831]

@adiffmike,Thanks for your reply I succeeded to play ima,no error! I add this: "overrides": { "videojs-contrib-ads": "^7.1.0", "video.js": "^8.0.4" } @adiffmike @Kiro705 Thanks for your help!!