By Juliana Henderson on 2012-11-30
This Thanksgiving, Fragment joined small ad agency of the year Baldwin& to develop a very unique web experience. The idea was to create an seamless full-screen, interactive, video-driven site to be the home and final resting place of a fictional Thanksgiving character aptly named "The Thanksgiver."
You can visit him here: http://TheThanksgiver.com
The site, which would require heavy use of resizable high-definition video, seemed like a project fit for development in Flash. Initial ideation called for interactive elements/controls, hundreds of loadable video clips pulled at random or by unique ID, directed art and design for the entire interface, dynamic and animated text titles, some modern styling/visual effects, and a very friendly integration with Facebook's share function. Similar web applications are beautifully developed in flash and actionscript, offering a plethora of advantages and consistent experience to any flash-enabled browser (namely http://www.oldspicesavestheworld.com/). That is, of course, if your device supports flash.
This is where we decided to think differently.
Current methods of integrating the HTML 5
The truly remarkable part of it all is the efficiency and image quality retention of HTML5 video-ready compression codecs, but (in its current state) this is also the bane of developing and integrating it.
Much like the specificity of CSS3 prefixes, each major browser prefers a different file type and compression. Fortunately, the big five browsers can all be satisfied with just three different files for each video (just three?!). This can present a substantial hurdle in development when dealing with a large quantity of clips if you don't have the encoding automation and capacity of vimeo or the like. For those less familiar with HTML5 video, a great breakdown of compression and file type support by browser can be found here: http://diveintohtml5.info/video.html#what-works.
Essentially, we were looking to stretch the boundaries of front-end development in crafting an accessible, interactive, and seamless video experience on the web without the use of plugins or browser add-ons.
Some major features of the site include the following:
keyframes declarations, transition property, and the transform property.
Since the entire site would be built around displaying 720p video, mitigating load times and delays was a top priority. After process mapping and strategizing, we began building functionality that would handle fetching, staging and transitioning video between two
video DOM elements.
Much like an
img element, the source(s) of
video can be changed via jQuery, while the DOM element itself remains relatively unaffected. To perform automatic AJAX fetching of new video information from the database, an interval was set to query the video's currentTime (playhead position) and when it reached 10% of the duration of the video, a new video clip was fetched and staged in the inactive
video container and a new interval was created to listen on that video element once it began playing.
The original site experience design included automatic crossfades to loopable interstitial clips. The function to execute this was largely the same? an interval was set on the loaded video clip (A) that, at the specified playhead position, would load the second video clip (B) in the lower z-Indexed
video container, .hide() it, z-index it above the currently playing video (A) and before the end of clip (A), .play() clip (B) and .fadeIn(). The result was a 1-second crossfade transition between clips?blending them seamlessly. .load() was called on the video clip being staged behind the scenes near the beginning of the currently playing clip, thus allowing it to preload in the background while the active clip is played.
Using this method, the site can continuously load video new video clips by slotting them in
video containers in an alternating pattern.
meta elements when the Facebook bot scraped the site. Furthermore, as each video plays, the open graph data on the page is replaced via jQuery and the 'Share this Thank' button is populated with a slug-type link. Thus, when sharing the link via the provided button, the Facebook preview is dynamically populated with the corresponding video's title, description and URL.
The next fun component of the site was generating dynamic titles of each thank video that fade and zoom in. As each clip was played, the reusable #titler element was populated with the 'thank' title, given a CSS3 transition-duration equal to 45% of the duration of the video itself (so the animation would finish approximately half way through the clip), and scaled down [transform: scale(0.4)] while still hidden.
After a brief delay, the #titler element was faded in slowly and a new transform: scale(1) property was declared to scale the #titler to its full proportions for the duration we previously set.
Note: the original animation began at scale(1) and ended at scale(2.5), but this yielded pixelated text since the text was originally rendered at its original size and then effectively 'zoomed' to a larger size. By declaring an original scale of 0.4 and scaling up to 1, we can maintain the text's visual integrity throughout the animation.
The project was a great fit for HTML5
video and jquery interactivity, but could have benefitted from a MVVM like knockout.js. If you're looking to dive into integrating HTML5
video, be sure to read up on file-type support, encoding specifications and device support for higher resolutions and bitrates. There's a lot of interactivity potential with such an accessible JS API and since
video elements are styleable with CSS as well, the possibilities are
endless stylish. As more features and attribute support is rolled out in browsers, I think we'll see a lot more use of HTML5 video in some fantastic installations.
For more information, I found these resources particularly helpful: