Advanced Embedding


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. Alternatively, it’s possible to directly load our Player code using the following source:

https://cdn.bluebillywig.com/apps/player/latest/player.js

Loading the player code directly using the URL above, enables:

  • Web component embedding
  • Programmatic embedding

1.1 | Web Component Embedding

Once the Player code is loaded, it will register a web component “bb-main-player” and allow you to embed your media with pure HTML.

1.2 | Programmatic Embedding

Once the Player code is loaded, it will register itself in the javascript variable “bluebillywig” on the document window and allow you to embed your media with pure javascript.

Note:

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.

1.3 | Embedding in a React web app

For React web you can use the open-source ReactPlayer project, together with our ReactPlayerBlueBillywig extension. It can be found here: https://github.com/bluebillywig/react-player-blue-billywig/

1.4 | Embedding in-app

We recommend using our dedicated Native SDKs when embedding the Blue Billywig player inside a native app (in-app). Read more about our Native SDKs.

If implementing our Native SDKs isn’t an option and your iOS app uses a WkWebView, it’s possible to use a standalone HTML page containing our player to use as your WkWebView source, such as the following:

https://yourcompanyname.bbvms.com/p/default/c/4354721.html?inheritDimensions=true&placementOption=default

These HTML pages are available in the Online Video Platform.

  • Click to expand “Media Library” in the left menu panel:
  • Click “Media clips”
  • Select your clip and open the “Embed” tab
  • In the Embed tab select the “URL” option from the dropdown menu:

In your iOS app, make sure you include the following in the source code:

#if __IPHONE_OS_VERSION_MIN_REQUIRED > 93000
// target is higher than iOS 9.3.1
self.wkWebViewConfiguration.mediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypeNone;
#else
self.wkWebViewConfiguration.requiresUserActionForMediaPlayback = NO;
#endif

Ideally, implement a navigation policy as well:

class WKWebViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {
 
// Creates the WKWebView
let webConfiguration = WKWebViewConfiguration()
webConfiguration.allowsInlineMediaPlayback = true
webConfiguration.mediaPlaybackRequiresUserAction = false
wkWebView = WKWebView(frame: .zero, configuration: webConfiguration)
wkWebView!.navigationDelegate = self
wkWebView!.uiDelegate = self
 
 
func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
    // Capture window.open (clickthroughs) and redirect
    webView.load(navigationAction.request)
    return nil
}

In your Android app, it should also be possible to use a standard Javascript embed code. Add cleartextTrafficPermitted=“true” to the app manifest file.

Was this article helpful?

Related Articles

Contact Support
Can't find the answer you're looking for?
Contact Support