getting "google is not defined"

[khatibda]

I'm using React/Webpack, and trying to get videojs-ima to work properly with videojs v7 (using newest release). following the guidelines, i'm trying this

import 'video.js/dist/video-js.css';
import videojs from 'video.js';
import 'videojs-contrib-ads';
import 'videojs-ima';
...
  componentDidMount() {
    // instantiate Video.js
    logger.log('mounting video wrapper and player', this.wrapperNode, this.videoNode);
    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
      logger.log('onPlayerReady', this, this.ima);
      this.ima(options);
    });
  }

my logger output looks like this

So it does look like the plugin is recognized, but somehow google is not defined, which implies that perhaps it didn't initialize properly. Unless there is a required dependency that hasn't been imported.

Thoughts?

[arnaudcasame]

Hi,

It looks like the IMA SDK loader is missing in your project, it is required by the Videojs-IMA plugin for ads requests. Try to manually add the IMA SDK loader script to your index.html file. <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

[khatibda]

ok that worked, thanks. seems like this page is pretty misleading

https://developers.google.com/interactive-media-ads/docs/sdks/html5/

Not clear we have to load the SDK ourselves from this language, and if so..what exactly is the core value that this npm plugin is providing, vs. importing all the dependent files ourselves?

[arnaudcasame]

Hi,

The page you're pointing at is about the IMA SDK for HTML5 implementation guide (it doesn't use NPM or dependencies) and is not about videojs. On the videojs-ima plugin page it is stated that you have to reference the IMA SDK library in your index.html page.