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

M3U8 live streaming


Hello,

From the blog I see that .m3u8 files are now supported in v5.4. Is there any documentation or examples on how to set up the embed code? I am using the JW embedder and have tried levels and embedding as a lone file but have had no luck.

Many thanks

70 Community Answers

Ethan Feldman

JW Player Support Agent  
0 rated :

Right here – http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/m3u8.html

JW Player

User  
2 rated :

the above demo is not working. when I click to play, browser download the playlist file.
I don't understand why.

Ethan Feldman

JW Player Support Agent  
2 rated :

What browser are you using? m3u8 only works in iOS and Safari…

JW Player

User  
-1 rated :

Here are the streams:

FLASH:
rtmp://174.122.255.218/Grace1
The filename is "livestream" and the streamer is rtmp://174.122.255.218/Grace1

HTML5:
http://174.255.218:1935/Grace1/livestream2.sdp/playlist.m3u8

Can you show me How to setup a jwplayer fallback to HTML5 on iOS device and Flash for other system?

Ethan Feldman

JW Player Support Agent  
3 rated :

You can do this with the modes feature of the player.

http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/18508/jw-embedder-modes

Here is an example of an RTMP Stream with a Fallback to HTML5, just like you are trying to do – http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/18530/embedding-an-rtmp-stream-with-an-html5-fallback

JW Player

User  
0 rated :

Hi Ethan,

Does the "RTMP Stream with a Fallback to HTML5" work with playlists?

Thanks

Ethan Feldman

JW Player Support Agent  
-2 rated :

It should!

JW Player

User  
0 rated :

Awesome! Is there any sample code on how to mix the two together?

where would I put the playlist: [ ...] code?

would it look something like this?

modes: [
{type: 'flash', src: 'videoPlayer/player.swf',
config: {
playlist: [ ...]
}
},
{
type: 'html5',
config: {
playlist: [ ...]
}
}
],

JW Player

User  
0 rated :

WOW I was just going to open a thread about this as well....

I just tried what you posted ( Jason ) in the following and in fact it does work like this :-)



'modes': [
{type: 'flash', src: 'player.swf',
config: {
'playlist': [
{
'title': 'Live Dynamic Stream',
'provder': 'rtmp',
'image': '/thumbs/sintel.jpg',
'streamer': 'rtmp://XXX.XXX.XXX.XXX:1999/FDlive',
'levels': [
{ bitrate:"2000", width:"1280", file:"live3", title:'Live Dynamic Stream 2Mbs x 720P', image:'images/live1280.jpg' },
{ bitrate:"950", width:"720", file:"live2", title:'Live Dynamic Stream 1000Kbs x 960', image:'images/live720.jpg' },
{ bitrate:"350", width:"640", file:"live1", title:'Live Dynamic Stream 450Kbs x 640', image:'images/live640.jpg' },
]
}
]
} },
{
type: 'html5',
config: {
'file': 'http://xxx.xxx.xxx.xxx:1999/FDlive/smil:FDlive.smil/playlist.m3u8',
'provider': 'video',
'x-webkit-airplay': 'allow'
}
}
],

--------------


Thanks

-D

JW Player

User  
0 rated :

I noticed you only used the playlist: [ ...] part in the flash mode. Does the html5 mode currently support the jwplayer javascript playlist feature?

I'm referring to the clickable list adjacent to the player to switch which video is playing.

I could be wrong, but I thought I remembered that a while back that this was not supported. Is it now supported?

Ethan Feldman

JW Player Support Agent  
0 rated :

@Jason – We support JSON playlist, not XML playlists, for HTML5 mode.

Sorry, I don’t have any sample code on how to mix the two together.

JW Player

User  
1 rated :

Hello Dunghm, this is the answer to the post you posted on Posted: Tue, 2011-04-26 06:51

bc.. <html>

<head>

<script type="text/JavaScript">

function RenderJW(PlayerContainer) {

jwplayer(PlayerContainer).setup({
flashplayer: "http://yourwebsite/JWplayer/player.swf",
controlbar: "bottom",
height: 380,
width: 500,
skin: "JWplayer/skin/metarby10.swf",
}).onReady(function() {

if (this.container.tagName.toLowerCase() == "object") {
// Flash case
this.load({
file: "livestream.mp4",
streamer: "rtmp://174.122.255.218/Grace1",
provider: "rtmp"
});

} else {
// HTML5 case
this.load({
file: "http://174.255.218:1935/Grace1/livestream2.sdp/playlist.m3u8,
provider: "http",
});
}
});
}

</script>

</head>

<body>

<div id="VideoFrame">Loading the player ...</div>

<script type="text/javascript">RenderJW("VideoFrame");</script>

</body>


JW Player

User  
0 rated :

Developer_from_India : Nice but this not working in IE 6-7-8 but work in IE 9.
Can you fix this please ?
Thank you.

Ethan Feldman

JW Player Support Agent  
0 rated :

@Stav – m3u8 streaming only works in HTML5 mode, which older versions of IE do not support.

JW Player

User  
0 rated :

Hi, I was wondering if anyone could shed any light on why the following isn't working. Basically I have a flash with 2 different definitions (HD and normal mp4) and I wanted a html5 fallback of m3u8 for Iphone IOS. The mp4 flash is working absolutely fine, however the m3u8 fallback just simply doesn't work.

Everything is being served from amazon cloudfront. I have removed the cfx/st as I thought that may be the issue, and I have also tried pointing directly to the s3 file but that didn't work either. This is HAML markup so if you see #{} the contents inside that are a variable!

I am pretty sure I am doing something foolish, any help would be much appreciated

bc.. jwplayer("#{vid.video_type}_videocontainer").setup({

skin: "/skins/modieus/modieus.zip",
'streamer': "rtmp://s1v0o69tv7tcjm.cloudfront.net/cfx/st/",
'provider': 'rtmp',
'controlbar': 'over',
'image': "#{h264_hi_encoding.screenshots.first}",
'autoBuffering': 'false',
height: 347,
width: 620,

'streamer': "rtmp://s1v0o69tv7tcjm.cloudfront.net/cfx/st/",
'provider': 'rtmp',
'levels': [
{ file: "#{h264_hi_encoding.path}.mp4"},
{ file: "#{h264_encoding.path}.mp4"}
],
'plugins': {
'hd-1': {
'file': "#{h264_hi_encoding.path}.mp4"
}
},
'modes': [
{type: 'flash', src: '/player.swf'},
{
type: 'html5',
config: {
'file': "http://xxxxxxxxx.cloudfront.net/#{iphone_adaptive_encoding.path}.m3u8",
'provider': 'video'
}
}
]});

Ethan Feldman

JW Player Support Agent  
0 rated :

Can you provide a link?

JW Player

User  
0 rated :

sure http://watchfilm.herokuapp.com/films/new-film

JW Player

User  
0 rated :

im actually in the process of moving the video bucket to the EU, this will be done in the next hour so until then the actual cloudfront url may be broken

JW Player

User  
-1 rated :

ok heres the best link to look at:

http://watchfilm.tv/films/test

Ethan Feldman

JW Player Support Agent  
0 rated :

Change:

type: ‘html5’,
config: {
‘file’: “http://watchfilm.s3.amazonaws.com/d9c6dec772040a2ce7f152f7b24badf3.m3u8”,
‘provider’: ‘http’
}

To:

type: ‘html5’,
config: {
levels: [
‘file’: “http://watchfilm.s3.amazonaws.com/d9c6dec772040a2ce7f152f7b24badf3.m3u8”
],
‘provider’: ‘video’
}

JW Player

User  
0 rated :

hey dude thanks, unfortunately that doesnt work as it complains about the : after levels

Ethan Feldman

JW Player Support Agent  
0 rated :

Try this:

type: ’html5’{
config: {
levels: [
‘file’: “http://watchfilm.s3.amazonaws.com/d9c6dec772040a2ce7f152f7b24badf3.m3u8”,
‘provider’: ‘video’
]
}
}

JW Player

User  
0 rated :

Hi Ethan, still no joy :-S could you look here: http://watchfilm.tv/films/test

Many thanks!

Ethan Feldman

JW Player Support Agent  
0 rated :

Email me – http://www.longtailvideo.com/support/contact-us and reference this forum thread

JW Player

User  
0 rated :

sent an email thanks!

