HTML5 Media - HTML5 Advertising - page 151

be sure to have the audio off by default. No one wants to go to a site to read or watch content and have advertising
blasting with full sound. That's a poor experience for every user!
Another thing to be mindful of is removing small type in video. If you don't do this, your video's copy (depending
on browser zoom level) can look pretty poor and create unwanted text aliasing.
Also, if you're animating the video element, make every attempt to keep the video player on a whole pixel. This
will again eliminate any unwanted aliasing to the video player.
Finally, keep a close eye on CPU and GPU loads for larger data rate videos. In fact, if you're noticing the browser
slugging during playback, chances are the system resources are being taxed too much for the video you're playing
back. My suggestion with this is to optimize your video further (more on that later).
In the end, it's really up to the tools you use when creating your online video content. Keep in mind that HTML5
video is just a way of playing the video content inside the browser without a plug-in. How you create that creative
content is entirely up to you and the requirements of the campaign. I suggest using some of the following tools. For
high-end motion graphics and keying out footage shot on a green/blue-screen, I like Adobe's After Effects
( http://adobe.com/products/aftereffects.html ) . For 3D needs, I use Maxon's Cinema 4D ( http://maxon.net/
products/cinema-4d-studio ) . Using both together can create amazing videos that can be deployed to any screen.
Using tools like Adobe's Media Encoder ( http://adobe.com/products/mediaencoder.html ), Apple's QuickTime
Pro ( http://apple.com/us/product/D3380Z/A/quicktime-7-pro-for-mac-os-x ) , and others gives designers and
developers robust features, including setting compression, size, frame rate, and others, for tweaking their video
content to their liking as well as publisher requirements.
Encoding and Transcoding
Now that you understand the content creation part of the video asset as well as the basic building blocks for the
HTML5 video tag, you can move into the complex world of video encoding and transcoding. In short, encoding is
the initial compression technique used for video, usually from a postproduction video house, and transcoding is
transferring a video from one format to another.
Encoding
In the Flash days of online advertising, it was pretty common to take a raw MOV or AVI file and transcode it to an
FLV video, suitable for playback within a SWF. For initial encoding tasks, this will often be a lossless compression,
which means the core fidelity of the file is preserved within the output file. This lossless technique is more or less for
transferring the file when bandwidth limitations are not a concern, and the output is ideal for archiving or playback
truest to the source video.
Transcoding
Transcoding, on the other hand, is commonly a lossy compression technique. Lossy is typically used when you are
generating a video file for playback over the Web, usually for transferring over the HTTP or RTMP protocol. Lossy
does not maintain the quality that the original source video file had; it sacrifices some of the overall video quality for a
much smaller file size. Really good compression techniques can be used to maintain a really great-quality picture at a
very small footprint as well, and I'll discuss some of them in the following sections.
Encoding and transcoding video are where most of the time is spent with video on the Web, and you'll learn
quickly that video on the Web is only as good as the source file you use for the transcode. We call this the “garbage in,
garbage out” rule. Basically, you cannot enhance the quality and playback of video that has been severely compressed
or altered poorly. Video compression is much like image compression; once the data is lost in the file, it's gone for
good! Encoding/transcoding video for web delivery is a science as much as it is an art. Seriously, a full book could be
written just on the techniques, theory, and practice behind them (and many have been). This section is not geared
to make you a compression expert but to give you a high-level strategy when working with video in your next HTML5
campaign. Let's take a look at some of the settings you can tweak to your advantage when working with your videos.