HTML5 Video Background Elements & Testing
in Video, HTML5, JQuery, Web Design | August 19, 2015
With advancing technology in processors, wifi and video encoding, it has recently become feasible for web developers to start to embedding rich video content as elements in web pages. A few major corporate websites (PayPal
, for example) have recently introduced video background elements via HTML5 on their homepages. While building our homepage’s main slider, we decided to embrace the futuristic tech and build a video into our slider.
The first thing we had to do to implement HTML5 videos as website elements was to get a video that was light enough to load swiftly but still looks good and plays smoothly. In our site, we have a 30 second loop that is fairly suited to compression. In implementing this for one of our clients, this proved more challenging as they had commissioned a promotional video that was nearly 90 seconds long to use for their homepage.
In both cases, we started with high quality H.264 MPEG4 videos and compressed down to far smaller MPEG4’s using Adobe Media Encoder CC 2015. HTML5 Video supports MP4, WebM and OGV as its 3 viable video formats for playing videos on the web. Most HTML5 Videos can rely solely on an MP4 version for desktops and laptops and then fall back to a single image on mobile view. On our site, we didn’t need audio to accompany the video, so we were able to strip that. We shrank the frame size to 480p, throttled down the bit rate substantially and stripped all audio from the clip. Combining these things, we were able to get a nice lightweight video that played smoothly in all of our tests on laptops.
While HTML5’s support of videos as inline elements may make it mechanically straightforward to embed a video into a page once you have a light, compressed video, we still had mobile users to think of and cross-browser testing to meet our high standards of website responsiveness and performance. Once we had built the element into the page, it was a matter of some CSS markup and JQuery to optimize the way the video loads and the behavior of our sites across platforms.
For one, HTML5 videos are not yet supported on mobile. (Nor should they yet really be. Many mobile users have fixed data plans. Imagine paying for 7MB-20MB of data per page to load a background video that exists for aesthetic purposes only.) To fix this problem, we wrote a JQuery function that loads the video and then swaps it out for a placeholder div when we recognize a mobile os or browser type in the user agent field. If our code does detect mobile, it loads in a still image in place of the video.
If we don’t detect mobile with our JQuery, then the video is loaded in the stead of our placeholder div. This prevents the video from ever being loaded when it shouldn’t be and makes pages with our code weigh far less on mobile.
In cross-browser testing for larger videos on laptops and desktops, we found that Mozilla browsers handled the HTML5 videos with far less proficiency than Chrome, Safari, or even Internet Explorer (!!!). Since we already had JQuery in place checking the user agent field and loading different items into the hero area of our homepage, it was a simple change for us to add a case that swapped in a “lighter” video that, in our testing, played more reliably and smoothly in firefox and other mozilla browsers. We found that MP4 videos needed to be at most 16MB in filesize before they started creating playback problems when loaded into an HTML5 video container (an ideal filesize size was ~5MB), which should be a good target filesize for anyone hoping to leverage the use of HTML5 background videos.
Mission Bay Media is a website design and development firm located in the Pacific Beach neighborhood of San Diego, California. We take pride in web standards and providing top notch web development services to all of Southern California. To get more information on this article, or how Mission Bay Media can help you, email us at firstname.lastname@example.org