Recently at uShip, we launched a new homepage as part of our “Design Language System” (DLS) initiative. The new homepage featured an animated “shipper” and “carrier” having a conversation. This is achieved through the use of a <video> tag, a feature proposed in 2007 by Opera, and iterated greatly throughout the following years. This blog will go through a brief history of the <video> feature, our previous homepage which utilized a video in its design, and the obstacles we came up against in our new homepage.
The Early Days
The video tag was first proposed by Opera, in the age when Flash was still king. Calling for video to become a first class denizen in their manifesto, they quickly ran into issues. The HTML5 Working Group wanted to have at least one high quality video format which all browsers could support. However, back then, there were no known codecs that could satisfy all the current browsers. To put it simply, universal browser compatibility was held back by patents and politics. Even Steve Jobs expressed concern over “patent pools” being assembled to go after “open sourced” codecs such as Theora. This is why we can’t have nice things, or perfect video on home pages.
Reassessing our Homepage
The previous version of the homepage was disjointed, touted advanced features that most users would not encounter, and did not provide a clear message of the uShip platform and brand. In a nutshell, users didn’t know what uShip was or how it could benefit them. The lack of focus in messaging and frankensteined messaging created confusion with our users.
Our old homepage had a full width video.
Through multiple rounds of concepts and explorations the visual design team landed on a message and visual style that would anchor the rest of the homepage: “Shippers meet Carriers. Carriers meet Shippers.”. A small looping video showing a carrier and shipper conversing with each other adds a personal touch.
Color Range Woes
So everything went well, right? Nope. Whenever opening the homepage in Internet Explorer/Edge, we were greeted with an abhorrent video.
We get signal. Gray screen turn on.
Notice the difference in the gray backgrounds? This didn’t happen for every single Edge user. It happened for Edge users whose video renderer did not support the Full color range of 0-255. In the video driver our developer machines use, the default color range is 16-235 (Limited). The “white” background for the video was rendering around 226. Changing nVidia’s color settings to be “Full” resulted in the background rendering at the intended white. This is a moot point, as we can’t control hardware color settings from the web! So, we know the issue, what are we to do?
Adapting
I brought an alternative to our design department; change the video’s background to be within the limited white range. The implications of this in relation to the site’s overall design was less desirable. There were some alternatives we could further explore (failing back to a gif for example), but with our deadline approaching, we needed to implement a solution.
Das Kode
First, we attempted to deliver WebM video. If the browser does not support WebM, we deliver MP4. If the browser does not support either format (which should not happen for our supported browsers), we deliver a message stating that the video is not supported on their current browser.
The actual code (nothing special):
<video autoplay loop autostart class=”homepage-video”>
<source src=”https://path/to/webm” type=”video/webm”>
<source src=”https://path/to/mp4″ type=”video/mp4″>
Your browser doesn’t support HTML5 video tag.
</video>
For Internet Explorer/Edge we simply hide the video, and replace it with a still image.
Staring Contest!
I’m optimistic that developers will not have to deal with this issue for much longer, as recently released Microsoft Edge 14 supports WebM videos. Of course, many companies like ourselves will continue to support Edge 13 and Internet Explorer 11. For now, we’ll have to consider low level issues like color range settings or just avoid/be aware of HTML5 video.
Run into any other strange/quirky <video> bugs?
Let us know in the comments!
[amp-cta id=’8486′]
