videojs-ima: this.vjsPlayer.ads is not a function (no adBlock)

Hi! Didnt understand why it is so, but:

bundle.js:100686 Uncaught TypeError: this.vjsPlayer.ads is not a function at new PlayerWrapper (bundle.js:100686) at new Controller (bundle.js:102509) at new ImaPlugin (bundle.js:103132) at Player.init (bundle.js:103302) at Player.basicPluginWrapper [as ima] (bundle.js:27984) at Object.<anonymous> (bundle.js:62424) at webpack_require (bundle.js:20) at exports.__esModule (bundle.js:63) at bundle.js:66

This error is displayed both in FF and Chrome.

webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module:{
   loaders: [
     {test : /\.css$/,
       loader: 'style!css!'},
     {loader: 'url-loader?limit=100000',
     test: /\.(png|woff|woff2|eot|ttf|svg)$/
}
   ]
 },
 resolve: {
  alias: {
    webworkify: 'webworkify-webpack-dropin'
  }

index.js:

import videojs from 'video.js';
import * as HLS from 'videojs-contrib-hls';
window.videojs = videojs;

import 'videojs-contrib-ads';
import 'videojs-ima';


require('!style-loader!css-loader!video.js/dist/video-js.css');
require('!style-loader!css-loader!videojs-contrib-ads/dist/videojs.ads.css');
require('!style-loader!css-loader!videojs-ima/dist/videojs.ima.css');


let player = videojs('rbc');
let options = {
  id: 'rbc',
  adTagUrl: '//data.videonow.ru/?profile_id=1634796&format=vast&container=preroll'
};

  player.ima(options);

index.html:

<video id="rbc" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'>
    <source src="https://online-video.rbc.ru/online/rbctv.m3u8" type="application/x-mpegURL">
  </video>

  <script src="dist/bundle.js"></script>

“Cloud” version of scripts works well, but my bundle.js - no.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 16 (2 by maintainers)

Most upvoted comments

Thanks for the info - filing as an FR to import contrib-ads via a module system.

shawnbuso on Jan 2, 2018

I think ultimately the right solution for this is for the videojs-contrib-ads dependency to be imported using a module system by videojs-ima. I created an example of how to do this:

https://github.com/videojs/videojs-contrib-ads/pull/312/files

incompl on Dec 29, 2017

@shawnbuso @incompl Hi guys! After all, I found another solution. First, this is nesessary to add in webpack.config.js ProvidePlugin with videojs:

  plugins: [
    new webpack.ProvidePlugin({
      videojs: 'video.js'
    })
  ]

After that every module will “know” about videojs; you dont needed in import of this, nowhere.

Second, in your <main.js> after import of videojs-contrib-ads U must manually register this plugin:

import './somePlugin';
import 'anotherPlugin'; 
// no need in videojs import!

import * as contribAds from 'videojs-contrib-ads';
videojs.registerPlugin('ads', contribAds.default); 
import 'videojs-ima';

After this you have one simple file for bundle.

Kogoruhn on Jan 19, 2018