JWPlayer and HLS streaming - "Error loading player: No playable sources found"

Question

The problem

I have a server (nginx-rtmp-module) that streams from IP camera to HLS. I want to embed the live stream to popular browsers: Chrome, Firefox and IE.

The stream is not working on some desktop browsers.

• Test player: https://content.jwplatform.com/previews/KCpvutTz-FfTLdraP

What I tried

Tested devices and browsers:

• Firefox on PC - "Error loading player: No playable sources found"
• IE 11 - OK
• Chrome on PC - OK
• Chrome on Android - OK
• iPhone - OK

The questions

How to resolve these issues? Is the flash a requirement for live HLS streaming on desktop browsers?

Answer 1

After contacting jwpplayer support and some source code digging, I figured out some facts.

Flash is not necessarily a requirement for live streaming but it is currently a requirement for HLS playback in Chrome and Firefox (in addition to IE). Chrome has its own built-in version of Flash, so unless it was deliberately disabled, it should play the HLS stream without needing to download and install the Flash Player. However, Firefox and IE would need the Flash Player installed.

On my machine IE 11 was working, but Firefox failed with message "Error loading player: No playable sources found" (because of missing Flash plugin). So I added some JavaScript to display correct message.

swfobject.js library is required for this to work: http://github.com/swfobject/swfobject

jwplayer.key="<<-THE-KEY->>";
var player = jwplayer("video_container").setup({
    file: "http://domain.lt/live/stream.m3u8",
    androidhls: true,
    width: '100%',
    aspectratio: '16:9',
    autostart: 'true',
    stretching: 'fill'
});

player.onSetupError(function(error)
{
    if (swfobject.getFlashPlayerVersion().major == 0)
    {
        var message = 'Flash is missing. Download it from <a target="_blank" href="http://get.adobe.com/flashplayer/" class="underline">Adobe</a>. (uncheck "McAfee Security Scan Plus" and "True Key™ by Intel Security" )</p>';
        $("#video_container").hide();
        $("#video_callout").html(message);
    } else
    {
        var message = '<p>Your device is not supported. Please visit this page on another PC or Phone.</p>';
        $("#video_container").hide();
        $("#video_callout").html(message);
    }   
});