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>
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!! 🙂
Just Hack Me 
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.
Hi – How did you tweak the source? How did you get it to work? Its not working for me either. thanks
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
You also need to run it on a webserver. Don’t open de index.html-file locally
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?
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?
have a same issue. Maybe we there is the different between VOD and Live streams?
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
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.
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/
hello sam,
i want to play video from website to all iso devices as well an windows .is it possible with this plugin’s
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.
well this is frustrating can’t post the source….go to this link and view the index.html source.
https://docs.google.com/file/d/0B8lyro2mL3LvblN3d0szU3haa3M/edit?usp=sharing
The code you posted on the google doc is giving me the same 200 error (200 as an error?!) with an m3u8 file from a cloudfront cdn (that I am 100% sure is available). Any more news on this? This may be the crossdomain issue which I don’t have a whole lot of experience with.
Sorry for the double. Seems like there’s no way to edit a comment. Anyway, hosting the m3u8 locally, this file is definitely accessible, so I’m almost positive it is the cross-domain issue. Thanks for your information!
Ok, now triple post. This is getting crazy! I was wondering, I am trying to use your scripts to access a webdav, using something like http://:@:/webdav/outgoing/.m3u8 (ex http://foo:bar@mydomain.com:2222/webdav/outgoing/myvideo.m3u8). This method of authentication works fine for flash playback on jwplayer, but using flowplayer this doesn’t seem to be working. Any ideas? Can I provide authentication for the video url? Thanks so much.
gsparx, I have not used authentication on the LiveTv index.html or the access of m3u8 directory. What I have done is to use SSL (.htaccess) on the web page that links to the LiveTv web page.
It works really fine. By the way, is it working for hls live video?
[…] Just Hack Me / Apple’s HTTP Live Streaming (HLS) in Flash !（英語） […]
I recently discovered https://github.com/mangui/HLSprovider, it provides a good HLS Flash implementation, as a jwplayer plugin. worth to try
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.
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.
Missed the link initially 🙂
https://github.com/denivip/osmf-hls-plugin
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
Cool! I’m glad it worked for you. I’ll check vodobox. Thank you for the link.
I am trying to do same thing – stream live stream to HLS capable player.
Unfortunately we are getting stream not available error.
Could you please share html page that loads player and Plugin
Thanks
Hi,
Have a look at this sample page with HLS playback => http://demoplayer.denivip.ru
Thanks,
Denis.
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.
another free HLS plugin compatible with flowplayer : https://github.com/mangui/HLSprovider
free HLS plugin development switched to https://github.com/mangui/flashls
[…] 靠的是「Apple’s HTTP Live Streaming (HLS) in Flash !」這篇「2014/02/12 的 comment」解的 (不是原文內的方法)。 […]
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.
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/