If you are not an expert in writing code, this Master Class will show you the code you need to add different ad zones using VAST, so you can easily add it to your website to monetise your video content through Fluid Player.<\/p>\n
The In-Video (VAST) format allows publishers to have one or multiple ads displayed along a video\u2019s timeline within Fluid Player.<\/p>\n
Here is a full list of the JavaScript code parameters:<\/p>\n
<\/p>\n
Resources<\/strong><\/p>\n The following code is where the Fluid Player resources are placed:<\/p>\n <\/p>\n Ad Format code<\/strong><\/p>\n Each of the codes below define the different options you have to add video ads into the player. This code should be added after the <\/span><\/video><\/span> tag<\/span>.<\/span><\/p>\n Pre-Roll<\/strong><\/p>\n This is the video ad list including the pre-Roll VAST file.<\/span><\/p>\n Mid-Roll<\/strong><\/p>\n This is the video ad list that includes the Mid-Roll custom options. You can have multiple Mid-Rolls however, only one Pre-Roll and one Post-Roll can be set. Below are two pieces of code, the only difference between them is the way the timer parameter is selected. You can choose the number of seconds \u201ctimer\u201d : \u201c8\u201d which will show the ad 8 seconds into the video or you can choose the percentage of video that is show before the ad is shown \u201ctimer\u201d : \u201c25%\u201d<\/span><\/p>\n On-Pause<\/strong><\/p>\n This is the video ad list that includes the On-Pause option.<\/span><\/p>\n Post-Roll<\/strong><\/p>\n This is the video ad list that includes the Post-Roll option.<\/span><\/p>\n <\/p>\n Using all of the ad formats together<\/strong><\/p>\n Here is the full list of all the video ad options above grouped as one piece of code:<\/span><\/p>\n <\/p>\n <\/p>\n In this final example this is how the complete code should look for the insertion of one Pre-Roll ad:<\/span><\/p>\n <\/p>\n <\/p>\n For more information please visit Fluid Player’s <\/span>documentation<\/span><\/a> page.<\/span><\/p>\n <\/p>\n Fluid Player Community<\/b><\/p>\nFirst, add this code within the <head> tag:\r\n\r\n<!-- Style --> \r\n<link rel="stylesheet" href="https:\/\/cdn.fluidplayer.com\/v2\/current\/fluidplayer.min.css" type="text\/css"\/>\r\n<!-- Main Fluid Player Core code --> \r\n<script src="https:\/\/cdn.fluidplayer.com\/v2\/current\/fluidplayer.min.js"><\/script>\r\n\r\n\r\n\r\n<!-- Style -->\r\n<link rel="stylesheet" href="https:\/\/cdn.fluidplayer.com\/v2\/current\/fluidplayer.min.css" type="text\/css"\/>\r\n<!-- Main Fluid Player Core code -->\r\n<script src="https:\/\/cdn.fluidplayer.com\/v2\/current\/fluidplayer.min.js"><\/script>\r\n\r\n\r\n\r\nThen add this code within the <body> tag\r\n\r\n\/\/Video content\r\n<video id="video-ad-list" controls>\r\n <source src="https:\/\/cdn.fluidplayer.com\/videos\/valerian-720p.mkv" title="720p" type="video\/mp4">\r\n<\/video><\/pre>\n\t\t\t<\/div>\n
<script type="text\/javascript">\r\n var testVideo = fluidPlayer(\r\n 'video-ad-list',\r\n\r\n {\r\n vastOptions: {\r\n "adList" : [{\r\n "valign" : "bottom", \/\/only for In-Video\r\n "roll" : "preRoll",\r\n "vastTag" : "https:\/\/adservingdomain.com\/splash.php?idzone=0000000"\r\n }]\r\n }\r\n }\r\n );\r\n<\/script><\/pre>\n\t\t\t<\/div>\n<script type="text\/javascript">\r\n var testVideo = fluidPlayer(\r\n 'video-ad-list',\r\n\r\n {\r\n vastOptions: {\r\n "adList" : [{\r\n "valign" : "top", \/\/only for In-Video\r\n "roll" : "midRoll",\r\n "timer" : "8",\r\n "nonlinearDuration" : "5", \/\/only for In-Video\r\n "vastTag" : "https:\/\/adservingdomain.com\/splash.php?idzone=0000000"\r\n },\r\n {\r\n "valign" : "middle", \/\/only for In-Video\r\n "roll" : "midRoll",\r\n "timer" : "25%",\r\n "nonlinearDuration" : "5", \/\/only for In-Video\r\n "vastTag" : "https:\/\/adservingdomain.com\/splash.php?idzone=0000000"\r\n },\r\n {\r\n "roll" : "midRoll", \/\/ In-stream ad\r\n "timer" : "75%",\r\n "vastTag" : "https:\/\/adservingdomain.com\/splash.php?idzone=0000000"\r\n }]\r\n }\r\n }\r\n );\r\n<\/script><\/pre>\n\t\t\t<\/div>\n<script type="text\/javascript">\r\n var testVideo = fluidPlayer(\r\n 'video-ad-list',\r\n\r\n {\r\n vastOptions: {\r\n "adList" : [{\r\n "valign" : "bottom", \r\n "roll" : "onPauseRoll",\r\n "vastTag" : "https:\/\/adservingdomain.com\/splash.php?idzone=0000000"\r\n }]\r\n }\r\n }\r\n );\r\n<\/script><\/pre>\n\t\t\t<\/div>\n<script type="text\/javascript">\r\n var testVideo = fluidPlayer(\r\n 'video-ad-list',\r\n\r\n {\r\n vastOptions: {\r\n "adList" : [{\r\n "valign" : "top", \/\/only for In-Video\r\n "roll" : "postRoll",\r\n "vastTag" : "https:\/\/adservingdomain.com\/splash.php?idzone=0000000"\r\n }]\r\n }\r\n }\r\n );\r\n<\/script><\/pre>\n\t\t\t<\/div>\n<script type="text\/javascript">\r\n var testVideo = fluidPlayer(\r\n 'video-ad-list',\r\n\r\n {\r\n vastOptions: {\r\n "adList" : [\r\n \/\/preRoll\r\n {\r\n "vAlign" : "bottom", \/\/only for In-Video\r\n "roll" : "preRoll",\r\n "vastTag" :"https:\/\/adservingdomain.com\/splash.php?idzone=0000000"\r\n },\r\n \r\n \/\/midRoll\r\n {\r\n "valign" : "top", \/\/only for In-Video\r\n "roll" : "midRoll",\r\n "timer" : "8",\r\n "nonlinearDuration" : "5", \/\/only for In-Video\r\n "vastTag" : "https:\/\/adservingdomain.com\/splash.php?idzone=0000000"\r\n },\r\n {\r\n "roll" : "midRoll", \/\/ In-sream ad\r\n "timer" : "75%",\r\n "vastTag" : "https:\/\/adservingdomain.com\/splash.php?idzone=0000000"\r\n },\r\n \r\n \/\/onPauseRoll\r\n {\r\n "valign" : "bottom", \/\/only for In-Video\r\n "roll" : "onPauseRoll",\r\n "vastTag" : "https:\/\/adservingdomain.com\/splash.php?idzone=0000000"\r\n },\r\n \r\n \/\/postRoll\r\n {\r\n "valign" : "top", \/\/only for In-Video\r\n "roll" : "postRoll",\r\n "vastTag" : "https:\/\/adservingdomain.com\/splash.php?idzone=0000000"\r\n }\r\n ]\r\n }\r\n }\r\n );\r\n<\/script><\/pre>\n\t\t\t<\/div>\n<html>\r\n <head>\r\n <!-- Style -->\r\n <link rel="stylesheet" href="https:\/\/cdn.fluidplayer.com\/v2\/current\/fluidplayer.min.css" type="text\/css"\/>\r\n <!-- Main Fluid Player Core code -->\r\n <script src="https:\/\/cdn.fluidplayer.com\/v2\/current\/fluidplayer.min.js"><\/script>\r\n <\/head>\r\n <body>\r\n <!-- Video content -->\r\n <video id="video-ad-list" controls>\r\n <source src="https:\/\/cdn.fluidplayer.com\/videos\/valerian-720p.mkv" title="720p" type="video\/mp4">\r\n <\/video>\r\n \r\n <script type="text\/javascript">\r\n var testVideo = fluidPlayer(\r\n 'video-ad-list', \r\n {\r\n vastOptions: {\r\n "adList" : [\r\n \/\/preRoll\r\n {\r\n "vAlign" : "bottom", \/\/only for In-Video\r\n "roll" : "preRoll",\r\n "vastTag" :"https:\/\/adservingdomain.com\/splash.php?idzone=2947418"\r\n }\r\n ]\r\n }\r\n }\r\n );\r\n <\/script>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n\t\t\t<\/div>\n