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

Embedding JW Player and using with FMS 4.5 livestreaming


Hey guys, has anyone tried using the newly released FMS 4.5 with livestreaming via html5 fallback yet? Adobe is slow to release documentation (or very confusing info) on how to do it. A few months ago I ran across a blog post that discusses this using Wowza, and was hoping I could adapt that sample code to use with FMS 4.5.

Here is the sample code:
bc.. <h2>RTMP + iOS Streaming</h2>

<div id="player">You need Flash or iOS to play this stream</div>

<script type="text/javascript">
jwplayer("player").setup({
height: 360,
image: 'file.jpg',
players: [{
config: {
file:'myStream',
streamer:'rtmp://server/live'
},
type: 'flash',
src: 'player.swf'
},{
config: {
file: 'http://server:1935/live/myStream/playlist.m3u8'
},
type: 'html5'
}],
plugins: {
'livestream.js': {}
},
width: 640
});
</script>


This worked at the time in my testing..now that FMS 4.5 has come out I'm trying to adapt it to work and so far its mixed results. The flash portion doesnt work at all, IOS loads the video and plays but the experience is quite poor (which could be due to using a virtual test server with low hardware). Here is what I have changed this code too which supposedly is what adobe is saying in the docs needs to be in order to work via psuedo html live streaming..

bc.. <script type="text/javascript">

jwplayer("player").setup({

height: 360,

image: 'server.jpg',

players: [{

config: {

file:'livestream.f4m',

streamer:'http://server/hds-live/livepkgr/_definst_/liveevent/'

},

type: 'flash',

src: 'player.swf'

},{

config: {

file: 'http://server/hls-live/livepkgr/_definst_/liveevent/livestream.m3u8'

},

type: 'html5'

}],

plugins: {

'livestream.js': {}

},

width: 640

});

</script>



13 Community Answers

Ethan Feldman

JW Player Support Agent  
0 rated :

http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/18530/embedding-an-rtmp-stream-with-an-html5-fallback is how to do it.

Regarding the issues, do you have a link?

JW Player

User  
1 rated :

Hey Ethan, yes you can see it on this test page:

http://live.media.niu.edu/test/ios.html

I was looking at that page a while back..that will work when using standard rtmp, but now Adobe FMS 4.5 wants http live psuedo streaming. So its possible that the call to the 'streamer' or 'provider' option needs to become a standard http link? That didn't work at any rate.

I have been using these docs from adobe:

http://help.adobe.com/en_US/flashmediaserver/devguide/WS5b3ccc516d4fbf351e63e3d11a0773cfae-8000Dev.html

JW Player

User  
0 rated :

Interested in this solution as welll

Ethan Feldman

JW Player Support Agent  
0 rated :

You can’t do file / streamer if using HTTP.

file:‘livestream.m4v’,
streamer:‘http://131.156.24.73/hds-live/livepkgr/definst/liveevent/’

Will not work.

Streamer only applies to RTMP…

JW Player

User  
0 rated :

Okay, so it should be file: 'http://url as listed above' and remove the streamer portion?

Ethan Feldman

JW Player Support Agent  
0 rated :

Yes, remove the streamer option.

JeroenW

JW Player Support Agent  
0 rated :

The current setup will not work at all, since you are trying to load an HTTP Dynamic Streaming (HDS) manifest into JW Player. JW Player does not support this format. It only supports RTMP and HTTP Live Streaming (HLS). Both are supported by FMS 4.5 as well.

Your initial setup at the top of this thread seems correct – assuming the URLs are indeed valid. I was able to get an FMS instance running and use these options to smoothly stream to both Flash and iOS. I think the resources are indeed an issue, since FMS is very hungry for those.

JW Player

User  
0 rated :

hi, i want to ask, how's the config for Flash Media live encoder for http streaming to iOS and load with this script ?

JeroenW

JW Player Support Agent  
0 rated :

The most important setting is that you use H264 video (not VP6) and AAC audio (not MP3). All the other settings should not impact iOS streaming.

JW Player

User  
0 rated :

That was *not* easy.

Working off okorioth's code and the suggestions that followed, I finally got this to work:

bc.. <div id="player"></div>

<script type="text/javascript">
jwplayer("player").setup({
width: 640,
height: 480,
image: 'preview.jpg',
players: [{
config: {
'provider': 'rtmp',
'streamer': 'rtmp://server/livepkgr/',
'file': 'livestream',
},
type: 'flash',
src: 'player.swf'
},{
config: {
file: 'http://server/hls-live/livepkgr/_definst_/liveevent/livestream.m3u8'
},
type: 'html5'
}],
plugins: {
'livestream.js': {}
},
width: 640
});
</script>




Up next is turning it all into a multi-bitrate stream.

In the _olden days_ of FMS 3.5, I had a block of code like this:

bc.. <object id="videoPlayer" width="512" height="400" name="videoPlayer" data="http://server/player.swf" type="application/x-shockwave-flash">
<param name="src" value="http://server/player.swf" />
<param name="play" value="true" />
<param name="menu" value="true" />
<param name="quality" value="best" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value="file=http://server/playlist.xml&streamer=rtmp://server/channel&autostart=true" />
</object>



