Apple’s HTTP Live Streaming (HLS) in Flash !

Yes, it’s possible. You create hundreds of .ts files holding an h264 video. You then create a m3u8 playlist and it plays on any iPhone, iPad or other iDevice.  Now how can you play this in Firefox, Chrome or IE?  JWPlayer now support HLS (Apple’s HTTP Live Streaming) right from its Flash player… But wait…they’re asking money for this? Yes, it’s only available in the $50 and $300 per month plan… my god.

Luckily, some brave developer named danrossi created a plugin for the free Flowplayer Flash. If you don’t know what Flowplayer is, here’s a short intro: Flowplayer seems to have developed two versions of it’s software: Flowplayer Flash and Flowplayer HTML5. Flowplayer Flash seems somewhat outdated and while they state that they support HLS in their HTML5 version, it’s not working. They probably support it, but only as a fallback on HLS-enabled devices.

So back to danrossi’s HLS plugin. Apparently, one can write plugins for Flowplayer Flash and that’s exactly what he has done. Let’s dive into some code. If you open up his website, you’ll get all you’ll need. I cleaned it up a bit, so you get the bare things you need:

<html>
<head>
  <script src="flowplayer-3.2.11.min.js"></script>
  <script src="flowplayer.playlist-3.0.8.min.js"></script>
</head>
<body>
<!-- player container-->
<div id="player" style="width: 425px; height: 300px;"></div>
<!-- Flowplayer installation and configuration -->
<script type="text/javascript">
    flowplayer("player", "flowplayer.swf", {
        // configure the required plugins
        plugins:  {
            httpstreaming: {
                url: 'flowplayer.httpstreaminghls-3.2.10.swf'
            }
        },
        clip: {
            url: "http://184.72.239.149/vod/smil:bigbuckbunnyiphone.smil/chunklist-b400000.m3u8",
            urlResolvers: "httpstreaming",
            provider: "httpstreaming",
            autoPlay: false
        }
    });
</script>
</body>
</html>

Apparently, he made a plugin for the 3.2.10 version of Flowplayer Flash. You can’t use a newer version with his plugin, I’ve tried it. Luckily, you can still use the skinning features from Flowplayer Flash. The modern light skin, for example, can be achieved like this:

<html>
<head>
  <script src="flowplayer-3.2.11.min.js"></script>
  <script src="flowplayer.playlist-3.0.8.min.js"></script>
</head>
<body>
<!-- player container-->
<div id="player" style="width: 425px; height: 300px;"></div>
<!-- Flowplayer installation and configuration -->
<script type="text/javascript">
    flowplayer("player", "flowplayer.swf", {
        // configure the required plugins
        plugins:  {
            httpstreaming: {
                url: 'flowplayer.httpstreaminghls-3.2.10.swf'
            },
            controls: {
                url: "http://releases.flowplayer.org/swf/flowplayer.controls-3.2.15.swf",

                // customize the appearance make it have a lighter look
                buttonColor: 'rgba(0, 0, 0, 0.9)',
                buttonOverColor: '#000000',
                backgroundColor: '#D7D7D7',
                backgroundGradient: 'medium',
                sliderColor: '#FFFFFF',

                sliderBorder: '1px solid #808080',
                volumeSliderColor: '#FFFFFF',
                volumeBorder: '1px solid #808080',

                timeColor: '#000000',
                durationColor: '#535353'
            }
        },
        clip: {
            url: "http://184.72.239.149/vod/smil:bigbuckbunnyiphone.smil/chunklist-b400000.m3u8",
            urlResolvers: "httpstreaming",
            provider: "httpstreaming",
            autoPlay: false
        }
    });
</script>
</body>
</html>

hls

I packed it all up for you, so you can play around with it and serve it from your own server: download

So go out and spread the word. Make JWPlayer suffer for not open sourcing their HLS version!! 🙂

