In this tutorial, we’ll delve into the implementation of HTML5 VAST pre-roll video ads with a skip ad button. VAST, or Video Ad Serving Template, is a template that standardizes the communication requirements between video players and ad servers. This feature is particularly useful for video content providers who want to monetize their content with video ads. You can view a demo here and download the code here.
Understanding the HTML Structure
We’ll start with the HTML structure. In the video tag, we’ve added an ads attribute, to which we pass an object containing the details of the ad. This object has two major fields:
servers: Pass the VAST XML file URL to theapiAddresskey.schedule: Passpre-rollto thepositionkey, which captures the ad URL and plays it before the actual video.
There are also two additional scheduling options: post-roll (shows the ad at the end of the video) and mid-roll (shows the ad in the middle of the video).
Understanding the XML File Structure
The XML file contains the ad structure for pre-roll, post-roll, and mid-roll. Each ad has a version, a title, a duration, and a media file URL. The startTime field in the mid-roll ad defines when the ad should play during the actual video.
Implementing the Skip Ad Feature
We’ve used the html5videovastplugin.js plugin to control the actual video with the ad. We’ve also modified this plugin to support the skip ad button functionality. When the skip ad button is clicked, the actual video starts to play automatically.
By following this tutorial, you’ve learned how to implement HTML5 VAST pre-roll video ads with a skip ad feature. This is a valuable skill for creating dynamic and interactive web applications.
