AD-Pods with JW Player
Introduction:
All of us know about video Ad-breaks. Ad-breaks usually appear at the starting, mid or end of any streaming video to gain user’s attention on a particular brand. Ad-Pods is an advance feature of showing multiple advertisements back-to-back in a single Ad-break. It can be dynamic or static depend on the user’s requirement. JW-Player can play advertisements together anywhere in the scheduled ad-break. It would be helpful to gain user attention on multiple brands and gain profitability, Ad-Pods can be scheduled as Pre-Rolls, Mid-Rolls, and Post-Rolls.
- Pre-Rolls Ads are played before going to start video inside JW Player,
- Mid-Rolls Ads can be added to play in mid of video playing at defined time slot.
- Post-Rolls Ads are played after video completed.
Step by Step approach to implementing Ad-Pods with JW Player:
Step 1: Create an XML file, which has multiple nodes for every ad
[xml]
<VAST xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="3.0"
xsi:noNamespaceSchemaLocation="vast3_draft.xsd">
<Ad id="lr1" sequence="2">
<Wrapper followAdditionalWrappers="true" allowMultipleAds="true" fallbackOnNoAd="true">
<AdSystem/>
<Impression id="">
<![CDATA[ http://qa.jwplayer.com/~todd/impression.gif ]]>
</Impression>
<Error>
<![CDATA[ http://qa.jwplayer.com/~todd/error.gif ]]>
</Error>
<VASTAdTagURI>
<![CDATA[
Ad video file path (.mp4 / other formats)
]]>
</VASTAdTagURI>
</Wrapper>
</Ad>
<Ad id="lr2" sequence="2">
<Wrapper followAdditionalWrappers="true" allowMultipleAds="true" fallbackOnNoAd="true">
<AdSystem/>
<Impression id="">
<![CDATA[ http://qa.jwplayer.com/~todd/impression.gif ]]>
</Impression>
<Error>
<![CDATA[ http://qa.jwplayer.com/~todd/error.gif ]]>
</Error>
<VASTAdTagURI>
<![CDATA[
Ad video file path (.mp4 / other formats)
]]>
</VASTAdTagURI>
</Wrapper>
</Ad>
</VAST>
[/xml]
There are <Ad> tags in above XML example that have advertisement’s video file path mentioned in <VASTAdTagURI> tag. It also contains advertisement playing details like the sequence, etc. If we want to add more than one advertisement, then we have to add more <Ad> tags.
Step 2: We can use this Ad XML file in our JW-Player’s JavaScript code with corresponding time slot as follows:
[html]
<script type="text/javascript">
var playerobject = jwplayer("Video Div Container ID").setup({
file: "Video File Path",
image: "Video Cover Image",
type: "m3u8",
androidhls: "true",
primary: "html5",
title: "Made in America",
width: "100%",
aspectratio: "16:9",
skin: {
name: "glow"
},
advertising: {
client: "vast",
schedule: {
preadbreak: {
offset: "pre",
tag: "Ad Video file path(.mp4,.mov, other formats)"
},
adbreak1: {
offset: "12:05",
tag: "Ads Pods XML file path"
},
adbreak2: {
offset: "18:20",
tag: "Ads Pods XML file path"
}
}
}
}
);
</script>
[/html]
You can see in above example, there are three slots (mentioned in schedule) for ad-breaks. The first one is Pre-Roll (mentioned with offset: "pre"), this has a single ad break that appears at the beginning. The remaining 2 ads are Mid-roll Ad-pods with given time, offset: "12:05" and offset: "18:20". These will appear during the streaming at 12 minutes 5 seconds and 18 minutes 20 seconds respectively. In the later case, the ad will be picked from the XML file mention in the tag variable.
Hoping this information is helpful for you.
i need full source code, Plz..