Skip to content

Player Embed

Oren Kosto edited this page Mar 23, 2017 · 8 revisions

The Bamboo Video Platform offers customizing and embedding a video player in any website. Creation, customization and management of media and players can be done in the "Media Management" section of your Bamboo account.

To Embed a video player, paste the following code in your website HTML:

<script type="text/javascript" src="//<BAMBOO_URL>/api/embed2?id=<ENTRY_ID>&uiconf_id=<PLAYER_UICONF_ID>&type=<MEDIA_TYPE>&iid=<ACCOUNT_ID>"></script>

Replace the missing parameters with the following:

  • BAMBOO_URL - The URL of the Bamboo instance (i.e. demo.bamboo-video.com).
  • ENTRY_ID - The entry ID to play.
  • PLAYER_UICONF_ID - The player uiConfId.
  • MEDIA_TYPE - The media type (entry for media entries, playlist for playlists).
  • ACCOUNT_ID - The Bamboo account ID.

Javascript Embed

The player can also be loaded into a webpage using Javascript.

Prerequisites

The Bamboo player needs to be provided with a JSON object with the following data:

{
  'height': <PLAYER_HEIGHT>,
  'width': <PLAYER_WIDTH>,
  'entryId': <ENTRY_ID>,
  'uiconfid': <PLAYER_UICONF_ID>,
  'targetId': <PLAYER_UNIQUE_ID>
}

The embed URL for the player should look like this:

var <PLAYER_EMBED_URL> = <BAMBOO_URL>/api/embed2?id=<ENTRY_ID>&uiconf_id=<PLAYER_UICONF_ID>&type=<MEDIA_TYPE>&iid=<ACCOUNT_ID>

The unique player ID should be:

var <PLAYER_UNIQUE_ID> = 'bamboo_player_' . uniqid();

Usage

Create a div to embed the player in:

<div id="<PLAYER_UNIQUE_ID>" style="width:<PLAYER_WIDTH>px; height:<PLAYER_HEIGHT>px"></div>

Attach the following <script> tag in your HTML:

<script type="text/javascript">
    var bambooPlayer = bambooPlayer || {};
    (function () {
        var u = "<BAMBOO_URL>/api/embed2";
        var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];g.type = 'text/javascript';g.async = true;g.defer = true;g.src = u;s.parentNode.insertBefore(g, s);
        bambooPlayer.loaded = function (e) {
            var entryId = "<ENTRY_ID>";
            // callback player loaded
            embedOptions = {
                "targetId": "<PLAYER_UNIQUE_ID>",
                "uiconf_id": "<PLAYER_UICONF_ID>",
                "entry_id": entryId,
                "flashvars": {
                    "mediaProxy": {
                        "sources": [
                            {
                                "src": "<BAMBOO_URL>/api/entry/" + entryId + "/flavors/playlist.m3u8",
                                "type": "application/vnd.apple.mpegurl"
                            }
                        ]
                    },
                    "scrubber": {
                        "thumbSlicesUrl": "<BAMBOO_URL>/api/entry/{mediaProxy.entry.id}/thumbnail/?width=100&slices=100&sprite=true"
                    },
                    "IframeCustomPluginCss1": "<BAMBOO_URL>/css/panda-player.css"
                }
            };
            bambooPlayer.embed(embedOptions, handlePlayerEvent);
        }
    })();
    function handlePlayerEvent(playerObj) {
    }
</script>

Social Networks Inline Player Embed

For embedding a player on social networks like Facebook or Twitter, please refer to this tutorial on our blog.

Clone this wiki locally