5

I'm working on a website that includes some JS code that I do not control. That code uses RequireJS to load dependencies and all.

Disclaimer: I'm a RequireJS noob. I understand the basics, but that's pretty much it...

In my website, I need to use VideoJS. VideoJS can work with, or without RequireJS but from what I understand, if RequireJS is used somewhere in the page, I cannot use VideoJS without it.

So I'm loading VideoJS with RequireJS like this:

var MyRequire = requirejs.config({
    baseUrl: '/_/js',
    paths: {
        videojs: 'http://vjs.zencdn.net/5.3.0/video'
    }
});
MyRequire(["videojs"], function(videojs) {
    videojs('myPlayer', {}, function(){
        console.log('...');
    });
});

And it's working.

But I want to use a VideoJS plugin to manage preroll ads. (https://github.com/dirkjanm/videojs-preroll)

I tried to include the plugin script with RequireJS, the script is included but as soon as the plugin tries to access the videojs object, I get an error telling me that videojs is not defined.

My guess is that when I load VideoJS as a RequireJS module, it's not in the global scope and the plugin that I'm using is looking for VideoJS in the global scope and that's why I get that error.

Is there any way I can use VideoJS without loading it as a RequireJS module? Or how can I help the plugin find the VideoJS object?

Thanks for your help!

Gabriel
  • 2,720
  • 4
  • 28
  • 36

1 Answers1

7

You should use shim from requirejs and inject videojs into global scope. I made an example of code for your case. I tested it and it works (you can see images below):

Loading order:

  1. "videojs"
  2. "add-video-js-in-global-scope"
  3. "ads" (at this moment videojs var already in window object)
  4. "preroll"

Requirejs analysis order:

  1. requirejs(["preroll", "ads"] - entry point
  2. "preroll" - requires "ads"
  3. "ads" - requires "add-video-js-in-global-scope"
  4. "add-video-js-in-global-scope" - requires "videojs" and add videojs var in window object.

app.js 

requirejs.config({
    paths: {
        "videojs": "./libs/video",
        "ads": "./libs/videojs.ads",
        "preroll": "./libs/videojs-preroll"
    },
    shim:{
        "preroll": {
            deps: ['ads']
        },
        "ads": {
            deps: ["add-video-js-in-global-scope"],
        }
    }
});

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

requirejs(["preroll", "ads"], function (preroll,ads) {
    // preroll and ads will be undefined because it's not amd.
    videojs('idOne', {}, function () {
        var player = this;
        player.ads(); // initialize the ad framework
        // your custom ad integration code
    });
});

index.html

<html>
<head>
</head>
<body>
    <script data-main="app.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js"></script>
    <div id="idOne"></div>
</body>
</html>

result:

files:

Rajab Shakirov
  • 7,265
  • 7
  • 28
  • 42