In the first article in this series, content and production considerations for successful videos were discussed. In this post I write about the technical aspects of integrating video into your website.

File Format, Codec, Resolution and Quality
You just finished shooting and editing your new video. It looks great and you are excited about placing it on your website. But before you pay your producer's last invoice, make sure the file you are receiving is in the correct format.

A video file contains different tracks: video, audio, subtitles, metadata, etc. The file format, technically known as digital container, defines how the different tracks are bundled together. There are several file formats, each of them developed by different companies, and they are normally only supported by specific software and devices. Among the most popular and relevant for this article are QuickTime (.mov extension, developed by Apple), Windows Media Video (.wmv extension, developed by Microsoft), Flash Video (.flv extension, developed by Adobe), and MPEG-4 (.mp4 extension, developed by ISO).

Most likely, you will receive a .mov (QuickTime) or .mp4 file from your video producer. If you don't, ask for a copy in one of these formats. They are the most widely supported when it comes to transcoding (the conversion of your file into other formats and quality levels).

Inside the video file, each of the tracks comes in its own format as well. This is known as the codec, which stands for coder-decoder. The codec specifies how the actual images and sounds are converted into 1's and 0's, and how to read them back for playback. Similarly to file formats, there are many different codecs, but in recent years the H.264 codec (the codec of MP4) has become the most popular video codec and MP3 the most popular audio codec (they are both ISO standards). Make sure your video files use the H.264 and MP3 codecs.

In a high-definition world you should expect no less than full HD resolution in your video file. The resolution is the number of horizontal and vertical pixels in the video image. The higher the resolution, the more detail and sharpness your image will have. Full high definition (Full HD) has 1920x1080 pixels, high definition (HD) has 1280x720 pixels, and standard definition (SD) has 640x480 pixels. Your video producer should provide you a Full HD video. Downsampling from full HD to lower resolutions can be done without affecting the quality, but stretching a low resolution video into Full HD produces a blurry or pixelated image.

The final aspect to consider when receiving your video file is the quality. The video file should have H.264 Extended Profile (XP) or better, H.264 level 4 or higher, and a bitrate of 7Mbps or higher. These settings will ensure you get exceptional quality.

Hosting, Transcoding and Streaming
Now that you have your video file, you have to place it on your website. Your initial impulse may be to simply upload the video files to your website server. However, in most cases that is a bad idea because it won't provide the best user experience for a diverse audience that will be viewing your video on different devices, screen sizes and through a variety of connection speeds.

A 90-second video can easily be hundreds of times larger than a regular web page. This means that placing a video on your website server can eat your server bandwidth and slow down your site for all visitors. To provide some perspective on video file size and required bandwidth as compared to images, documents and audio - over half of all Internet traffic in North America is generated by video streaming from Netflix and YouTube.

In this age of smartphones and tablets, many of your visitors will be watching your video on small screens using a slower connection. If you only provide a full HD video file, your visitors will be waiting for a very long time for the video to load and start playing. And, the playback may be interrupted to allow buffering.

Your HD video files need to be transcoded into additional files with lower resolutions and quality levels. By doing this, you can serve the appropriate video file to match the user's screen size and connection speed. You also need to have streaming technology, which feeds the video data at the right speed, changes the video quality on the fly if the connection gets congested or becomes faster, and allows skipping to other points in the video. Finally, you should have a CDN (content delivery network) available to distribute geographically copies of your video files to ensure quick load times and uninterrupted playback.

Sound complicated? It is! The solution: use a video hosting service to store and deliver your videos. There are both free and paid services. The most popular free service is YouTube and among the paid ones, Brightcove. They both take care of transcoding your video file and create multiple versions of your video in lower resolution and quality. They both host your video files and provide top of the line streaming and CDN.

So, why would you pay for a video hosting service? There are some cases in which you don't want to use a free service:

• Branding: most free services require a watermark of their logo to be included in the video player. Normally this only shows for a few seconds or when the user hovers a cursor over the player. If this is unacceptable you need to go with the paid service.
• Styling and functionality: most free services force the use of their player. A paid service will allow you to have control over the look, feel, and functionality of the video player.
• Restricted access: free services display videos to the public on their own sites and may allow for sharing and embedding on any website. If you want to provide access to the video content only to authorized users (e.g. clients, subscribers, etc.) you need to use a paid service where you can control access to the video.
• Monetization: with free services, you don't have complete control of pre- or post-roll advertising on your video. If you want to sell your own advertising and control it, you will need to go with the paid service.
• Link to your site: sharing and embedding of videos from free services normally link back to the video page on the website of the service provider, not to your website. To maximize traffic to your website from your video, use a paid service.

Once you have selected your video hosting and streaming service, uploading your videos should be straight forward. Remember to enter a descriptive title, ample description, and tags. After your video files have been uploaded, tagged and categorized, embedding your videos onto your website is normally as simple as copying and pasting a short HTML code.

Sharing
Your video is now on your website, but you want to make sure that as many people as possible view it. If your video is hosted in a free service like YouTube, you can gain exposure directly from visitor traffic on that site. (YouTube is the second largest search engine after Google).

But what happens when someone shares the page on your website where your video is embedded? After investing in your video production, you want to attract viewers and make sure they watch the video it even if they don't land on your website. In most cases pages with embedded videos look like this in Facebook:

This is a simple thumbnail and link to the page. Instead, you want to be able to have the video player embedded on Facebook, like in the following example:

To achieve this, make sure your website page includes the necessary Open Graph meta tags: small pieces of information added to the code of the page that Facebook and other social media sites use to embed thumbnails and video players.

Tracking
I imagine that after all this effort, you want to know how many people are actually watching your video. Both free and paid hosting services provide various levels of tracking for video viewing. However, for the sake of simplicity you may want to consider enabling tracking of video playback activity within your Google Analytics account in order to get all of your site related information in one place. This requires some Javascript programming that sends the event information from your website to Google Analytics.

In the case of free video services you may not be able to capture activity that happens outside of your website through your Google Analytics account. With the paid services there are mechanisms to allow that data collection.

Summary

• Make sure you get the appropriate video file from your producer.
• Select a video hosting service that fits your needs.
• Add open graph meta tags to your pages for optimal sharing.
• Don't forget about tracking!

References

• MP4 http://en.wikipedia.org/wiki/MP4
• Apple H.264 Technology Brief http://www.apple.com/quicktime/pdf/H264_Technology_Brief.pdf
• H.264 http://en.wikipedia.org/wiki/H.264
• Comparison of Video Codecs http://en.wikipedia.org/wiki/Comparison_of_video_codecs
• Comparison of Container Formats http://en.wikipedia.org/wiki/Comparison_of_container_formats
• Adaptative Bitrate Streaming http://en.wikipedia.org/wiki/Adaptive_bitrate_streaming
• Netflix + YouTube is more than Half of Internet the traffic in North America: http://www.thewire.com/technology/2013/05/netflix-youtube-traffic/65210/