HTML and CSS Reference
So, you now know how much work it takes to encode and transcode videos on the Web; I'll now talk about actual
delivering video on the Web. One of the biggest concerns with HTML5 video is around its delivery. Traditionally, Flash
ads would pull video off a streaming server to avoid incurring any of the video's file size in the ad's overall k-weight.
However, for HTML5, we are currently limited with a standard streaming solution, and because of this, most HTML5
video delivered over desktop and mobile still use progressive download over HTTP as the primary delivery method.
While this method is widely supported across all browsers, it does not avoid that this will undoubtedly increase the
ad's weight and impact a user's experience with longer “wait” times. This also gets increasingly worse when video
bitrates increase for larger dimension and higher-quality video assets (HD).
In the massive world of video creation and delivery, it's ultimately about defining the target user base that
you want to reach (and in advertising it's typically everyone), the resources you have at your disposable, and client
turnaround times. Operationally, converting all the different flavors of video can be a very time-consuming task since
browsers and devices require different codecs and formats. The following sections will help you understand the
current problems in the space, how to work around them, and how to effectively deliver your content in
HTML5-compliant video players.
Delivery specifications through video ad networks and publishers can be tricky. Every publisher and network
will have their own specifications as far as what they expect, which adds to the confusion in the space. These
specifications are typically in place to ensure a light footprint to their end users and to ensure video content has the
furthest reach while also matching the publisher's video content as closely as possible. The following sections cover
the two ways video is delivered on the Web today.
Progressive video delivery is when a file comes down from one server and is stored on the client for playback.
Progressive delivery is a pretty common form of video transfer because it's accepted across all browsers and devices,
and even major sites like YouTube use this method daily. Progressive can allow a user to begin watching a video
before it fully downloads, so the wait time is significantly reduced, but it also comes at a significant cost since the
actual file is cached on the client. Progressive is typically served over the HTTP protocol, and since the actual asset is
stored on the client machine, the user could in theory save that asset for viewing at a later time. For advertising, this is
not a concern, but for premium long-form content, there is little to no protection in this matter, which makes this form
of delivery less than ideal for content owners. Listing 7-3 shows an example HTML5 video tag; pointing to a video
asset such as MP4, WebM, or OGG, you see that the video will be progressively downloaded.
Listing 7-3. HTML5 Progressive Video Example
As you can see, I'm pulling an MP4 video asset off the server at someSite.com through the HTML5 video's source.
If you were to insert this line of code into your text editor, save it as an .html file, and open it in a browser, you'd be
able to see the video autoplay. (Keep in mind that you'll need to update your video src attribute to point to where an
actual video is present.). While this approach is less than ideal in advertising situations for keeping a light footprint,
the specification set by the IAB is 2.2MB for video file size. For more information on the rich media guidelines, visit
Next I'll talk about the second form of video delivery over the Web. Streaming delivery is when the video asset is
served off a streaming server and the video is presented to the user in real time upon user request. Since there is
no storing of the asset on the client's machine, streaming is ideal for premium content protection as well as getting
around publisher file size limitations. Publishers and ad servers may require the use of streaming video since it will