Ethan Feldman

JW Player Support Agent  
0 rated :

np!

JW Player

User  
0 rated :

Awesome, this is now all working, for everyone to see a working example of this go to http://watchfilm.tv/films/test

Just to advise, I could never get this working with the modieus skin so switched skins and hey presto it worked :)

Thanks for your help Ethan

Ethan Feldman

JW Player Support Agent  
0 rated :

Np

JW Player

User  
0 rated :

how can we play m3u8 files in jwplayer

Ethan Feldman

JW Player Support Agent  
0 rated :

Here is a demo – http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/m3u8.html

JW Player

User  
0 rated :

Just to clarify - this isn't actually doing HLS within JW, it's replacing the player with a quicktime embed, and quicktime does the HLS (getting the m3u8, assembling ts segments etc). Bit of a shame because I'm looking to do HLS natively in flash.

Ethan Feldman

JW Player Support Agent  
0 rated :

Apple replaces the player with the QT player on iOS…

JW Player

User  
0 rated :

I am new to the video streaming and I have a camera that is on the internal network that I would like to stream through a player. Can you provide me with a template script that I could implement this address into http://10.10.200.153/httplive/stream.m3u8

You can email me if you like. bpriddy@bryantschools.org

Ethan Feldman

JW Player Support Agent  
0 rated :

http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/m3u8.html

JW Player

User  
0 rated :

That just downloads a playlist. What do I do with that?

Ethan Feldman

JW Player Support Agent  
0 rated :

M3U8 only works with new versions of Safari + iOS. Please view the link on one of those and press play, it will work.

JW Player

User  
0 rated :

I just tried the example page on FF, Chrome, and Safari latest revisions...none played. Safari was the closest with the timeline moving along but a black screen :(

Ethan Feldman

JW Player Support Agent  
0 rated :

M3U8 only works in Safari on Mac (latest version), and iOS!

JW Player

User  
0 rated :

@Ethan

It now works with ice cream sandwich ..tested on nexus s ..works (both vOD and live m3u8)
Also work on galaxy s 2 gingerbread for VOD still not able to work live m3u8 with gingerbread.

Ethan Feldman

JW Player Support Agent  
0 rated :

Oh, thank you for letting me know.

JW Player

User  
0 rated :

I would like to know its not really true..

As you can see, on this website :

http://www.livestation.com/euronews/fr

Its m3u8 and ... i use google Chrome.

Ethan Feldman

JW Player Support Agent  
0 rated :

Chrome does not support M3U8

JW Player

User  
0 rated :

jw player jw player don't support m3u8, its use html5 video tag suppor in ios and safary

Ethan Feldman

JW Player Support Agent  
0 rated :

Our player supports M3U8 just fine.

http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/m3u8.html

JW Player

User  
0 rated :

hi ethan,
i'm sorry to tell that the link you just posted doesn't work in safary too. I can't test in ios...
I'm testing in safary on windows, shuld it works?

thanks a lot

Ethan Feldman

JW Player Support Agent  
0 rated :

No, this only works in Safari on Mac (latest version) or iOS.

JW Player

User  
0 rated :

ok, thanks.
so, if i want create real streaming service that works on every platforms, i cant. Or i could with a mix of flash and and http streaming of apple. Correct?

If i want just guarantee multiplatform and "drm" (or at last dont allow easy download with right click on video), what you suggest?

thanks again

Ethan Feldman

JW Player Support Agent  
0 rated :

Np.

You would probably have to include your own JS based detection inside of the jwplayer setup if you want to target on a per device basis.

JW Player

User  
0 rated :

Hi Ethan,

i read all the thread but i could not find any solution to include this kind of stream in a web page readable with firefox, chrome or IE9 :
http://s99.webport.tv:1935/live/z010105.stream/playlist.m3u8

is there a solution ?

thx for answer..

Swan.

Ethan Feldman

JW Player Support Agent  
-1 rated :

M3U8 streams only work in iOS or Android 2.3+…

JW Player

User  
0 rated :

Android 2.3.5 HTC Sense 3.0
Do not work at all, just hanges up.

Ethan Feldman

JW Player Support Agent  
0 rated :

Example link?

JW Player

User  
0 rated :

This thread is hilarious. Where do M3U8 streams work again Ethan? :)

