Videojs-ima plugin with requirejs not including plugins on load

Question

I followed the example at How can I use a videojs plugin when I also use RequireJS and I have this prepared:

requirejs.config({
urlArgs: "bust=" + (new Date()).getTime(),

baseUrl: framework + '/',

//Framework paths
paths: {
    'framework': framework,
    'jquery': 'js/jquery.min',
    'videojs': 'js/video.min',
    'ads': 'js/videojs.ads.min',
    'ima': 'js/videojs.ima',
    'googleima': '//imasdk.googleapis.com/js/sdkloader/ima3',
    'main': 'js/main',
    'config': 'js/config',
    'nearest': 'js/nearest.min',
},

shim: {
    'nearest': ['jquery'],
    'ads': {
        deps: ['videojs-in-global'],
    },
    'ima': {
        deps: ['ads']
    },
}
});

define("videojs-in-global",["videojs"], function(videojs) {
    window.videojs = videojs;
});

And when running a page I get en error:

videojs.ima.js:1127 Uncaught TypeError: player.ads is not a function

I believe I should also include player or ads in some global scope but I have been working on it without any luck. Could you help me figure it out? I'm new to requireJs, still learning but it seems to do excellent work.

zyexal · Answer 1 · 2016-04-02T04:14:48.603

You probably have initialized player.ads yourself (not provided in question) and IMA expect player.ads to be a function, what it is before initialization. So don't call player.ads() anywhere.

Therefore your implementation should look more or less like:

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="//vjs.zencdn.net/5.0/video-js.min.css">
        <link rel="stylesheet" href="css/videojs.ads.css">
        <link rel="stylesheet" href="css/videojs.ima.css">
    </head>
    <body>
        <video id="content_video" class="video-js vjs-default-skin" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png" autoplay controls>
            <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'/>
            <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'/>
            <source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg'/>
        </video>
        <script data-main="app.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js"></script>
    </body>
</html>

app.js

requirejs.config({
    paths: {
        "videojs": "//vjs.zencdn.net/5.0/video.min",
        "ads": "./libs/videojs.ads",
        'ima': './libs/videojs.ima',
        'googleima': '//imasdk.googleapis.com/js/sdkloader/ima3'
    },
    shim:{
        'ima': {
            deps: ['googleima','ads']
        },
        'ads': {
            deps: ['videojs-in-global']
        }
    }
});

define("videojs-in-global",["videojs"], function(videojs) {
    window.videojs = videojs;
});

requirejs(['ima'], function () {

    var player = videojs('content_video', {}, function(){

        /* solves problem, if vjs.ads isn't able to find Html5, like for me (properly version conflicts) */
        videojs.Html5 = videojs.getComponent('Html5');

        /* do not initialize ads, ima will do this */
        // player.ads();

        player.ima({
            id: 'content_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='
        });

        var contentPlayer =  document.getElementById('content_video_html5_api');
        if ((navigator.userAgent.match(/iPad/i) ||
            navigator.userAgent.match(/Android/i)) &&
            contentPlayer.hasAttribute('controls')) {
            contentPlayer.removeAttribute('controls');
        }

        var startEvent = 'click';
        if (navigator.userAgent.match(/iPhone/i) ||
            navigator.userAgent.match(/iPad/i) ||
            navigator.userAgent.match(/Android/i)) {
            startEvent = 'tap';
        }

        player.ima.initializeAdDisplayContainer();
        player.ima.requestAds();
        player.play();

    });

});

Please note, that I had issues with videojs.ads plugin. Probably some version conflicts. Would be glad, if someone could tell us, what's going wrong when vjs.Html5 is undefined within the plugin.

A quick and maybe dirty fix was to add this line:

videojs.Html5 = videojs.getComponent('Html5');

The configuration might not be perfect, as I'm relatively little familiar with this player and requirejs.

Have a nice day.

Videojs-ima plugin with requirejs not including plugins on load

1 Answers1

HTML

app.js