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.
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.