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) {
player.show({
//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)
//CALLBACKS
onReady: function (treepodiaPlayer) {
},
onError: function (error) {
},
});
}
</script>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>