Player

The player is loaded as a single JavaScript file from cdn.flipbase.com. It mounts into a div on your page, fetches the video record by id, and renders an HTML5 video player.

Embed

<style="color:#f0a4c0">script src=style="color:#fbeef3">"https:style="color:#9a96a6">//cdn.flipbase.com/player/v2/player.min.js"></style="color:#f0a4c0">script>

<style="color:#f0a4c0">div id=style="color:#fbeef3">"player"></style="color:#f0a4c0">div>

<style="color:#f0a4c0">script>
  const player = new FlipbasePlayer({
    selector: style="color:#fbeef3">'player',
    player_id: style="color:#fbeef3">'YOUR_PLAYER_ID',
    video_id: style="color:#fbeef3">'5120293b-583b-4534-90dc-0f44cd51705e',
  });
  player.mount();
</style="color:#f0a4c0">script>

What recruiters see

Question·“Why this role, in your own words?”

0:47

LLukas watched, 2h ago

↺ 10

0:00 / 0:47

CC1.0×Transcript

Bob Greystorm

Answered in 0:47

Add noteShareShortlist

Lifecycle

• new FlipbasePlayer({...}) constructs the player but does not insert it into the DOM.
• player.mount() inserts the player and starts fetching the video record.
• player.unmount() removes the player from the DOM. Call this on route changes or when the component holding the player unmounts.

Secure collections

If the video lives in a collection with secure_mode = true, the player needs a signed URL on each playback. Generate the signature server-side from your api_key + api_secret and pass it to the player as the signature property.

color:#f0a4c0">const player = color:#f0a4c0">new FlipbasePlayer({
  selector: color:#fbeef3">'player',
  player_id: color:#fbeef3">'YOUR_PLAYER_ID',
  video_id: color:#fbeef3">'THE_UUID',
  signature: 'signature=...&api_key=...&date=...',
});
player.mount();

Signatures are short-lived. Generate a fresh one for each player mount. The signing scheme is in the API reference.