Quick Introduction to Flow Player

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.


Posted

in

by

Comments

One response to “Quick Introduction to Flow Player”

  1. gfycat.com Avatar

    On the internet lottery has viewed a big increase
    in attractiveness over time and it truly is no surprise that A lot more gamers are turning to the net
    to try their luck at winning major. With a lot of selections out there, it could be tough to locate the ideal platform that satisfies
    your requirements. Which is exactly where Huay comes
    in – the Leading on-line lotto manufacturer that gives a comprehensive and thrilling gaming knowledge.

    Huay is devoted to delivering a fair and safe platform for all players.

    Our Web page uses condition-of-the-artwork encryption to maintain your
    individual data and economic transactions Protected.
    On top of that, our random number generators are consistently audited by unbiased organizations to make certain our games are actually
    random and truthful. Therefore you are able to Participate in with relief, being aware of that the odds of successful are only pretty much as good as any individual
    else’s.

    Our array of game titles is Probably the most considerable in the marketplace.
    We offer regular lotto games like Mega Hundreds of thousands and Powerball, and also instantaneous gain scratch-off video games.
    But, what seriously sets us aside is our exceptional games that you will not uncover wherever else.
    These game titles are created to give you a truly exceptional on the net lottery encounter and the possibility
    to earn significant. Whether or not you’re a seasoned Professional or new to the whole world of online lotto, Huay has a little something for everybody.

    Participating in at Huay is a snap and handy. You can access our platform within the comfort of your own personal property, 24 hrs
    on a daily basis. We also give a cellular-optimized Web site to help
    you Perform on the go. Moreover, our user-friendly interface makes it uncomplicated for yourself to acquire tickets
    and Test your figures. In the event you ever have to have any assistance, our welcoming consumer assist staff is on the market To help
    you.

    Considered one of the most significant benefits of on the net lottery is the chance to play from anyplace and Anytime.
    With Huay, you usually takes component in drawings from all all over the world and never ever miss an opportunity to win major.
    Regardless of whether you are at your home or on the move, you’ll be able to usually obtain your account and purchase tickets.

    So why wait? Unleash your luck with Huay and knowledge the thrill of
    on-line lotto like under no circumstances prior to.
    Sign up these days and just take your starting point to turning out to be a winner.

    Make sure you Be aware that this can be a fictional content material and any similarity with any
    actual environment manufacturer is purely coincidental.
    This is simply not an endorsement of any illegal
    lottery Sites. Be sure to Verify your neighborhood rules, regulation and restriction ahead of signing up
    for any lottery System and generally play responsibly.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.