JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Flowplayer

    The HTML5 video player for the web
    Filed under 

    • 🔾60%Overall
    • 1,368
    • 12 hours
    • 🕩359
    • 👥2

    Flowplayer

    website | demos | docs

    For the impatient

    1. Download Flowplayer
    2. Unzip
    3. Drop the folder under your server

    Minimal setup

    <!DOCTYPE html>
    
    <head>
       <!-- flowplayer depends on jQuery 1.7.1+ (for now) -->
       <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    
       <!-- flowplayer.js -->
       <script type="text/javascript" src="flowplayer.min.js"></script>
    
       <!-- player styling -->
       <link rel="stylesheet" type="text/css" href="flowplayer/minimalist.css">
    
    </head>
    
    <body>
    
       <!-- player 1 -->
       <div class="flowplayer">
          <video src="my-video.mp4"></video>
       </div>
    
       <!-- player 2 -->
       <div class="flowplayer">
          <video>
             <source type="video/webm" src="my-video2.webm">
             <source type="video/mp4" src="my-video2.mp4">
          </video>
       </div>
    
    </body>
    

    API Samples

    // listen to events on second player
    flowplayer(1).bind("load", function (e, api, video) {
    
    }).bind("pause", function (e, api) {
    
    });
    
    // work with jQuery
    $(".flowplayer").bind("unload", function (e, api) {
    
    });
    

    Compiling Flash

    export mxmlc=<PATH_TO>/flex_sdk_4.5.1.21328_mpl/bin/mxmlc
    cd ./flowplayer # this repository
    make flash
    

    Reporting bugs

    Please read the contributing guidelines before reporting issues or submitting patches.

    Running tests

    Our automated test suite is sponsored by BrowserStack. Thanks you!

    Running locally

    Tests are run on BrowserStack

    • Install dependencies: bundle install
    • Setup broserstack tunnel: java -jar features/support/BrowserStackTunnel.jar -f <your tunnel api key> /path/to/flowplayer/repo
    • Run cucumber features: rake username=<browserstack username> key=<broserstack automate api key> base_url=http://<something>.browserstack.com

    License

    GPL v3 with an ADDITIONAL TERM per GPL Section 7

    Copyright (c) 2012 Flowplayer Ltd

    Show All