Skip to main content

Adding an advertisement

In this example we are gonna make a ad roll before the content. We are gonna need an extra file, the VAST ad file.

The code#

You need to link the HTML file with the VAST file, the vast file needs to be hosted so that it can be read by the ProPlayer.

HTML#

This is the main page with the video-wrapper for the player and the js code that makes it all tick.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- First we load the SDK -->
<script type='text/javascript' src="//cdn.jet-stream.com/static/pp/2.1.0/privacy-player.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<style>
html, body {
background: none transparent;
}
</style>
</head>
<body>
<!-- then we make a div to put the player into-->
<div style="height: 300px; width: 480px; position: relative; ">
<div id="video-wrapper" style="height: 300px; width: 400px; "></div>
</div>
</body>
<script type="text/javascript">
// in out script tag we make the wrapper and declare the player so that we have something we can controll with all te functions
let video_wrapper = document.querySelector("#video-wrapper")
// we declare the vast url where the player will get its ad information from
options = {
'VAST_url': "https://docs.jet-stream.com/docs/privacy-player/examples/vast.xml"
}
let player = new PrivacyPlayerPro(
// this is the link to your content
"https://rrr.sz.xlcdn.com/?account=jetstreammanual&file=readysetrocknroll6.smil&type=streaming&service=wowza&sub=readysetrocknroll6_EN.vtt,readysetrocknroll6_NL.vtt&output=player&events=1",
// and then give this url to the player with the options input
video_wrapper, true, true, options
)
player.ready_callback = function () {
//here you can add the other options we talked about in the other examples
}
</script>
</html>

VAST file#

This is the VAST ad file, here you can specify the adds that are rolled and the corresponding tracking information

This is an example of an simple Vast file

<VAST version="3.0">
<!-- this file has 2 ad's in it, right below this comment the first one starts. -->
<Ad id="38985" sequence="1">
<InLine>
<AdSystem>Adscience</AdSystem>
<AdTitle>ad38985</AdTitle>
<Description>video ad</Description>
<Creatives>
<Creative id="38985">
<Linear>
<!-- we set the duration -->
<Duration>00:00:10</Duration>
<TrackingEvents>
<!-- this is where the tracking starts, you can place tracking links in all the places we placed example.com -->
<Tracking event="start">
example.com
</Tracking>
<Tracking event="firstQuartile">
example.com>
</Tracking>
<Tracking event="midpoint">
example.com
</Tracking>
<Tracking event="thirdQuartile">
example.com
</Tracking>
<Tracking event="complete">
example.com
</Tracking>
</TrackingEvents>
<VideoClicks>
<!-- this piece of code defines what happens when you click on the fist ad-->
<ClickThrough>
<!-- you are linked trough to our website! -->
https://www.jet-stream.com
</ClickThrough>
</VideoClicks>
<MediaFiles>
<!-- we still need to tell the programm where to find the ad, we first declare the type and then give the link. min that you need to use CDATA tags if the link contains a & -->
<MediaFile type="video/mp4">
<![CDATA[//rrr.sz.xlcdn.com/?account=demo&file=STERAD_P_621_38988.mp4&type=download&service=apache&output=mp4]]>
</MediaFile>
</MediaFiles>
</Linear>
</Creative>
</Creatives>
</InLine>
</Ad>
<!-- and here starts the second add, it is the same al over again, i will let you figure it out yourself ;) -->
<Ad id="37502" sequence="2">
<InLine>
<AdSystem>Adscience</AdSystem>
<AdTitle>ad37502</AdTitle>
<Description>video ad</Description>
<Creatives>
<Creative id="37502">
<Linear>
<Duration>00:00:15</Duration>
<TrackingEvents>
<Tracking event="start">
example.com
</Tracking>
<Tracking event="firstQuartile">
example.com
</Tracking>
<Tracking event="midpoint">
example.com
</Tracking>
<Tracking event="thirdQuartile">
example.com
</Tracking>
<Tracking event="complete">
example.com
</Tracking>
</TrackingEvents>
<VideoClicks>
<ClickThrough>
https://www.jet-stream.com
</ClickThrough>
</VideoClicks>
<MediaFiles>
<MediaFile type="video/mp4" >
<![CDATA[//rrr.sz.xlcdn.com/?account=demo&file=STERAD_P_549_38810.mp4&type=download&service=apache&output=mp4]]>
</MediaFile>
</MediaFiles>
</Linear>
</Creative>
</Creatives>
</InLine>
</Ad>
</VAST>

The result#

And then finally we have a player with ads!