Detect JWPlayer is unable to play any given sources and show custom error message

Question

I'm using JWPlayer and passing a .smil source and a .m3u8 source to the constructor:

var player = jwplayer("jwplayer-container");

player.setup({

    ...

    sources: [
        {
            file: "some-rtmp-manifiest.smil"
        },
        {
            file: "some-hls-playlist.m3u8"
        }
    ],

    ...

});

Unfortunately, if I view my player on a browser that doesn't support HLS or have Flash installed, I see an ugly and confusing error message in the player saying

Error loading player: No playable sources found

How can I detect this particular state in order to show my own error message (suggesting that the user installs Flash)?

Answer 1

.onSetupError (JW Player 6) or .on('setupError') (JW Player 7) should catch this. http://support.jwplayer.com/customer/portal/articles/1413089-javascript-api-reference

Additionally, JW Player 6 has a "fallback: false" option you can pass in when setting up the player. Adding this in should prevent JW Player from showing the message, letting you put your own message there instead. I'm not sure if JW7 keeps this or not.

Answer 2

Here is an example:

http://support.jwplayer.com/customer/portal/articles/1442607-example-a-custom-error-message

var playerInstance = jwplayer("container");
​playerInstance.onError(function(){
​playerInstance.load({file:"http://www.com/errorfile.mp4",image:"http://www.com/errorfile.jpg"});
playerInstance.play();
});

Or, for streaming:

playerInstance.on('buffer', function(){
theTimeout = setTimeout(function(){
playerInstance.load({file:"http://www.com/errorfile.mp4",image:"http://www.com/errorfile.jpg"});
playerInstance.play();
},5000);
});

Or, if it isn't a media error, and a setup error instead, use onSetupError - http://support.jwplayer.com/customer/portal/articles/1413089-javascript-api-reference

Answer 3

additionally, to play a custom message on setupError, create a function that sets up the player with a custom video file (if a bad video file is the reason why your setupError occurred).

    player.on('setupError', function () {
        player.setup({
            file: '//content.jwplatform.com/videos/7RtXk3vl-52qL9xLP.mp4',
            width: width,
            height: height,
            autostart: true,
        });
    })