Issue with webpack

[vlinder]

I had a problem with jPlayer flash solution when using webpack. The ready event never fired and so it was impossible to play anything with it, while the html solution worked just fine. This problem is likely to also occur with other similar build systems.

Spent a lot of time thinking I did something wrong until finally producing a minimal test case which also failed. After a little digging into the jPlayer action script source this is what I came up with.

To use the flash solution jQuery must be set in the global namespace.

Just do something like this in your client entry code:

import $ from 'jquery';
import 'jplayer';
import jPlayerSwf from '<node_modules>/jplayer/path/to/jplayer.swf';

window.$ = $;
window.jQuery = $; // For jplayer.swf flash solution to work.
window.jPlayerSwf = jPlayerSwf;

Previously I only set window.$ = $;.

Then to instantiate a new player:

$('<div id="test"></div>').appendTo(document.body).jPlayer({
  swfPath: window.jPlayerSwf,
  solution: 'flash',
  provided: 'mp3',
  ready: function(){
    console.log('ready event fired');
    $(this).jPlayer('setMedia', {mp3: 'http://example.com/stream_or_file.mp3'});
    $(this).jPlayer('play');
  }
});

Hope this helps someone. After a lot of googling got me nowhere.