JW Player is a great tool for showing off your video and audio files on the web. In addition to playing media, many users are also monetizing their content with the help of the player’s advertising capabilities. While showing ads before, after, and during your content is great, thanks to the robustness of our API, there are ways to get creative.
Bring on the Ads!
As many developers know, the JW Player API is a wonderful tool for customizing actions, and embedding a player that can generate, or react to many different events. With its introduction in 6.5, we have also allowed publishers to better control their advertising through our Ads API. Now with 6.6, we support APIs for both major advertising types: VAST, as well as Google IMA. In this tutorial, I’ll be teaching you how to set up a player that will start by itself, play an ad, and then remove itself from a web page once it’s finished. In addition, we can also track how much time is remaining until the ad completes. In total, this is an excellent way of displaying video ad content on top of non-video items. This is especially useful as an overlay for things like games.
When using any advertising, a video content file must be specified. In this example, we’ve used a small, blank 5KB MP4 file. We’ll also set up a basic video preroll VAST ad. I’m also going to go ahead and have the player autostart, hide our controls, and set our primary rendering to flash. This will accomplish our basic player setup.
When the page is loaded, the video advertisement will play automatically and without a progress bar. That’s great, but we would also like to make the player disappear immediately after our ad and without the blank file. Thankfully, this is easily accomplished with our API. Welcome onAdComplete() and remove()!
The Amazing Disappearing Player
To get our player to disappear, we need two things: An event listener and a player action. In our example, we will be listening to the player for our ad to complete, and then removing it once we detect this. The two lines of code we need to accomplish this are:
With this small block of code, once our advertisement completes, the player will be removed from the page. We would be complete with our player setup at this point, but there is one more thing…
The Final Countdown
When showing advertising before content, it’s usually a good idea to display an ad countdown. This will tell the user how much time until their ad finishes. We typically display this on the ad itself, but since we’re removing the control bar, we’ll have to put this information in manually. Luckily, again, our API makes a countdown possible. We’ll add a message about remaining time and change that message when our ad completes. For this, we can use onAdTime() and our old pal onAdComplete(). And here is an example of what our demo looks like, minus the autostart functionality and with the control bar present:
Thanks to our API and some simple coding, we now have a versatile video ad that we can place wherever we want. On top of that, our ad will work on all major browsers on mobile and desktop and across HTML5 and Flash. A link to the full demo described in this article is right here
It is also important to note that COPPA regulations prohibit tracking cookies of users under 13. In cases like this, you can use this ads player in conjunction with Ethan’s previous age gate blog post, here.
Thanks for reading! If you have any questions or comments, please feel free to leave them below.