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 