jwplayer 7 for HLS live streaming

Wowza Streaming Engine
1

I recently upgraded my jwplayer to 7.2.4, and somehow it broke the link it previously had to open a player on mobile devices. I have a call like:

Streaming RTSP Link–Click here.

Down below I call the player like this:

jwplayer(“player”).setup({

sources: [{file: “rtmp://[server id]:1935/live/flv:<?php echo $flightId?>”}],

rtmp: {

bufferlength: 3

},

image: “app/images/skytubelive_logo.png”,

fallback: false,

autostart:true,

width: “100%”,

height: “100%”,

ratio: “100%”,

responsive: true,

});

Formerly on a PC this would show a jwplayer and on the phone would show that RTSP link, that you could click on and it would then query you for what app you wanted to play the stream with. Now, however, on the phone, as on a PC, it shows a jwplayer, which of course does not work on a phone.

I asked jwplayer about it and they said the fallback configuration option does not exist in JW 7 because the player will be able to render its controls in HTML5 no matter how the actual player is being rendered and I should look into using HLS as our streaming format as “it is supported in desktop browsers and natively supported on both iOS and Android.” (is this correct?)

I have looked at your page on jwplayer here: https://www.wowza.com/docs/how-to-use-jw-player-with-wowza-streaming-engine, and tried to change my calls above, with no success as of yet. None of the examples that are given show HLS for a live stream. Can someone suggest how to change the above jwplayer call to play the live stream properly that will work on desktop and mobile browsers? I.e., what is the proper address to point the jwplayer to in order to play a live stream via HLS?

Thanks!

Brian

2

When I change the player call to say:

sources: [

{file: “rtmp://52.20.68.152:1935/live/flv:<?php echo $flightId?>”},

{file: “http://52.20.68.152:1935/live/<?php echo $flightId?>/playlist.m3u8”}],

then it works on my PC, but on my phone it never plays anything, just a black screen. (Without the http line, i.e., the original version as shown above, it gives an “error loading player: no playable sources found” message.) Can someone PLEASE PLEASE PLEASE tell me what I’m doing wrong???

3

Hello Brian,

This is a very specific player issue you are dealing with. JW Player is correct, the HLS url is “supported in desktop browsers and natively supported on both iOS and Android.” For now, I would test the actual HLS url and drop the <?php echo $flightId?> piece of your call to see if this is the issue within JW Player.

If you can setup this simple test below with your latest version of JW Player, only using the HLS url and playback successfully, you will know that the issue lies with JW Player handling the variable in the url.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JW Player</title>
    <script src="jwplayer.js"></script>
    <script>jwplayer.key = "[jwplayer-key]";</script>
</head>
<body>
<div id="player"></div>
<script>
    jwplayer("player").setup({
        sources: [{
            file: "http://[wowza-ip-address]:1935/vod/sample.mp4/playlist.m3u8"
        }],
        height: 360,
        width: 640
    });
</script>
</body>
</html>

I hope this helps.

Regards,

Mac