M3U8 live streaming

This thread may refer to an older version of JW Player! Check our articles for the most up-to-date information.
This Q&A thread was imported from our previous system and could apply to an older product.
  • 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

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

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

    Up Down 0 rated
  • What browser are you using? m3u8 only works in iOS and Safari…

     
    Up Down 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?

    Up Down 0 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

     
    Up Down 0 rated
  • Hi Ethan,

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

    Thanks

    Up Down 0 rated
  • It should!

     
    Up Down 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: [ ...]
    }
    }
    ],

    Up Down 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

    Up Down 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?

    Up Down 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.

     
    Up Down 0 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>


    Up Down 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.

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

     
    Up Down 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'
    }
    }
    ]});

    Up Down 0 rated
  • Can you provide a link?

     
    Up Down 0 rated
  • sure http://watchfilm.herokuapp.com/films/new-film

    Up Down 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

    Up Down 0 rated
  • ok heres the best link to look at:

    http://watchfilm.tv/films/test

    Up Down 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’
    }

     
    Up Down 0 rated
  • hey dude thanks, unfortunately that doesnt work as it complains about the : after levels

    Up Down 0 rated
  • Try this:

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

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

    Many thanks!

    Up Down 0 rated
  • Email me – http://www.longtailvideo.com/support/contact-us and reference this forum thread

     
    Up Down 0 rated
  • sent an email thanks!

    Up Down 0 rated
  • np!

     
    Up Down 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

    Up Down 0 rated
  • Np

     
    Up Down 0 rated
  • how can we play m3u8 files in jwplayer

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

     
    Up Down 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.

    Up Down 0 rated
  • Apple replaces the player with the QT player on iOS…

     
    Up Down 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

    Up Down 0 rated
  • http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/m3u8.html

     
    Up Down 0 rated
  • That just downloads a playlist. What do I do with that?

    Up Down 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.

     
    Up Down 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 :(

    Up Down 0 rated
  • M3U8 only works in Safari on Mac (latest version), and iOS!

     
    Up Down 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.

    Up Down 0 rated
  • Oh, thank you for letting me know.

     
    Up Down 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.

    Up Down 0 rated
  • Chrome does not support M3U8

     
    Up Down 0 rated
  • jw player jw player don't support m3u8, its use html5 video tag suppor in ios and safary

    Up Down 0 rated
  • Our player supports M3U8 just fine.

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

     
    Up Down 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

    Up Down 0 rated
  • No, this only works in Safari on Mac (latest version) or iOS.

     
    Up Down 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

    Up Down 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.

     
    Up Down 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.

    Up Down 0 rated
  • M3U8 streams only work in iOS or Android 2.3+…

     
    Up Down 0 rated
  • Android 2.3.5 HTC Sense 3.0
    Do not work at all, just hanges up.

    Up Down 0 rated
  • Example link?

     
    Up Down 0 rated
  • This thread is hilarious. Where do M3U8 streams work again Ethan? :)

    Up Down 0 rated
  • Yep, so hilarious…

     
    Up Down 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>

    Up Down 0 rated
  • ‘height’: ‘360’

    Needs to be:

    ‘height’: ‘360’,

     
    Up Down 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

    ??

    Up Down 0 rated
  • Where is your page?

     
    Up Down 0 rated
  • Hello,

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

    Up Down 0 rated
  • Sorry, who are you asking this to?

     
    Up Down 0 rated
  • how can i make it autostart in iphone ?

    Up Down 0 rated
  • You can’t.

     
    Up Down 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

    Up Down 0 rated
  • Apple doesn’t support autostart on their devices in HTML5 natively. That’s why.

     
    Up Down 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>

    Up Down 0 rated
  • Where is this running?

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

    Up Down 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?

    Up Down 0 rated
  • The test i made was in
    www.miamitvchannel.com/hls2.html
    Flash works but HLS doesnt

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

     
    Up Down 0 rated

This QA is closed.

Still don't have JW Player? Get It Here