Treepodia Player Integration¶

This guide shows you how to add the Treepodia HTML5 Player to your pages and display your 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:

Include the Treepodia Player script
Create the initTreepodia(player) function
Add a placeholder element for the video

Step 1: Include the Treepodia Player script¶

Include the Treepodia script in the body of every page where you want to show videos. We recommend placing it at the bottom of the page, just before the closing </body> tag.

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

<!-- Treepodia HTML5 Player 3.0 Script -->
<script type="text/javascript" src="https://static.treepodia.com/player3/TreepodiaPlayer.js"></script>

Step 2: Create the `initTreepodia(player)` function¶

Once TreepodiaPlayer.js has loaded, it automatically calls a function named initTreepodia(player) on your page. The function runs only after the page has finished loading. It takes one product context and requests that product's video information.

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

<script type="text/javascript">
  function initTreepodia(player) {
    player.show({
      // Required parameters
      account: "YOUR-ACCOUNT-ID",
      sku: "YOUR-PRODUCT-SKU",
      container: "treepodiaPlayerMain",

      // Optional video parameters
      autoplay: false,
      loop: false,
      muted: false,

      // Optional player parameters
      controls: true,
      showJumboPlay: true,
      blueJumboPlay: true,
      responsive: true,
      showTime: true,
      showDuration: true,
      pictureInPicture: false,

      // Popup
      popup: false,
      popupBtnWidth: 50,   // pixels
      popupBtnHeight: 50,  // pixels
      popupBtnImg: null,   // string: URL

      // Poster
      showPoster: true,
      posterUrl: null,     // string: URL

      // Google Analytics
      gaEnabled: false,
      gaId: null,          // string: GTAG ID

      // Callbacks
      onReady: function (treepodiaPlayer) {
      },
      onError: function (error) {
      }
    });
  }
</script>

Parameters¶

Required¶

Parameter	Type	Description
`account`	string	Your Treepodia account ID.
`sku`	string	The SKU of the product whose video should be shown.
`container`	string	The `id` of the page element that will hold the player (see Step 3).

Video¶

Parameter	Type	Value in example	Description
`autoplay`	boolean	`false`	Start playing the video automatically.
`loop`	boolean	`false`	Restart the video when it ends.
`muted`	boolean	`false`	Start the video with the sound muted.

Player¶

Parameter	Type	Value in example	Description
`controls`	boolean	`true`	Show the player controls.
`showJumboPlay`	boolean	`true`	Show a large play button over the video.
`blueJumboPlay`	boolean	`true`	Use the blue style for the large play button.
`responsive`	boolean	`true`	Resize the player to fit its container.
`showTime`	boolean	`true`	Show the current playback time.
`showDuration`	boolean	`true`	Show the total video duration.
`pictureInPicture`	boolean	`false`	Allow picture-in-picture mode.

Parameter	Type	Value in example	Description
`popup`	boolean	`false`	Show a button that opens the video in a popup, instead of embedding the video in the page.
`popupBtnWidth`	number	`50`	Width of the popup button, in pixels.
`popupBtnHeight`	number	`50`	Height of the popup button, in pixels.
`popupBtnImg`	string (URL)	`null`	Image to use for the popup button.

Poster¶

Parameter	Type	Value in example	Description
`showPoster`	boolean	`true`	Show a poster image before the video starts.
`posterUrl`	string (URL)	`null`	Custom poster image.

Google Analytics¶

Parameter	Type	Value in example	Description
`gaEnabled`	boolean	`false`	Send player events to Google Analytics.
`gaId`	string	`null`	Your Google Analytics tag ID.

Callbacks¶

Parameter	Arguments	Description
`onReady`	`treepodiaPlayer`	Called when the player is ready.
`onError`	`error`	Called when the player fails to load or play the video.

Step 3: Add a placeholder element¶

The last step is to add a placeholder where the video will appear. The placeholder can be any HTML element (div, p, span), and its id must match the container parameter you passed to player.show().

<div id="treepodiaPlayerMain"></div>

Popup mode

If you set popup: true, this element becomes the button that opens the video in a popup.

Complete example¶

A minimal page with all three parts in place:

<!DOCTYPE html>
<html>
<body>
  <!-- Step 3: placeholder -->
  <div id="treepodiaPlayerMain"></div>

  <!-- Step 2: initTreepodia -->
  <script type="text/javascript">
    function initTreepodia(player) {
      player.show({
        account: "YOUR-ACCOUNT-ID",
        sku: "YOUR-PRODUCT-SKU",
        container: "treepodiaPlayerMain"
      });
    }
  </script>

  <!-- Step 1: Treepodia Player script -->
  <script type="text/javascript" src="https://static.treepodia.com/player3/TreepodiaPlayer.js"></script>
</body>
</html>