anilmakhijani.com » Tutorial http://anilmakhijani.com Mon, 06 Jun 2011 17:19:22 +0000 en hourly 1 http://wordpress.org/?v=3.2.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