anilmakhijani.com » FlowPlayer http://anilmakhijani.com Mon, 06 Jun 2011 17:19:22 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Compiling a Flowplayer Plugin on Mac OS X http://anilmakhijani.com/2009/01/09/compiling-a-flowplayer-plugin-on-mac-os-x/ http://anilmakhijani.com/2009/01/09/compiling-a-flowplayer-plugin-on-mac-os-x/#comments Fri, 09 Jan 2009 20:40:14 +0000 Anil http://anilmakhijani.com/?p=186 For some reason it took me a while to figure out how to compile a flash plugin for Flowplayer. Here were the steps that I took to finally get it working:

  1. Install Ant. Instructions for this can be found here
  2. Download Adobe Flex 3 SDK. You can download this here.
  3. Unzip the Flex 3 SDK that you just downloaded. 
    % unzip flex_sdk_3.zip
  4. Download the Flowplayer development kit. The latest version of the development kit can be found here.
  5. Unzip the Flowplayer development kit. 
    % upzip flowplayer.devkit-3.0.3.zip
  6. Edit the plugin-build.properties file in the Flowplayer development kit. Specifically edit the line that says:
    7. flex3dir=/Users/api/flex3sdk

    to point to the location to which you unzipped the Flex 3 SDK. After editing my file looks like this:

    flex3dir=/Users/anil/Desktop/flex_sdk_3
  7. Navigate to the example plugin that is contained within the Flowplayer development kit. For me this is located here: 
    /Users/anil/Desktop/flowplayer.devkit/example
  8. Finally, type: 
    % ant

    The output should look like this:

    Buildfile: build.xml

build:
     [echo] ++ flowplayer.helloworld.swf +++
     [echo]
     [echo] checking if flowplayer.helloworld.swf is uptodate
     [echo] main up-to-date: ${uptodate.main}

prepare:
    [unzip] Expanding: /Users/anil/env/flowplayer.devkit/flowplayer.swc into
    /Users/anil/env/flowplayer.devkit/example/build

check-compile-dirs:

check-compile-dirs2:

compile:
     [exec] Loading configuration file
           /Users/anil/Desktop/flex_sdk_3/frameworks/flex-config.xml
     [exec] /Users/anil/env/flowplayer.devkit/example/build
/flowplayer.helloworld.swf (1304 bytes)
     [copy] Copying 1 file to /Users/anil/env/flowplayer.devkit/example/build

BUILD SUCCESSFUL
Total time: 3 seconds

Congratulations! You have compiled a flash plugin for Flowplayer!

]]> http://anilmakhijani.com/2009/01/09/compiling-a-flowplayer-plugin-on-mac-os-x/feed/ 1 Quick Introduction to Flow Player http://anilmakhijani.com/2008/11/28/quick-introduction-to-flow-player/ http://anilmakhijani.com/2008/11/28/quick-introduction-to-flow-player/#comments Fri, 28 Nov 2008 19:10:58 +0000 Anil http://anilmakhijani.com/?p=105 At TOPP we have been considering switching Streetfilms over to using FlowPlayer. There are number of advantages to using FlowPlayer:

  1. It is released under a GPL3 license.
  2. It has a neat new jQuery interface.

As I learn more about the advanced features of FlowPlayer I will blog about them, but here is a quick introduction.

If you create a page with markup like this one (see this in action here):

<html>
  <body>
    <h2>Anil Tube</h2>
    <div class="player">
       <a href="http://www.streetfilms.org/wp-content/uploads/2008/01/chicanefinal16x9.flv">
            <img src="chicaneposter.jpg" />
       </a>
    </div>
    <br><br>
    <div class="player">
      <a href="http://www.streetfilms.org/wp-content/uploads/2008/11/jan-gehl-with-aaron_768k.flv">
          <img src="gehl-and-aaron-poster1.jpg" />
      </a>
    </div>

  </body>
</html>

You can make these FLV files playable with the following code (see this in action here): 

<html>
  <head>
  <script type="text/javascript" src="http://anilmakhijani.com/flow_test/jquery-1.2.6.js">
  </script>
  <script type="text/javascript" src="http://anilmakhijani.com/flow_test/flowplayer-3.0.0.min.js">
  </script>
  <script type="text/javascript">
        $(document).ready( function () {
           $("div.player").each( function () {
                        var link = $(this).find("a");
                        var flv_file = link.attr("href");
                        var img_file = link.find("img").attr("src");
                        $(this).empty().flowplayer({src: "flowplayer-3.0.0.swf", width:560,
                                                                height:459}, {
                                playlist: [
                                    {
                                        url: img_file,
                                        scaling: 'fit'
                                    },
                                    {
                                        url : flv_file,
                                        autoPlay: false,
                                        scaling: 'fit'
                                    }
                                ]
                            });  //end the flowplayer command
                }); //ends the div.player.each

         }); //end the jquery document.ready
  </script>
  </head>
  <body>
    <h2>Anil Tube</h2>
    <div class="player">
       <a href="http://www.streetfilms.org/wp-content/uploads/2008/01/chicanefinal16x9.flv">
           <img src="chicaneposter.jpg" />
       </a>
    </div>
    <br><br>
    <div class="player">
      <a href="http://www.streetfilms.org/wp-content/uploads/2008/11/jan-gehl-with-aaron_768k.flv">
         <img src="gehl-and-aaron-poster1.jpg" />
      </a>
    </div>                                                                                                                   

  </body>
</html>

I think that the code is pretty self explanatory.   I am using straight jQuery to get the source of the image and FLV file. I am then plugging these values into the FlowPlayer javascript API. Flow Player doesn’t have the concept of a poster frame for a video, so instead I create a play list where the image is the first item in the play list and the FLV file is the second.

To get this to work you obviously need to download the jQuery, FlowPlayer javascript file and the actual player itself.

Update:

I realised that the above code does not work in Internet Explorer 7. IE7 is apparently more strict in enforcing that the Javascript Objects have the correct syntax. I had extra comma’s in the “Playlist” array that I have now removed.

]]> http://anilmakhijani.com/2008/11/28/quick-introduction-to-flow-player/feed/ 0