1. Home
  2. Integrations
  3. HTML5 Player Integration

HTML5 Player Integration

This guide will show you how to implement the Treepodia integration code and show your videos. Embedding the video is recommended for best viewing quality, and a best practice for working with online video.

Including Treepodia HTML5 Player script

In order to integrate with Treepodia’s platform, the Treepodia script should be included in the body of the relevant pages required for integration. We recommend including it at the bottom of the page, before the </body> tag. Note the below script is suitable for both secure (https) and non-secure (http) pages.

<!-- Treepodia HTML5 Player 3.0 Script -->
<script type="text/javascript" src="//dxa05szpct2ws.cloudfront.net/player3/TreepodiaPlayer.js"></script>

Creating “initTreepodia(player)”

Once the “TreepodiaPlayer.js” script has loaded, it will automatically invoke the function “initTreepodia(player)” on the loading page. The function will run only after the page has completed loading. It will retrieve one product context and request its video information.

<script type="text/javascript">
	function initTreepodia(player) {
			//Required Parameters
			account: "UA-SHUFER-SAL",
			sku: "e0450759a203ca4193d499d4eb62ec93",
			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

			gaEnabled: false,
			gaId: null, //STRING: GTAG ID (UA-XXXXXXX-XX)

			onReady: function (treepodiaPlayer) {

			onError: function (error) {

Creating a placeholder to display the video or its play button

The last step to embed the video is to create a placeholder for it. The placeholder can be any HTML element (div,p,span) and should have a unique ID that was passed in the container parameter. It’s called in the initTreepodia(player) function.
If you choose to use the “popup” method, this element will initiate the video popup.

<div id="treepodiaPlayerMain"></div>
Updated on September 9, 2021

Was this article helpful?

Related Articles