Embedding live streams with Flowplayer
Previously, we discussed embedding flash videos into a webpage for on-demand content here – http://blog.mydeo.com/2009/04/24/flowplayer-quick-start-guide/. While this article covers both RTMP streaming and HTTP delivery methods it does not include instruction for how to get live flash streams to work with flowplayer.
The basics for this remain the same:
- Download Flowplayer from http://flowplayer.org/download/index.html
- Download the RTMP plug-in for flowplayer from http://flowplayer.org/plugins/streaming/rtmp.html
- Unzip everything and place them all in the same folder
- You should have three .swf files in this folder and a folder called ‘example’
- Create an HTML file with your HTML editor and place it in the ‘example’ folder
Please note that the .js and .swf files referenced in the code below could be a different version to the ones you’ve just downloaded in the Flowplayer pack. Make sure you reference the correct versions of these files in your code.
Flowplayer now needs to be told that the video is a live stream and for viewing stream from the limelight FMS the stream needs to be subscribed to. The code below explains how to do this:
<html>
<head>
<script src="flowplayer-3.1.0.min.js"></script>
</head>
<body>
<div>
<a style="display: block;height:400px;width:600px;background-color: #ffffff;border: solid 1px #ccc;" id="rtmp_player"></a>
<!-- Note: the property of the above tag (rtmp_player) must match the first parameter of the script below -->
<script>
$f("rtmp_player", "flowplayer-3.2.5.swf", {
clip: {
url : 'stream1', //this is the name of the stream assset in the encoder
live : true, // tell flowplayer it's live
provider: 'rtmp'
},
plugins: {
rtmp: {
url: 'flowplayer.rtmp-3.2.3.swf',
netConnectionUrl: 'rtmp://xyz.fc.llnwd.net/xyz' , //this is the rest of the URL excluding the stream name that you set in the encoder
subscribe:true //subscribe to the stream
}
}
});
</script>
</div>
</body>
</html>
With all that in place you should have no problem viewing your live flash streams in Flowplayer.
As usual, if you have any questions or problems, please feel free to contact us on m3@mydeo.com and we will do our best to help you.
I followed the steps above to connect to akamai, but I’m getting an error in WireShark the following:
FCSubscribe()
onStatus(‘NetConnection.Call.Failed’)
How can I resolve this?
Hello dezerv,
As we are a Limelight customer, we don’t have any experience using the Akamai network so are unable to provide support. You can find more information about their streaming services here and also details about contacting their support team.
Hope this helps
Can you please explain this in a way I can understand? Stream asset in the encoder is not as clear as you might think for someone who’s new with streaming… Your help would be greatly appreciated
The Stream Asset is the name you give to your stream within your encoder.
Thanks
Hi I have configured the player as it flow as you indicate me but keeps loading and does not show the video, I tested my streaming with other reproductive and if it worked.
I urgently need to use this player
Hi Richard,
Please make sure that the .js and .swf files in your code match the ones you’ve downloaded from Flowplayer. This blog could reference different versions of the files so you’ll need to amend your code accordingly.
Hope this helps,
Greetings I have the latest version by applying it to the code
flowplayer-3.2.11.min.js
flowplayer-3.2.15.swf
flowplayer.rtmp-3.2.11.swf
And it is not played loading