The standard way of embedding our player involves embed codes (i.e. HTML snippets) generated by our Online Video Platform. Read more about our standard way of embedding.
For more control over how and when the player is rendered (for example in single-page applications, dynamically loaded content, or situations where you want to avoid iframe overhead), it is possible to load our Player code directly using the following source:
https://cdn.bluebillywig.com/apps/player/latest/player.jsInclude it in your HTML using a <script> tag. Place it just before the closing </body> tag, or add a defer attribute to load it without blocking page rendering:
<script src="https://cdn.bluebillywig.com/apps/player/latest/player.js" defer></script>Loading the Player code directly enables two alternative embedding approaches:
- Web component embedding: embed the player using a custom HTML element; best when the clip and configuration are known when the page loads.
- Programmatic embedding: embed the player via JavaScript; best for dynamic scenarios where the player needs to be created or configured after the page has loaded.
Both approaches require a JSON embed URL (a URL that points to your clip’s embed configuration). Its format is:
https://{your-publication-domain}/p/{playout-name}/c/{clip-id}.jsonYou can find this URL in the embed dialog in the Online Video Platform, or copy it from the src attribute of an existing iframe embed code.
1.0 | Web Component Embedding
Once the Player code is loaded, it registers a custom HTML element <bb-main-player> that you can use directly in your markup. Pass the JSON embed URL via the jsonembedurl attribute.
2.0 | Programmatic Embedding
Once the Player code is loaded, it registers itself in the JavaScript variable bluebillywig on the document window. You can use this to create and control players entirely from JavaScript.
Getter methods such as getPlayoutData() won’t work before the player has triggered the ready event. Other methods such as play() and on() will work, but are queued until the player is ready. We recommend using the on() method to bind to the ready event. For a full overview of available methods, see Player API Methods.
For React apps, use our open-source ReactPlayerBlueBillywig extension. Read more in the React Native Player SDK documentation. For embedding inside native iOS or Android apps, see our dedicated Native SDK documentation.