And my playlist looked like this:

bc.. <rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/"
xmlns:jwplayer="http://developer.longtailvideo.com/">
<channel>
<title>Playlist with RTMP Dynamic Streaming</title>

<item>
<title>title</title>
<description></description>
<media:group>
<media:content bitrate="1400" url="channel1" width="640" />
<media:content bitrate="800" url="channel2" width="640" />
<media:content bitrate="300" url="channel3" width="640" />
</media:group>
<jwplayer:streamer>rtmp://server/channel1/</jwplayer:streamer>
</item>

</channel>
</rss>



I can get RTMP to work with the following minor tweaks:

bc.. <div id="player"></div>

<script type="text/javascript">
jwplayer("player").setup({
width: 640,
height: 480,
image: 'preview.jpg',
players: [{
config: {
'provider': 'rtmp',
'streamer': 'rtmp://server/livepkgr/',
'playlistfile': 'playlist.xml',
},
type: 'flash',
src: 'player.swf'
},{
config: {
file: 'http://server/hls-live/livepkgr/_definst_/liveevent/livestream.m3u8'
},
type: 'html5'
}],
plugins: {
'livestream.js': {}
},
width: 640
});
</script>



Note that "file" has become "playlistfile" (Sneaky! That got me!)

And my playlist remains unchanged (except that in the example below, the filename is now "livestream" instead of "channel")

bc.. <rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/"
xmlns:jwplayer="http://developer.longtailvideo.com/">
<channel>
<title>Playlist with RTMP Dynamic Streaming</title>

<item>
<title>title</title>
<description></description>
<media:group>
<media:content bitrate="1400" url="livestream1" width="640" />
<media:content bitrate="800" url="livestream2" width="640" />
<media:content bitrate="300" url="livestream3" width="640" />
</media:group>
<jwplayer:streamer>rtmp://server/livepkgr/</jwplayer:streamer>
</item>

</channel>
</rss>



*Question: How do I adapt this for HLS? I am at a loss.* Am I supposed to create an m3u8 file, and where do I put it, and how do I call it?

Thanks!

P.S. For the curious (and because it took me a long time to learn this myself), I use Flash Media Live Encoder for my encoding and I do multi-bitrate streaming as follows. In FMLE, you'll see that each one of the Bit Rate settings on the lower left is represented by a number (1, 2 or 3). These will be reflected with a variable, %i. Check each of these boxes and set them to your desired bit rates (now *that* you'll find plenty of opinions about on the internets).

On the right, you'll have to change your stream name. In my old FMS 3.5 days, my single bit rate stream name was "channel". But now I'm adding my variable to it. So it's called "channel%i". Using the playlist, JWPlayer will determine the best bit rate for your connection and so "channel%i" becomes "channel1", or "channel2" or "channel3" to correspond to the bit rates you defined in FMLE.

In FMS 4.5, it gets a touch messier. You still check your boxes and define your bit rates. The messy part is the stream name. It's already a jumble of characters because you want to do HLS. So you may have a stream name like "livestream?adbe-live-event=liveevent". Truth is, "livestream" can be "channel" or anything else. That's a single bit rate stream. But we still have our %i. Where does that go? Well, if you add your %i, it looks like this: livestream%i?adbe-live-event=liveevent. Everything after the question mark is necessary for HLS but is disregarded by RTMP. So the %i goes where it always goes, right after your stream name.

I hope that helps those of you still a little confused by this.

JeroenW

JW Player Support Agent  
0 rated :

For HLS, you indeed have to create a variant playlist and host it somewhere. Here’s an example:

playertest.longtailvideo.com/adaptive/oceans/oceans.m3u8

Thanks for all the grunt work. It’s indeed quite confusing at present, with the different streaming formats and rendering modes types involved. Hopefully, we’ll be able to make this a lot easier soon.

JW Player

User  
0 rated :

Success!

My HTML/JavaScript looks like this:

bc.. <div id="player"></div>

<script type="text/javascript">
jwplayer("player").setup({
width: 640,
height: 480,
image: 'preview.jpg',
players: [{
config: {
'provider': 'rtmp',
'streamer': 'rtmp://server/livepkgr/',
'playlistfile': 'playlist.xml',
},
type: 'flash',
src: 'player.swf'
},{
config: {
file: 'playlist.m3u8'
},
type: 'html5'
}],
plugins: {
'livestream.js': {}
},
width: 640
});
</script>



My HLS playlist file (playlist.m3u8) looks like this:

bc.. #EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=1400000
http://server/hls-live/livepkgr/_definst_/liveevent/livestream1.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=800000
http://server/hls-live/livepkgr/_definst_/liveevent/livestream2.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=300000
http://server/hls-live/livepkgr/_definst_/liveevent/livestream3.m3u8



The stream name remains "livestream" with the variable (%i) defined in your FMLE immediately afterward.

Thanks Jeroen and the entire Longtailvideo team!

JeroenW

JW Player Support Agent  
0 rated :

Cool!

This question has received the maximum number of answers.