Cloud Files - Streaming Simple Flash Files
Note: We've had some reports of problems getting the current version of FlowPlayer (3.2.14) working with Cloud Files and are investigating. We'll update this article when we have more information.
Contents |
Overview
In this tutorial we will cover how to stream media files from Cloud Files to a Web Site. This tutorial assumes you have a Video file uploaded to Cloud Files and the container it is in is public. We will be using FlowPlayer; it is an open source Flash Video Player registered under the GPL.
What we need
- FlowPlayer found at http://flowplayer.org.
- A .flv video.
- A text editor.
FlowPlayer
- Head to the FlowPlayer website.
- Download the Free Version of FlowPlayer
- Save the File to your Desktop
- Unpack the Zip File to your Desktop
The Files we need are as follows. (this was written using FlowPlayer 3.1.3)
- flowplayer-(version).swf
- flowplayer-(version).min.js
- flowplayer.controls-(version).swf
Go Ahead and upload these to Cloud Files using the control panel.
The Cross Domain XML file
The Cross domain XML file allows you to specify what domains are allowed to Grab Data from the CDN. This is so people cannot hotlink your content unless you let them. Here is an example of a simple cross domain XML file that allows ALL domains to call these flash files
<?xml version="1.0"?> <!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd"> <cross-domain-policy> <site-control permitted-cross-domain-policies="master-only"/> <allow-access-from domain="*"/> <allow-http-request-headers-from domain="*" headers="SOAPAction"/> </cross-domain-policy>
For more info on Cross domain XML files take a look at Adobe's Website
Go ahead and save this file in your text editor as crossdomain.xml and upload it to the same Cloud Files Container.
The xhtml
Now we will make a simple xhtml file that will call this flash player and embeds it onto the page here is the code.
<html>
<head>
<script type="text/javascript" src="http://c022320192.cdn.cloudfiles.rackspacecloud.com/flowplayer-3.1.3.min.js"></script>
</head>
<body>
<a
href="http://c022320192.cdn.cloudfiles.rackspacecloud.com/video.flv"
style="display:block;width:520px;height:330px"
id="player">
</a>
<script>
flowplayer("player","http://c022320192.cdn.cloudfiles.rackspacecloud.com/flowplayer-3.1.3.swf");
</script>
</body>
</html>
- On line 3 please replace http://c022320192.cdn.cloudfiles.rackspacecloud.com/flowplayer-3.1.3.min.js with your version of this file.
- On line 7 please replace http://c022320192.cdn.cloudfiles.rackspacecloud.com/video.flv to the location of your video file.
- Finally on line 12 replace http://c022320192.cdn.cloudfiles.rackspacecloud.com/flowplayer-3.1.3.swf with your version of this file.
- Go grab a party hat its time to celebrate we are almost done =)
Let's test it out
Go ahead and save this xhtml file and run it from your local machine. If all is well you should see the flash video load up quickly and stream away. If not double check your code. If you are still having problems after that give our support a call or submit a ticket via the Cloud Control Panel. We would love to help!
© 2011-2013 Rackspace US, Inc.
Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License
See license specifics and DISCLAIMER
3 Comments
Space Missing in Line 2 of "The Cross Domain XML file"
RE: Space Missing in Line 2 of "The Cross Domain XML file"
How to add splash images
Add new comment