Ethan Feldman

JW Player Support Agent  
0 rated :

Yep, so hilarious…

JW Player

User  
0 rated :

Okay, this is driving me crazy. I cannot get the flash player of the html5 fallback to show. All I get is the This text will be replaced message. Any thoughts?



<script type='text/javascript' src='wp-content/uploads/jw-player-plugin-for-wordpress/player/jwplayer.js'></script>

<div id='mediaspace'>This text will be replaced</div>

<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': '/wp-content/uploads/jw-player-plugin-for-wordpress/player/player.swf',
'file': 'livestream',
'image': 'http://www.sccmiami.org/wp-content/uploads/2012/03/90-years-scc.jpg',
'bufferlength': '2',
'streamer': 'rtmp://fl2.viastreaming.net:1935/x',
'controlbar': 'over',
'autostart': 'true',
'stretching': 'exactfit',
'width': '640',
'height': '360'

'modes': [
{type: 'flash', src: '/wp-content/uploads/jw-player-plugin-for-wordpress/player/player.swf'},
{
type: 'html5',
config: {
levels: [
'file': "http://fl2.viastreaming.net:1935/x/x/playlist.m3u8"],
'provider': 'video'
}
}
]
});
</script>

Ethan Feldman

JW Player Support Agent  
0 rated :

‘height’: ‘360’

Needs to be:

‘height’: ‘360’,

JW Player

User  
0 rated :

http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/m3u8.html


this example works live for me but as soon as i embed same code in my page it does not ?

i changed all the js file links and used original m3u8 file also tested with own hosted mu3u8 file

??

Ethan Feldman

JW Player Support Agent  
0 rated :

Where is your page?

JW Player

User  
0 rated :

Hello,

Im sorry, how did you get livestream2.sdp and playlist.m3u8??

Ethan Feldman

JW Player Support Agent  
0 rated :

Sorry, who are you asking this to?

JW Player

User  
0 rated :

how can i make it autostart in iphone ?

Ethan Feldman

JW Player Support Agent  
0 rated :

You can’t.

JW Player

User  
0 rated :

if m using autostart and reloding it my browser then video plays automatically why its not working in iPhone ?
can you please tell me the reason or the way how can i do that.

Thanks in advance

Ethan Feldman

JW Player Support Agent  
0 rated :

Apple doesn’t support autostart on their devices in HTML5 natively. That’s why.

JW Player

User  
0 rated :

Hello i am trying to have a flash rtmp stream fall back to .m3u8
Following the details above..
But i am getting no luck...

Here is my code.

<html>
<head>


<script type='text/javascript' src='/jwplayer/jwplayer.js'></script>

<div id='mediaspace'>This text will be replaced</div>

<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': '/jwplayer/player.swf',
'file': 'livestream',
'image': 'http://www.miamitvchannel.com/images/miamitvlogo.png',
'bufferlength': '2',
'streamer': 'rtmp://74.208.98.169/live/miamitvhd',
'controlbar': 'over',
'autostart': 'true',
'stretching': 'exactfit',
'width': '640',
'height': '360',

'modes': [
{type: 'flash', src: '/jwplayer/player.swf'},
{
type: 'html5',
config: {
levels: [
'file': "http://74.208.230.172:90/iphoneplayback/channel1/media0.m3u8"],
'provider': 'video'
}
}
]
});
</script>

Ethan Feldman

JW Player Support Agent  
-1 rated :

Where is this running?

JW Player

User  
0 rated :

On a Server? if thats what you mean.
but its using a Transcoder to stream with the IIS hls

JW Player

User  
0 rated :

i have the flash in one screen and HLS working with android box or setup box, But it would be much easier to have one screen for everything like fallback from Flash to HLS.

I also havent been able to get the link above to play .m3u8 in an apple. Any other player available for .m3u8 ? iphone, ipads?

JW Player

User  
0 rated :

The test i made was in
www.miamitvchannel.com/hls2.html
Flash works but HLS doesnt

Ethan Feldman

JW Player Support Agent  
0 rated :

You should update from 5.7 to 5.10 – http://www.longtailvideo.com/players/jw-flv-player/

This question has received the maximum number of answers.