Advanced Embedding

1.0 | Embed-Code Parameters

Most playout settings can be overridden by embed-code parameters. Moreover, a selected subset of settings can be made exclusively by using an embed-code parameter. They are:

1.1 | Embed-Code Parameters for Commercial Targeting

Often when targeting commercials, custom macros are needed. Since v5.35, the player implements this facility, substituting %%<key>%% with the value part of the macro_<key>=<value> embed-code parameter.

An example: If we have an ad tag url
https://testsuite.acc.bbvms.com/mediaclip/692.xml?output=vast&targeting=%%foo%%
booked in the preroll position of the default playout, then embedding the player with
https://testsuite.acc.bbvms.com/p/default/c/213.js?macro_foo=bar
results in the player requesting a preroll ad from
https://testsuite.acc.bbvms.com/mediaclip/692.xml?output=vast&targeting=bar.

2.0 | Embedding

2.1 | Just-In-Time Embedding

You can also directly embed our Player API from http://[your publicationname].bbvms.com/launchpad/

Once the Player API 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.

Example:

<script src="http://demo.bbvms.com/launchpad/"></script>

<div id="myPlayerDiv"></div>

<script>

// Embed the player in the element "myPlayerDiv". Other playout settings (like width, height, autoPlay) can also be overruled by including them in the object passed as a second parameter:

var myPlayer = new bluebillywig.Player( "http://demo.bbvms.com/p/default/c/2337181.json", {

        target : document.getElementById("myPlayerDiv"),

        autoPlay : "false"

});

// call the play method on the newly created player:

myPlayer.play();

</script>=

2.2 | Embedding in-app

For embedding the Blue Billywig player inside a native app (in-app) we recommend using our dedicated native SDKs.

If implementing our Native SDKs isn’t an option and your iOS app uses a WkWebView, you can 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. In the Media Library:

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