Dynamic Video Player Integration

This guide shows you how to add the Treepodia Dynamic Video Player to your pages and display your dynamic videos. Embedding the video is recommended for the best viewing quality, and is a best practice for working with online video.

Integration takes three steps:

1. Include the Dynamic Video Player script
2. Create the initTreepodiaDynamicVideoPlayer(player) function
3. Add a video placeholder

Step 1: Include the Dynamic Video Player script

Include the Treepodia Dynamic Video Player script in the body of every page where you want to show dynamic videos.

The script is served over HTTPS and works on both secure (https) and non-secure (http) pages.

<!-- Treepodia Dynamic Video Player 6.0.0 Script -->
<script type="text/javascript" src="https://static.treepodia.com/dynamicplayer/js/6.0.0/dynamic.video.player.min.js" defer></script>

Step 2: Create the initTreepodiaDynamicVideoPlayer(player) function

Once dynamic.video.player.min.js has loaded, it automatically calls a function named initTreepodiaDynamicVideoPlayer(player) on your page. The function runs only after the page has finished loading.

Define the function and call player.load() with your settings:

<script type="text/javascript">
  function initTreepodiaDynamicVideoPlayer(player) {
    player.load({
      // Required parameters
      account: "YOUR-ACCOUNT-UUID",
      videoUUID: "YOUR-VIDEO-UUID",
      playerContext: "YOUR-PLAYER-CONTEXT"
    });
  }
</script>

Parameters

Parameter	Type	Required	Description
account	string	Yes	Your Treepodia account UUID.
videoUUID	string	Yes	The UUID of the dynamic video to play.
playerContext	string	Yes	The player context.

Step 3: Add a video placeholder

The last step is to add a placeholder where the video will appear. The placeholder must be a <video> element with the trpd-player attribute.

<video id="trpdPlayer" trpd-player></video>

Complete example

A minimal page with all three parts in place:

<!DOCTYPE html>
<html>
<body>
  <!-- Step 3: video placeholder -->
  <video id="trpdPlayer" trpd-player></video>

  <!-- Step 2: initTreepodiaDynamicVideoPlayer -->
  <script type="text/javascript">
    function initTreepodiaDynamicVideoPlayer(player) {
      player.load({
        account: "YOUR-ACCOUNT-UUID",
        videoUUID: "YOUR-VIDEO-UUID",
        playerContext: "YOUR-PLAYER-CONTEXT"
      });
    }
  </script>

  <!-- Step 1: Dynamic Video Player script -->
  <script type="text/javascript" src="https://static.treepodia.com/dynamicplayer/js/6.0.0/dynamic.video.player.min.js" defer></script>
</body>
</html>