Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Loading jwplayer.js using Require.js

So, I'm new to Require.js and I've been learning this library by loading various other libraries using Require.js methods.

I've successfully load Knockout.js objects, Chart.js object, as well as custom Require.js defined objects.

But I can't seem able to load jwplayer using Require.js. This is the error method I received: Uncaught TypeError: Cannot call method 'jwplayer' of undefined

This is my sample code (the Knockout, Chart objects all loaded successfully)

require(['jwplayer/jwplayer', 'libs/Chart', 'libs/knockout-2.1.0', 'appViewModel','helper/util'], function(jwplayer, chart, ko, appViewModel, util) {

//LOADING FROM jwplayer.js
jwplayer("player").setup({
    width: '320',
    height: '40',
    sources: [{
        file: "rtmp://127.0.0.1:1935/vod/mp3:sample_1.mp3"
    },{
        file: "http://127.0.0.1:1935/vod/sample_1.mp3/playlist.m3u8"
    }]
});

//LOADING FROM Chart.js
var barChartData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,1)",
            data : [65,59,90,81,56,55,40]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            data : [28,48,40,19,96,27,100]
        }
    ]   
};
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);

//LOADING FROM knockout-2.1.0.js
ko.applyBindings(new appViewModel());

//LOADING FROM A CUSTOM DEFINED OBJECT
util.greets(); 
    });

So how do you load jwplayer.js using Require.js?

like image 980
Arie M. Prasetyo Avatar asked Mar 30 '13 01:03

Arie M. Prasetyo


1 Answers

jwplayer.js doesn't define a module for require.js, so you're going to have to use the shim config, something like this:

require.config({
    shim: {
        'jwplayer/jwplayer': {
            exports: 'jwplayer'
        }
    }
});

You can see more about how to use it in the requirejs api docs.

Edit: typo in code sample.

Edit 2: it should be noted that jwplayer() will return null if it can't find the player that you pass it, so even if it is loaded correctly, it will still throw that error. If you're getting the error even after including the configuration, try adding something like

console.log(jwplayer.api);

in the require callback and check your console to see if there's anything there.

like image 180
Rick Quantz Avatar answered Nov 01 '22 17:11

Rick Quantz