Advertisements
Posted in apple
33 comments on “Apple’s HTTP Live Streaming (HLS) in Flash !
  1. cnik says:

    I’m running fedora 16 64 bit and could not get your hls boilerplate to work with streams from my server. I always get a error 200 stream not found I went to electroteque website and captured the source tweaked it to work…with that particular version I can get it to stream properly. Here is my file:

    LiveTV

    /* */

    //

    Live Tv Feed

    This is a private place shifting feed. FOR PERSONAL USE ONLY. Please disconnect if not authorized to view.

  2. Sam says:

    Hi,

    This works out of the box with me: http://www.neat.be/blogstuff/flowplayer-hls-boilerplate.zip don’t forget to add the “crossdomain.xml”-file to your root of your website

  3. Sam says:

    You also need to run it on a webserver. Don’t open de index.html-file locally

  4. M.Vogt says:

    It’s working almost perfect! The only thing left: I get 27 seconds of live streaming, then I need to reload the entire page. Is there any way to keep streaming the video endlessly?

  5. Karu says:

    I used the zip file.. I get always get an error 200, Stream not found, Failed to load a resource, clip: ‘[Clip] ‘http://locahost:81/STREAMNAME/1HIGH.M3U8”. how do i get rid of this error?

  6. Dan Rossi says:

    Hi i’m afraid that is old news. The plugin is being taken out of the github and I have to release, sell and support myself for maybe $200 until I add AES support. The underlying project is not updated there either. I have however been releasing it as a library for free as it’s from the open apple-osmf source project but not the source code of my changes as I can’t be a charity on this one and it was a huge refactor so there was of course some bugs to fix.

    You can download a new version of my changes as a demo on the page, you need to use the live version of the plugin to refresh the manifests, I separated that code out.

    or the location for the swc is here

    http://static-electroteque-org.s3.amazonaws.com/download/apple-osmf.zip

  7. Dan Rossi says:

    And I had to block people hotlinking my files, change that code if possible, I’m not a CDN, they are being served from cloudfront and that costs money to serve thanks.

  8. Dan Rossi says:

    The original project is here, it’s an OSMF based library but I had to refactor it quite considerably, and cleaned up for performance reasons. https://code.google.com/p/apple-http-osmf/

  9. lakhan says:

    hello sam,
    i want to play video from website to all iso devices as well an windows .is it possible with this plugin’s

  10. cnik says:

    Someone asked for my tweaked source for fedora 16 64 bit. see below
    also note that this index.html file sits in my html/livetv dir & that the segments and m3u8 file sit in my html/istream dir.

    LiveTV

    /* */

    //

    Live Tv Feed

    This is a private place shifting feed. FOR PERSONAL USE ONLY. Please disconnect if not authorized to view.

  11. Ryan Shin says:

    It works really fine. By the way, is it working for hls live video?

  12. […] Just Hack Me / Apple’s HTTP Live Streaming (HLS) in Flash !(英語) […]

  13. Bill says:

    I recently discovered https://github.com/mangui/HLSprovider, it provides a good HLS Flash implementation, as a jwplayer plugin. worth to try

  14. Ben Menking says:

    The 200 issues isn’t related to crossdomain, that I can see.

    Since I received the 200 error also, I looked at apache’s access_log. Here’s what I see:

    192.168.28.26 – – [10/Sep/2013:13:32:19 -0400] “GET /stream/live.m3u8 HTTP/1.1” 304 – “http://192.168.28.36/flowplayer.html” “Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36”
    192.168.28.26 – – [10/Sep/2013:13:32:19 -0400] “GET /stream/http://192.168.28.36/stream/00000678.ts HTTP/1.1” 404 323 “http://192.168.28.36/flowplayer.html” “Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36”

    If you don’t see the error, look at the 2nd line. The player is appending “/stream/” to the beginning of the location is pulled from the m3u8 file.

    Fix up whatever is producing the m3u8 file to use a _relative_ path instead of an full uri.
    In my case, I had an absolute path when using vlc to convert my video input card to the HLS stream.

  15. Hey, just wanted to let you know that there is one more open source HLS plug in. This is a plug in for OSMF based video players (a.e. StrobeMediaPlayback). Open Source and actively supported by our team.

  16. Andrea says:

    Hi Denis

    Thanks for your HLS Plugin link, it works pretty well with my HLS server !! I use Vodobox Live Server to broadcast a tv stream via Amazon EC2 cloud server towards iphone and android devices. Now I’m ready to reach BB et Windows 8 platforrm via flash plugin.

    If you’re looking for unexpensive HLS Server running from Windows platform : http://www.vodobox.com/index.html?content=home_live_server_en.html

  17. yahoo says:

    If you wish for to improve your know-how only keep visiting this website and be
    updated with the most up-to-date news posted here.

  18. another free HLS plugin compatible with flowplayer : https://github.com/mangui/HLSprovider

  19. […] 靠的是「Apple’s HTTP Live Streaming (HLS) in Flash !」這篇「2014/02/12 的 comment」解的 (不是原文內的方法)。 […]

  20. bababoom says:

    Another interesting free HLS plugin that works with all devices and Web browsers (Android, iOS, Windows, BB, Linux…).
    http://www.vodobox.com/build_player.html

    It’s a polymorphic player based on free plugins.

  21. Matt Laufer says:

    I’ve been using encoding.com to create HLS outputs with great success. There segmenter have gives us more granular control over settings and has improved the quality of our outputs. http://www.encoding.com/http-live-streaming-hls/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s