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:

NameTypeValue
dfp_adunit_l1Stringlevel-1 ad unit
dfp_adunit_l2Stringlevel-2 ad unit
dfp_adunit_l3Stringlevel-3 ad unit
dfp_adunit_l4Stringlevel-4 ad unit
dfp_adunit_l5Stringlevel-5 ad unit

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>=
Note:

Getters, such as getPlayoutData(), will not work before the player has triggered its ‘ready’ event. Other methods, such as play() and on() will, but are queued until the player is ready. Hence, you can — and should — use the on() method to bind to the ‘ready’ event and go from there.

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 this isn’t an option and your iOS app uses a WkWebView, you can use a standard Javascript embed code. First, make sure you include the following in the iOS app 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
}

Once this is setup, either use a dedicated playout for in-app, enabling the playout setting ‘Force “can autoplay”‘. Alternatively you can embed the player with ?forceCanAutoPlay=true appended to the embed url.

In your Android app, it should also be possible to use a standard js 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