HTML5 Media - HTML5 Advertising - page 150

host all of the different asset versions, and if you're talking about multibitrate streaming, you have even more to create
(more on these topics later). A great link to visit is http://caniuse.com/video , which can better help you develop
video across browsers.
Content Creation
Creative agencies are shooting video exclusively for the various screens. No longer do you see repurposed broadcast
television spots in online ad units. They'll typically do a roadblock that takes over a good portion of the user's screen
with full interactive video and sound. Others specifically produce the spot for the desktop and shoot their actors in an
environment that would seamlessly work on the various screens. In any event, digital advertising is all about making
an impact creatively, and most impactful ads have video in their arsenal. Now that you have an idea of what goes into
building an HTML5 video element, the really awesome part comes when you integrate the video element alongside
other emerging web technologies like the canvas, SVG, and CSS3. Keeping this thought in mind, you can create some
amazingly rich features and graphics in your next online campaign. However, before you head down that path, there
are a few things you'll want to use with the video element as well as a few you'll want to avoid. Let's take a look at
each, starting with the things you should use.
What You Should Use
A poster image is the static image (or an animated GIF) that is initially viewable before video playback begins. I like
to think of this as your CTA message to entice the user to click and play your video content. The poster image isn't a
required attribute, but in terms of advertising, you should use it so that if your user never clicks your video, they'll still
get a static (or animated) image or message.
Next are controls; controls are the play/pause controls, mute/unmute, the scrubber bar, the current time
indicator (CTI), and full-screen icons that your browser natively uses with the video tag. Adding controls to your video
is simple, as follows:
<video src="sample.mp4" controls></video>
If you are using video for anything other than animation purposes, you should make sure your controls are
turned on. Don't worry if you dislike the native controls the browser uses; you can always skin them via CSS and add
their functionality via JavaScript to control the video. However, in the event you choose to use CSS and JavaScript for
your controls, be sure to remove the controls attribute in the video tag. Because video is now a first-class citizen and
part of the DOM, you can also style it with the latest CSS3 properties such as reflections, masks, gradients, transforms,
transitions, and animations (assuming your browser supports them). You can even use SVG and SMIL for animations
on top of the video element. Perhaps you want to blur the video using SVG filters while it's animating across the
screen or have the video element swing open like a gate door on a fence. There are so many tips and tricks you can
implement to have your video perform better and more uniquely in your next campaign.
What You Shouldn't Use
When using video in your next campaign, you should almost never use the loop attribute, which plays your video over
and over again. This would create a poor user experience and have the publisher or ad-serving company red flag it
before the campaign ever going live.
Second is the use and reliance on autoplay. Autoplay is a great feature for in-banner forced video that acts like
animation, but some mobile devices that leverage a cell network or data plan, such as the Apple iPad and iPhone,
restrict the autoplay attribute from working in order to protect customers' data plans from exceeding the limits for
content they didn't even choose to view. If you do in fact use autoplay video within your desktop advertisements,