Download jwplayer.js using Require.js

Question

So, I'm new to Require.js, and I studied this library by loading various libraries using Require.js methods.

I successfully load Knockout.js objects, a Chart.js object, and also Require.js custom objects.

But I can not load jwplayer using Require.js. This is the error method I received: Uncaught TypeError: cannot call jwplayer method from undefined

This is my sample code (knockout, all chart objects 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 download jwplayer.js using Require.js?

Answer 1

jwplayer.js does not define a module for require.js, so you have to use shim config , something like this:

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

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

Edit: typo in the sample code.

Edit 2: it should be noted that jwplayer () will return null if it cannot find the player that you are passing it to, so even if it is loaded correctly, it still throws this error. If you get an error even after you enable the configuration, try adding something like

 console.log(jwplayer.api); 

in the required callback and check your console to see if there is anything there.