Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Using playlist / sources for Live and VOD playback?

So, Im trying to set up our JW PRO to play a live stream if it exist, and if it does not (it has ended) then have it play the vod files (3 different qualities).

First i tried setting it up by pointing the first source in the playlist to the live stream labeling it LIVE and the next three sources to the VOD files labeling them 720p/360p/240p respectively. This works file for when the source is Live. But if I load the page when the live source no longer exist it will throw "Cannot load M3U8: No levels to play".

So then I tried moving the live source out of the sources and adding it as a playlist item instead. This works fine for when the stream is VOD (no labels or quality selection though, seems like it only grabs the first source). But if it is a Live stream the player throws me "Cannot load M3U8: 404 File not found".

It feels like I'm missing something obvious...

Code for first example / Works for Live: (https://epi-resurs.slu.se/avs/stream/livevod/?title=Test&appname=pexip&streamname=b730f36f-4359-43bf-be1b-20d6dec57714&image=bild)

'playlist': [{
'image': 'image/bild.jpg',
'title': 'Test',
'sources': [{
'file': 'https://57c94ad4a346c.streamlock.net/pexip/ngrp:b730f36f-4359-43bf-be1b-20d6dec57714_all/playlist.m3u8',
'label': 'Live'
},{
'file': 'https://57c94ad4a346c.streamlock.net/vod/_definst_/mp4:pexip/b730f36f-4359-43bf-be1b-20d6dec57714_720p.mp4/playlist.m3u8',
'label': '720P'
},{
'file': 'https://57c94ad4a346c.streamlock.net/vod/_definst_/mp4:pexip/b730f36f-4359-43bf-be1b-20d6dec57714_360p.mp4/playlist.m3u8',
'label': '360P'
},{
'file': 'https://57c94ad4a346c.streamlock.net/vod/_definst_/mp4:pexip/b730f36f-4359-43bf-be1b-20d6dec57714_240p.mp4/playlist.m3u8',
'label': '240P'
}]
}]
});

Code for second example / works for VOD: (https://epi-resurs.slu.se/avs/stream/livevod/index2.cfm?title=Test&appname=pexip&streamname=b730f36f-4359-43bf-be1b-20d6dec57714&image=bild)

'playlist': [{
'image': 'image/bild.jpg',
'file': 'https://57c94ad4a346c.streamlock.net/pexip/ngrp:b730f36f-4359-43bf-be1b-20d6dec57714_all/playlist.m3u8',
'title': 'Test',

'sources': [{
'file': 'https://57c94ad4a346c.streamlock.net/vod/_definst_/mp4:pexip/b730f36f-4359-43bf-be1b-20d6dec57714_720p.mp4/playlist.m3u8',
'label': '720P'
},{
'file': 'https://57c94ad4a346c.streamlock.net/vod/_definst_/mp4:pexip/b730f36f-4359-43bf-be1b-20d6dec57714_360p.mp4/playlist.m3u8',
'label': '360P'
},{
'file': 'https://57c94ad4a346c.streamlock.net/vod/_definst_/mp4:pexip/b730f36f-4359-43bf-be1b-20d6dec57714_240p.mp4/playlist.m3u8',
'label': '240P'
}]
}]
});

4 Community Answers

Up Down

Anders

User  
0 rated :

Kind of got it to work, though quality/labels don't work. Also gonna see if I can make it move on to the next playlist item without requiring any user interaction.

Code:
'playlist': [{
/* Denna Funkar för Live men inte VOD */
'sources': [{
'file': 'https://57c94ad4a346c.streamlock.net/pexip/ngrp:b730f36f-4359-43bf-be1b-20d6dec57714_all/playlist.m3u8',
'label': 'Live'
}],

'image': 'image/bild.jpg',
'title': 'Test'
},{
'sources': [{
'file': 'https://57c94ad4a346c.streamlock.net/vod/_definst_/mp4:pexip/b730f36f-4359-43bf-be1b-20d6dec57714_720p.mp4/playlist.m3u8',
'label': '720P'
},{
'file': 'https://57c94ad4a346c.streamlock.net/vod/_definst_/mp4:pexip/b730f36f-4359-43bf-be1b-20d6dec57714_360p.mp4/playlist.m3u8',
'label': '360P'
},{
'file': 'https://57c94ad4a346c.streamlock.net/vod/_definst_/mp4:pexip/b730f36f-4359-43bf-be1b-20d6dec57714_240p.mp4/playlist.m3u8',
'label': '240P'
}],

'image': 'image/bild.jpg',
'title': 'Test'
}]
});

