Concert’s Improved Video Experience

We’re very excited to share the work we’ve done to ensure our Concert marketplace video upholds — and even exceeds — the highest advertising standards. As part of our commitment to making ads better on the internet, this work elevates the user experience in Concert’s video advertising by adding new and improved controls, decreasing load times and ensuring advertisers get what they pay for — namely, that no video plays out of view.

We are open-sourcing this work so that everyone can have access to these tools. Vox Media has always believed in creating solutions to industry problems and championing ethical advertising. By open-sourcing our work, we hope to help other publishers, developer teams, and advertisers make internet advertising better for all.

Our History with Video Ads

We’ve been serving video ads for a long time at Vox Media. In the past couple of years we started to support the Video Ad Serving Template (VAST) spec for our premium large-format ads. VAST was designed by the Internet Advertising Bureau (IAB) with input from the advertising industry to support video ads - but mostly as preroll, those 5-30 second advertisements that play before video content begins. Initially, we used a third-party library from our ad server vendor to support VAST in our premium large-format ads.

Unfortunately, this video player added multiple downloads and increased our file sizes, slowing down our advertising experience. This video player also disregarded and replaced the seamless player experience we had designed for self-hosted videos. The VAST spec is most often used to display pre-roll, mid-roll, or post-roll ads — none of which we use for current advertising formats. Consequently, it was difficult to ensure the video paused when a user scrolls past an ad. This is something we are serious about in the Concert marketplace. We don’t want to consume a user’s device resources (battery and data) on unseen videos nor do we want to count unseen video plays.

Introducing the Concert Vast library

Over the past few months, we set out to write a small, modern, standalone JavaScript library using modern tools (promises, ES6, and async/await). This library has been fully tested with Jest. Our goal was to allow self-hosted HLS videos or VAST-supplied videos to load into the player in identical ways. This way we can consistently use the video player our product team has designed and iterated over the last couple of years by unifying the controls and user experience across all of our videos.

Because we are delivering a premium display video advertising experience – not just a pre-roll before an editorial video – we needed a library that supported Inline VAST as the primary video. We didn’t find one, so we built it and are happy to share Concert-Vast, an open-source library under the Apache 2.0 license.

Structure and Limitations

Concert Vast is an opinionated, limited subset of the full VAST spec (PDF). It is built for our needs: it only supports Inline VAST as either pre-roll or the primary video. Out of the box, it comes with two high-level applications: one for native <video> elements, and one for working with Video.js. If you want to dive in, you can interact with the full VAST response, too.

The library is architected along two conceptual avenues: Vast Elements, mapping to VAST’s XML structures, and Applications, for integrations into different video players.

Vast Elements

Vast Elements map to the supported VAST document structure, namely: Clickthrough, Impression Tracking, Media Files, and Wrapper. For those looking to expand the library’s functionality, there is a README in src/lib/vast_elements that explains how to add support for more Vast Elements.

Applications

Applications map roughly to implementations for specific video players. For example, we are only running <video> elements and Video.js-based players in our advertisements. We’ve taken great care to make sure our video player loads quickly, has beautiful controls, and pauses out of the viewport. The Applications allow for per-player recipes and are extensible to be replicated for any player our team might implement. Notably, and different from other VAST implementations we’ve found, this will set up the VAST video source as the source for your own player, preserving your user experience.

Here is an example of how to use this library

Speed!

In addition to getting a better visual experience, this has sped up our VAST video loading time by roughly 600%. This library reduced the code size of our video library by 300kb and reduced the number of DNS lookups and third-party downloads. In practice, we are seeing VAST videos start playing roughly 6x faster.

You Too!

We are open sourcing this work with the goal of helping others ensure a better user and advertiser experience across their own sites. We constantly strive to be a positive force in the world of digital advertising and hope we can help others to do the same.