Integrate the Flipbase player

The Flipbase Player can be integrated following the same steps as the Recorder. The Player utilizes HTML5 technology.

How to integrate the Player?

To show the Flipbase Player you have to integrate the code as shown below and replace the ‘player_id’ parameter with your own unique PlayerId.

Load from cdn.flipbase.com. That is the CDN itself, so the request goes straight to the nearest edge. app.flipbase.com serves the same file through a reverse proxy on a single instance — existing integrations pointing at it keep working, but it is one more thing between the browser and the file.

<head>
  ...
  <!--
    Load the JavaScript Player library in the HTML head section of your page
  -->
  <script src="https://cdn.flipbase.com/player/v2/player.min.js"></script>
</head>

<!--
  Place the a video element(s) where you want to show the video player.
-->
<div id="video-player-element"></div>

<!-- Initialize the Player and provide your 'player_id' -->
<script>
  const player = new FlipbasePlayer({
    video_id: '5120293b-583b-4534-90dc-0f44cd51705e',
    player_id: '95f4d94b-86c0-4e4a-b23d-484158efd1a4',
    selector: 'video-player-element'
  })

  // Load the Flipbase player(s) manually
  player.mount();

  // Remove the Flipbase player(s) from the DOM
  setTimeout(function () {
    player.unmount();  
  }, 50000)
</script>

On pinning a version

This loads /player/v2/, which moves when a v2 patch is released.

The exact-version paths under /player/v2.x.y/ predate our current release process and do not all contain the same build as /player/v2/, so pinning one would give you a player we are not serving to anyone else. Pin an exact version from v3 onwards, where every version path is immutable and carries an integrity hash.

The code above will result in this — and you can change every option here and watch the player rebuild:

Open the player playground ↗

Opens in a new tab. Runs the published bundle from the CDN — the same bytes you would embed.

Secure mode

When collections have enabled secure_mode all videos that are stored in that collection need to be loaded using the Flipbase player.js along with a signature property. You can read on how to create this signature here. For EACH video element you need to generate a seperate signature.

Using the signature with the Flipbase Player.js

Just create a signature the way you do with any API request, but append the elements you've used in the StringToSign in querystring like style to the signature. NOTE: the URI-encoded path should equal: '/api/videos/<VIDEO_ID>' when creating signatures to be used along with the video player.

SignatureString =
  'signature=<SIGNATURE>&' + 'api_key=<FLIPBASE_API_KEY>&' + 'date=<DATE>';

Add this signature property to the options object literal when invoking the FlipbasePlayer function;

<!-- Initialize the Player and provide your 'player_id' -->
<script>
  const player = new FlipbasePlayer({
    signature: "<SIGNATURE_STRING>"
    video_id: '5120293b-583b-4534-90dc-0f44cd51705e',
    player_id: '95f4d94b-86c0-4e4a-b23d-484158efd1a4',
    selector: 'video-player-element'
  });

  // Load the Flipbase player(s) manually
  player.mount();
</script>

Browser Support

• Chrome 37+
• Firefox 40+
• Internet Explorer 11+
• Opera 25+
• Safari 9.1+
• Android Browser 5+ (WebKit 537.36 Chrome 37)
• IOS Safari 10+

Migrating from v1

v1 is deprecated. It still loads — it is served from app.flipbase.com/player.js and has not been withdrawn — but it receives no changes, and it is the one component never published to the CDN.

What is different in v2

• A different host and path: https://cdn.flipbase.com/player/v2/player.min.js
• A different constructor: FlipbasePlayer
• mount and unmount, so you control when the player enters and leaves the DOM rather than it being tied to page load
• A custom element, <flipbase-player></flipbase-player>, if you would rather write markup than JavaScript
• Fullscreen playback

The rewrite was not only about features. v1 is a single 411 kB file against v2's 144 kB, and the smaller surface is what makes the rest of this page possible.