IWC.com features a great deal of content which includes some amazing videos. Two great examples of these videos can be found on the Aquatimer family page. Galapagos is an eight and a half minute video highlighting IWC's longstanding relationship with the Charles Darwin Foundation and includes some really incredible cinematography. Don't miss the footage of iguanas foraging underwater. A little further down on the Aquatimer page is a short animation demonstrating the engineering behind the depth gauge within the Aquatimer Deep Two. It is an example of how IWC uses video to educate customers about their watches.

Galapagos video on the Aquatimer page

As the second installment of our series on building IWC.com, we're looking more closely at how this video is delivered to both desktop and mobile browsers.

We created a custom playback solution for the short rollover videos on the collection page and use Brightcove to manage all other videos on the site. In both cases, Flash is used whenever possible and HTML5 video is provided as a fallback. We lead with Flash because it provides a more reliable and higher quality video experience.

Video Rollovers

Each family of IWC watches is designed for a particular lifestyle and IWC has produced videos that capture the spirit of each. We decided to pull highlights from those videos and use them within the Collection page.

VIdeo rollovers on the collection page

The technical solution here is a relatively simple example of progressive enhancement. HTML5 video tags are included within the default markup of the page and SwfObject is used to replace those tags with a Flash player when the plugin is available. JavaScript is used to trigger either the Flash or HTML5 player when the user rolls over the video. On touch devices, a play button is available to trigger playback.

Brightcove

More conventional videos on the site and on IWC's Facebook page are handled using Brightcove's Express product. Brightcove provides easy to use tools for online video, including: a CMS for managing videos and metadata, the ability to transcode videos at multiple bitrates, customizable Flash and HTML5 players, and detailed analytics. For us, it was much preferred to leverage their expertise rather than build and maintain these tools ourselves.

Within the Brighcove tools, we configured multiple video resolutions for different bitrates and configured two players (one for the site and a second for Facebook). Now, IWC site editors are able to upload and manage new videos that are automatically encoded to our specifications and available for use within the site.

It is worth noting that we are not taking advantage of all the features that Brightcove offers. For a full description of the Brightcove service, please refer to their site.

Player Integration

The players included in the Brightcove Express product can be styled with custom colors, but they lack the full customization offered by their Professional and Enterprise packages. This worked fine for the design of IWC.com as we only needed a simple player that could be wrapped with additional elements to integrate it into the site experience.

The Galapagos video is a great example of this integration. Before the video is played, a custom 'poster' is presented. Here, an optional title and subtitle are added to the conventional frame of video. When the video is played, this poster is hidden and replaced with the Brightcove video player. Furthermore, the rest of the page is dimmed so that the video is center stage.

Video poster (on left) and Video playback (on right)

Integration for HTML5 video is a bit different. Currently Brightcove's HTML5 player is in early release and their player API is not yet available. This API is needed for the integration mentioned above, so in cases where Flash is not available, we immediately hide our poster and use the poster frame and playback button provided by Brightcove's player. This is a reasonable tradeoff and as Brightcove adds API features to the HTML5 player, we will be able to bring the experience into alignment with the Flash player experience.

The standard Brightcove player integration can be seen on the IWC at SIHH page on Facebook. There, we use the standard Brightcove JavaSctipt within a Facebook iFrame application.

Video Details

Because Brightcove leads with Flash whenever possible, they presently only need to make video available in VP6 (Flash only) and H.264 (Flash and Mobile) formats. As HTML5 video continues to mature and browsers implement their codecs of choice, Brightcove will need to support more formats to remain a viable solution. For now, we are using H.264 exclusively with an MP4 wrapper and are encoding the streams using 2 pass VBR encoding at up to six different bitrates (depending on the quality of the source file uploaded). The Brightcove system manages all encoding, CDN integration, device detection and runtime bitrate selection.

HTML5 video is a work in progress

IWC.com is the first project Odopod has worked on that widely uses HTML5 video and the process has confirmed for me that HTML5 video is not yet ready to be relied on exclusively. Our experience has been that Flash loads and buffers video more consistently and provides smoother playback with fewer unexpected stops. Additionally, we've noticed issues with being able to start playback when multiple videos are embedded on the same page. If you have difficulty playing IWC videos on your iOS device, please know that we are aware of this issue, have reproduced the issue outside of the IWC site, and are working to determine an appropriate workaround.

What's next?

As with the first article in this series, we'll do our best to answer questions raised in the comments below and encourage you to let us know if there is something particular you'd like to hear about in upcoming posts.