Fluid Player Masterclass #2: How to add ad zones

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 monetize your video content through Fluid Player.

The In-Video (VAST) format allows publishers to have one or multiple ads displayed along a video’s timeline within Fluid Player.

Here is a full list of the JavaScript code parameters:

• adList: This will allow you to set up one or multiple VastTags. (Please note the VAST tag XML response Content-Type must be either application/xml or text/xml).
• roll (mandatory): This is used to set the timeline position of Pre-Roll, Mid-Roll, OnPause, Post-Roll.
• vastTag (mandatory): Ensure that you set it with the url of the VAST XML (Please find the supported tags/attributes here vastLinear.xml).
• timer (only for mid-roll): This schedules when the ad(s) play either after the specified number of seconds or after a certain percentage of the video content has been viewed.
• nonLinearDuration (only for nonLinear, optional): The number of seconds until the nonLinear Ad will be shown. If this is not set, the in-video ad will be displayed until the user clicks close [x] or the ad will be displayed until the video ends.\

Resources

The following code is where the Fluid Player resources are placed:

1. First, add this code within the <head> tag:
3. <!– Style –>
4. <link rel=“stylesheet” href=“https://cdn.fluidplayer.com/v2/current/fluidplayer.min.css" (opens in a new tab) type=“text/css”/>
5. <!– Main Fluid Player Core code –>
6. <script src=“https://cdn.fluidplayer.com/v2/current/fluidplayer.min.js" (opens in a new tab)></script>
10. <!– Style –>
11. <link rel=“stylesheet” href=“https://cdn.fluidplayer.com/v2/current/fluidplayer.min.css" (opens in a new tab) type=“text/css”/>
12. <!– Main Fluid Player Core code –>
13. <script src=“https://cdn.fluidplayer.com/v2/current/fluidplayer.min.js" (opens in a new tab)></script>
17. Then add this code within the <body> tag
19. //Video content
20. <video id=“video-ad-list” controls>
21. <source src=“https://cdn.fluidplayer.com/videos/valerian-720p.mkv" (opens in a new tab) title=“720p” type=“video/mp4”>
22. </video>

Ad Format code

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 </video> tag.

Pre-Roll

This is the video ad list including the pre-Roll VAST file.

1. <script type=“text/javascript”>
2. var testVideo = fluidPlayer(
3. ‘video-ad-list’,
5. {
6. vastOptions: {
7. “adList” : [{
8. “valign” : “bottom”, //only for In-Video
9. “roll” : “preRoll”,
10. “vastTag” : “https://adservingdomain.com/splash.php?idzone=0000000" (opens in a new tab)
11. }]
12. }
13. }
14. );
15. </script>

Mid-Roll

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 “timer” : “8” 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 “timer” : “25%”

1. <script type=“text/javascript”>
2. var testVideo = fluidPlayer(
3. ‘video-ad-list’,
5. {
6. vastOptions: {
7. “adList” : [{
8. “valign” : “top”, //only for In-Video
9. “roll” : “midRoll”,
10. “timer” : “8”,
11. “nonlinearDuration” : “5”, //only for In-Video
12. “vastTag” : “https://adservingdomain.com/splash.php?idzone=0000000" (opens in a new tab)
13. },
14. {
15. “valign” : “middle”, //only for In-Video
16. “roll” : “midRoll”,
17. “timer” : “25%”,
18. “nonlinearDuration” : “5”, //only for In-Video
19. “vastTag” : “https://adservingdomain.com/splash.php?idzone=0000000" (opens in a new tab)
20. },
21. {
22. “roll” : “midRoll”, // In-stream ad
23. “timer” : “75%”,
24. “vastTag” : “https://adservingdomain.com/splash.php?idzone=0000000" (opens in a new tab)
25. }]
26. }
27. }
28. );
29. </script>

On-Pause

This is the video ad list that includes the On-Pause option.

