We’re going to create a simple video player that can be used as part of a HTML5 ad. We’re basing this on my HTML5 ad template, a WebPack repo that takes care of…

compiling TypeScript and SASS to Javascript and CSS
inlining the Javascript and CSS within the ad’s HTML
packaging it up as a zip ready for upload to an ad server

So go ahead and clone this repo before we get started.

The HTML⌗

Let’s start by putting some basic HTML inside our body tag.

<div class="video-container">
    <a id="video-link" href="about:blank" target="_blank">
        <video id="video-player" width="300" height="250" autoplay muted>
            <source src="video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
        </video>
    </a>
</div>

We create a container to hold everything. We have an anchor tag inside that, and a video element inside that.

Our anchor tag contains the href “about:blank” as our Javascript will eventually replace this with the click URL supplied by the ad server. We could use a fallback URL for our ad campaign here as well, or a particular URL that we can monitor for poorly configured ads that aren’t able to get an actual click URL. We also have target set to “_blank” to open in new tab.

Our video element had a width and height set on it, which should correspond to the video itself, and the size of the ad unit that we’re targeting. It’s customiary to also modify the meta element in the head that defines the ad dimensions…

<meta name="ad.size" content="width=300,height=250">

Our video element has the “autoplay” attribute set, so the video will start playing once loaded. We also need to include the “muted” attribute here as well, as browsers will not autoplay a video unless it is muted.

Our source inside the video is pointing to “video.mp4”. Drop a video file into the “src” directory so it can be found.

The Styling⌗

We’ll keep our styling very basic for the moment, but giving us what we need to expand later. We’ll set the container positioning to relative and give it a fixed width and height. And we’ll set the anchor tag inside it to block display and be absolutely positioned. This will allow us to eventually overlay some controls over the video. Add this to “src/style.scss”.

.video-container {
    position: relative;
    height: 250px;
    width: 300px;

    > a {
        display: block;
        position: absolute;
    }
}

The Javascript⌗

We already have a skeleton TypeScript file (“src/main.ts”) that is import our stylesheet and retrieving the click tag. When a HTML ad is served from an ad server, it will be called with a “clickTag” query parameter. It’s our script’s responsibility to retrieve that and to add to the clickable elements within the ad. The template has alreay done part of this for us…

const clickTag = (new URLSearchParams(window.location.search)).get('clickTag') as string;

.. so we need to retrieve our anchor element and set the “href” attribute to the clickTag URL.

const videoLink = document.getElementById('video-link') as HTMLAnchorElement;

videoLink.href = clickTag;

First Build⌗

We can now run npx webpack, which will pull everything we’ve done so far together. In the “dist” directory, we can now see “index.html” which is the main part of our ad and our video files (with a hash for the filename). We can open this index.html file in the browser to check that everything is working OK. You’ll notice that there’s also a “package.zip” file, which is “index.html” and video asset all zipped up and ready for the ad server.

Creating a HTML5 Video Ad Player

The HTML⌗

The Styling⌗

The Javascript⌗

First Build⌗