Flowplayer is now part of the Wowza Video live streaming and VOD platform. Learn more →

light background

Guides

Advanced Player Configurations

Flowplayer has great use cases supported out of the box but can be very extensively customized.

Documentation about customizing the player

The best sources to find out what Flowplayer can do is to review our extended documentation sections covering:

We always recommend you to use the player builder to properly configure your player as the starting point but if you need to make minor modifications programatically or manually we have added a few options to do that here. In case you want to make major modifications we suggest to instead use the JavaScript embed code.

Normally the iframe embed code look like this:

<div class="flowplayer-embed-container"
     style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width:100%;">
  <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
          webkitAllowFullScreen mozallowfullscreen allowfullscreen
          src="//embed.flowplayer.com/api/video/embed.jsp?id=ddse9cb9d-b670-4453-a6bd-6c66e8d291e4&pi=3480668e-2322-4c18-b11a-92af07d07dd6"
          title="0" byline="0" portrait="0"
          width="640" height="360" frameborder="0" allow="autoplay"></iframe>
</div>

If you want to add custom parameters to this code programatically you need to add them to the embed.flowplayer.com URL.

We provide options to add the following parameters:

    • Field
    • Values
    • Description
    • id
    • id of the media asset
    • use a Video, Livestream or Playlist id
    • pi
    • id of the player config
    • determine which player config will be used. The iframe will use the default player config on your site if not set
    • imageurl
    • complete url to the image
    • changes the poster image of the embed code
    • autoplay
    • true | false
    • determine if video should autoplay or not
    • mute
    • true | false
    • override mute or non-mute (with sound)
    • starttime
    • seconds into the video
    • set the starting point for playback

An example would look like this to force autoplay, mute and start 10 seconds into the video:

embed.flowplayer.com/api/video/embed.jsp?
     id=ddse9cb9d-b670-4453-a6bd-6c66e8d291e4&
     pi=3480668e-2322-4c18-b11a-92af07d07dd6&
     autoplay=true&
     mute=true&
     startTime=10&
     imageurl=http://domain.com/image.png

Customizing a player using the JavaScript embed

If you want to do extensive customizations of the player we recommend using JavaScript embed. The JavaScript embed code looks like this:

<div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
  <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
    {
      "src": "f576651c-4cc6-4664-84fa-bb3b35ef1aba"
    }
  </script>
</div>

There are extensive options to configure the player available for you to achieve even the most advanced use cases.