Integration

The bootstrap script loads the scenario from the ad server and creates the player instance The player will be rendered in the wrapper script container with the size of the wrapper of the container. For detailed bootstrap settings please refer here.

There are multiple ways to load the bootstrap script depends on your need of functionality of the player on the page and customisation of the player behaviour. Please see detailed integration options below.

Inline Script

Simple one line method to integrate the player directly on the page. You can pass query settings parameters in the URI part of the tag URL. By default this implementation will auto init and autoplay the player.

Script Example

<div style="width:500px;height:500px">
<script src="http://<adserver domain>/basev/vpt.js?userId=${userId}&playerId=${playerId}&query[param1]=test"></script>
</div>

Settings Script

Advanced settings script integration allows you to make player settings setup in the bootstrap code by defining the vpt object. For detailed setting object please review this link.

Script Example

<div style="width:500px;height:500px">
<script type="text/javascript">
var vpt = {
userId: "${userId}",
playerId: "${playerId}",
query: {
param1:"someValue", //custom param
version:"latest"
}
};
</script>
<script src="http://<adserver domain>/basev/vpt.js"></script>
</div>

Player Ready Event

In order to be able to orchestrate with the player behaviour and your page you can listen to the player ready event to get the player instance. For detailed events documentation refer to this link.

window.addEventListener("vidazooPlayerLoaded", function(e) {
e.detail.player.on('adStart',function() {
console.log("adStart");
});
});

Manual Init Player Script

You can disable the player auto init and control it manually

You need to set the auto setting to false, then call the vdz.create and wait for the player instance. After that you need to call player.init to start the player

<script src="http://<adserver domain>/basev/vpt.js"></script>
<script type="text/javascript">
let settings = {
userId: "${userId}",
playerId: "${playerId}",
auto: false,
el: "#some-id"
}
vdz.create(settings,function(err, player) {
if (err) {
//handle error
}
player.on("adStart", function() {
//do something
});
player.init();
});
</script>
<div id="some-id" style="width:500px;height:500px"></div>

Example With Autoplay False and Async Await

<script src="http://<adserver domain>/basev/vpt.js"></script>
<script type="text/javascript">
let settings = {
userId: "${userId}",
playerId: "${playerId}",
auto: false,
el: "#some-id",
player:{
autoPlay:false
}
};
(async function(){
try {
let player = await vdz.create(settings);
player.on("adStart", ()=> {
//do something
});
await player.init();
player.start()
}catch(){
//handle error
}
})();
</script>
<div id="some-id" style="width:500px;height:500px"></div>