Advanced Player Configurations

Advanced player configurations let you customize a Flowplayer OVP managed player beyond the options of the player builder, either by adding parameters to the iframe embed URL or by configuring the player in the JavaScript embed code. Flowplayer Native supports many use cases 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:

• Player skinning
• Player configuration
• Player API
• Demos

Overriding an iframe link

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 programmatically or manually you can add the iframe URL parameters described in this section. 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 programmatically you need to add them to the embed.flowplayer.com URL.

We provide options to add the following parameters:

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.