Up Down

Anders

User  
0 rated :

Found a better way to handle it by using .on('error'):
Im still not able to switch quality though! What am I missing?

var player = jwplayer("thePlayer");

player.setup({
'hlshtml': 'true',
'file': 'https://57c94ad4a346c.streamlock.net/pexip/ngrp:b730f36f-4359-43bf-be1b-20d6dec57714_all/playlist.m3u8',
'image': 'image/bild.jpg',
'title': 'Test'
});

player.on('error', function() {
player.setup({
'hlshtml': 'true',
'playlist': [{
'sources': [{
'file': 'https://57c94ad4a346c.streamlock.net/vod/_definst_/mp4:pexip/b730f36f-4359-43bf-be1b-20d6dec57714_720p.mp4/playlist.m3u8',
'label': '720P'
},{
'file': 'https://57c94ad4a346c.streamlock.net/vod/_definst_/mp4:pexip/b730f36f-4359-43bf-be1b-20d6dec57714_360p.mp4/playlist.m3u8',
'label': '360P'
},{
'file': 'https://57c94ad4a346c.streamlock.net/vod/_definst_/mp4:pexip/b730f36f-4359-43bf-be1b-20d6dec57714_240p.mp4/playlist.m3u8',
'label': '240P'
}],

'image': 'image/bild.jpg',
'title': 'Test'
}]
});
});

Up Down

Anders

User  
0 rated :

I'm guessing that im actually not setting up several qualities but instead setting up several fall backs?
The proper way to do it is ofc by using a smil file. How ever that would require me to manually create the smil for every recording made. And that is not an option.
The workflow right now is.
User initiates a stream to my wowza.
Wowza transcodes the stream and records the different bit rate files.
User get a notification with a link for his unique stream to a page with JW that dynamically builds the player with source information based on the properties supplied by the link. The JW player page also checks if the stream is live or VOD and serves the correct information.

Problem is that Wowza does not on the fly create a smil containing the different bit rates.

So my plan was to let JW solve this by supplying the different qualities as playlist sources.

Problem here is that this only works if the source is a .mp4..... Correct?

And my sources are Path/UniqueID_quality.mp4/playlist.m3u8 and this is the only way to define the source if you are using HLS and HTML5.

Do I have it right?

Any suggestions how to solve this without having to create a manual manifest / smil ?

My only idea now is to create buttons outside the JW player instance that loads a new player instance with only one playlist source of a certain quality depending on the button you press.

Anyways, have a nice weekend.

PS. Sorry for all the posts in this thread, but I thought I'd leave them there in case someone else runs in to the same issues as I have today.

Oh, and Im using JW Premium, not Pro as I stated in the first post :)

Up Down

Alex

JW Player Support Agent  
0 rated :

Hi Andre,

Your third post is probably the most correct way to do what you are trying to do. However, you are correct in your assumption that specifying sources in order to have them listed in the “HD” menu only works with progressive files, such as MP4s. Otherwise, the sources will act as fallbacks, meaning it would try to load your 720p stream first and, if it can’t, it will load your 360p stream and so on.

My best suggestion would be to wrap your three different VOD qualities into a master playlist so that the HLS stream you are embedding would have access to all three qualities and be able to adaptively switch between them as needed. You would then be able to load this new .m3u8 file when the .on(‘error’) event fires, in the case of your live stream being down, by using .load() – you would not need to use .setup() to re-setup the whole player. It should look something like this:

var player = jwplayer("thePlayer");

player.setup({
  file: "https://57c94ad4a346c.streamlock.net/pexip/ngrp:b730f36f-4359-43bf-be1b-20d6dec57714_all/playlist.m3u8",
  image: "image/bild.jpg",
  title: "Test",
  hlshtml: true
});

player.on('error', function() {
  player.load([{
    file: "https://whatever.the.new.master.playlist.URL.is.m3u8",
    image: "image/bild.jpg",
    title: "Test"
  }]);
});

Note that you wouldn’t have to setup hlshtml: true again since that is not considered part of the playlist so .load() would not make a change to that option.

Please let me know if you need any more help or have any other questions.

Thank you!

This question has received the maximum number of answers.