1. <script type=“text/javascript”>
2. var testVideo = fluidPlayer(
3. ‘video-ad-list’,
5. {
6. vastOptions: {
7. “adList” : [{
8. “valign” : “bottom”,
9. “roll” : “onPauseRoll”,
10. “vastTag” : “https://adservingdomain.com/splash.php?idzone=0000000" (opens in a new tab)
11. }]
12. }
13. }
14. );
15. </script>

Post-Roll

This is the video ad list that includes the Post-Roll option.

1. <script type=“text/javascript”>
2. var testVideo = fluidPlayer(
3. ‘video-ad-list’,
5. {
6. vastOptions: {
7. “adList” : [{
8. “valign” : “top”, //only for In-Video
9. “roll” : “postRoll”,
10. “vastTag” : “https://adservingdomain.com/splash.php?idzone=0000000" (opens in a new tab)
11. }]
12. }
13. }
14. );
15. </script>

Using all of the ad formats together

Here is the full list of all the video ad options above grouped as one piece of code:

1. <script type=“text/javascript”>
2. var testVideo = fluidPlayer(
3. ‘video-ad-list’,
5. {
6. vastOptions: {
7. “adList” : [
8. //preRoll
9. {
10. “vAlign” : “bottom”, //only for In-Video
11. “roll” : “preRoll”,
12. “vastTag” :“https://adservingdomain.com/splash.php?idzone=0000000" (opens in a new tab)
13. },
15. //midRoll
16. {
17. “valign” : “top”, //only for In-Video
18. “roll” : “midRoll”,
19. “timer” : “8”,
20. “nonlinearDuration” : “5”, //only for In-Video
21. “vastTag” : “https://adservingdomain.com/splash.php?idzone=0000000" (opens in a new tab)
22. },
23. {
24. “roll” : “midRoll”, // In-sream ad
25. “timer” : “75%”,
26. “vastTag” : “https://adservingdomain.com/splash.php?idzone=0000000" (opens in a new tab)
27. },
29. //onPauseRoll
30. {
31. “valign” : “bottom”, //only for In-Video
32. “roll” : “onPauseRoll”,
33. “vastTag” : “https://adservingdomain.com/splash.php?idzone=0000000" (opens in a new tab)
34. },
36. //postRoll
37. {
38. “valign” : “top”, //only for In-Video
39. “roll” : “postRoll”,
40. “vastTag” : “https://adservingdomain.com/splash.php?idzone=0000000" (opens in a new tab)
41. }
42. ]
43. }
44. }
45. );
46. </script>

In this final example this is how the complete code should look for the insertion of one Pre-Roll ad:

1. <html>
2. <head>
3. <!– Style –>
4. <link rel=“stylesheet” href=“https://cdn.fluidplayer.com/v2/current/fluidplayer.min.css" (opens in a new tab) type=“text/css”/>
5. <!– Main Fluid Player Core code –>
6. <script src=“https://cdn.fluidplayer.com/v2/current/fluidplayer.min.js" (opens in a new tab)></script>
7. </head>
8. <body>
9. <!– Video content –>
10. <video id=“video-ad-list” controls>
11. <source src=“https://cdn.fluidplayer.com/videos/valerian-720p.mkv" (opens in a new tab) title=“720p” type=“video/mp4”>
12. </video>
14. <script type=“text/javascript”>
15. var testVideo = fluidPlayer(
16. ‘video-ad-list’,
17. {
18. vastOptions: {
19. “adList” : [
20. //preRoll
21. {
22. “vAlign” : “bottom”, //only for In-Video
23. “roll” : “preRoll”,
24. “vastTag” :“https://adservingdomain.com/splash.php?idzone=2947418" (opens in a new tab)
25. }
26. ]
27. }
28. }
29. );
30. </script>
31. </body>
32. </html>

For more information please visit Fluid Player’s documentation page (opens in a new tab).

Fluid Player Community

Fluid Player is open source, so join the community and see what new features developers are creating for Fluid Player on GitHub (opens in a new tab).