Feeds:
Posts
Comments

Posts Tagged ‘flowplayer’

Flowplayer Quick start guide

We have put together a quick start guide for those of you who would like to embed a flash video into your webpage. This example uses a flash player called Flowplayer, which if free to use. Please visit http://flowplayer.org for more information about the player and further examples on how to customise the player. The commercial version of the player will allow you to remove the Flowplayer logo and replace it with your own. If you would like to embed windows media player, please see http://blog.mydeo.com/2009/01/27/embedding-windows-media-player-into-web-pages

 In this first example we will describe how to embed flowplayer into a page and play ‘progressive download’ (HTTP) content. See http://blog.mydeo.com/2009/01/12/streaming-vs-progressive-download-understanding-the-difference/ to find out more about ‘progressive download’ and ‘streaming':

  • Download Flowplayer from http://flowplayer.org/download/index.html
  • Unzip everything and place them all in the same folder
  • You should have two .swf files in this folder now and a subfolder called ‘example’
  • Create an HTML file with your HTML editor and place it in the ‘example’ folder
  • Copy and paste the following code into the <head> tag in your HTML
<script type="text/javascript" src="flowplayer-3.1.0.min.js"></script>
  • Next, copy the following code into the <body> section of your HTML
<a
         href="YOUR URL GOES HERE"
         style="display:block;width:425px;height:300px;"
         id="player">
</a>
 
<!-- this script block will install Flowplayer inside previous A tag -->
<script language="JavaScript">
                flowplayer("player", "../flowplayer-3.1.0.swf");
</script>
 

Your video should now be playing when you open that HTML file.

This next example will show you how to embed the player and play a ‘streaming’ (RTMP) file.

  • 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
  • Copy and paste the following code into the <head> tag in your HTML
<script type="text/javascript" src="flowplayer-3.1.0.min.js"></script>
 
  • Next, copy the following code into the <body> section of your HTML
<div class="player_sample">

                  <a                          
                         style="display: block;height:400px;width:600px;background-color: #ffffff;border: solid 1px #ccc;" 
                         id="rtmp_player">
         </a>
         <!-- Note: the id="" property of the above tag (rtmp_player) must match the first parameter of the script below -->

           <script>
                $f("rtmp_player", "../flowplayer-3.1.0.swf", {
 
                   clip: { 
                       url: 'YOUR URL HERE - This is the end part of the URL that m3 give you, without the flv extention', 
                       provider: 'rtmp',
                       autoPlay: false
                        },
    
            plugins: {
                  rtmp: { 
                  url: '../flowplayer.rtmp-3.1.0.swf', 
                  netConnectionUrl: 'rtmp://fs.cdn.mydeo.net/a584/d1/u/m3/'  // This is the first part of the URL m3 gives you
                      }
                 }    
              });
                              
              </script>

             </div>
 
  • Now you need to change the URL to match the URL that m3 gives you for your flash video.

This should be all you need to get started with flowplayer. The player is completely customisable so for anyone who would like more information about please visit http://flowplayer.org. Their website is very well documented and has great code samples.

If you need help with this or anything else, please feel free to contact us on m3@mydeo.com

Read Full Post »

Follow

Get every new post delivered to your Inbox.