JWPlayer and HLS streaming - “Error loading player

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);
    }   
});

Answer 2

It seems that is failing due to mixed content. You've got your page on https but the jwplayer's url is on http.

Could you put all under https and try again?

Answer 3

I've got the same problem on one of the projects I've worked for a while time ago. To solve issues on browsers which does not support RTMP I've added fallback source with MP4 file:

sources: [{ 
    file: "rtmp://example.com/application/mp4:myVideo.mp4"
},{
    file: "https://example.com/assets/myVideo.mp4"
}] 

Documentation: https://support.jwplayer.com/customer/portal/articles/1430358-using-rtmp-streaming

Answer 4

It might depend on what player you are using. I've had good luck so far with Flowplayer and was able to play live streams without the Flash Player plug-in in Chrome (instead, it uses MSE to render the HLS streams). Same result using IE11 on Windows 10, though on a Windows 7 machine, the HLS stream was rendered by the Adobe Flash Player (as it was in earlier versions of IE). Firefox remains a problem: v45 has MSE support, but failed to handle HLS properly because of fragment loading errors. It looks like this problem has been previously identified and hopefully will be addressed soon.