Website Video Backgrounds Using HTML5, WebM and Premiere Pro05/21/2014
We made a Vero, or video hero, if you would. A "hero image" is a term used in web design for a large banner image, prominently placed on a web page—generally in the front and center. The hero image is often the first visual a visitor encounters on the site and its purpose is to present an overview of the site's important content. A hero image often consists of image and text, can be static or dynamic. For many years the hero image was made with Adobe Flash. When Apple abandoned Flash on iOS the market shifted to static images controlled by jQuery. Hero images are not moving toward HTML5 video.
You'll find the Dirigo Vero (as we've coined the term) on our homepage. The concept was simple, but, the execution took a sizable effort. With a few tweaks here and there and an on-going process of optimization we think we have something pretty snazzy on our hands. Here’s how we did it :
Messaging and branding was our first consideration. We liked the images on our old slider, but we wanted to bring it to life. We wanted to keep the slider principal, one image, and one aspect of our company. Our first round of video slider imagery, while still a test, underwent the same treatment as any future video headers we’ll create. We chose sequences expressed a vignette of our company; the “building shot”, where we live, the “glass marker shot”, what we do, the “iPad shot” one of our specialties, the “meeting shot” who we are. Once we decided what the shots were going to look like we filmed the short clips.
Like every other production we started with lights, camera and setting the action. Our Sony FS700, like most modern cameras, shoots in 16:9 resolution, but we wanted to keep the video from overpowering the page. Our external camera monitor allowed us to overlay 2.75.1 widescreen markers to help us visualize what the shot would look like when cropped.
Once our footage was shot and loaded into Adobe Premiere we fine-tuned the aspect ratio. We decided, a 1.35:1 ratio (192:55 to be precise) worked well for the webpage design. The final resolution was 1920 x 550. Were well aware that retina displays and other high resolution monitors will push the 1920 to stretch in full screen, but for the sake of our first test we wanted to keep the file sizes as manageable as possible.
Once we finalized the clip length, color correction and crop, we compiled the four sections of the slider into one video track and began the export process. In order to enable usability for all platforms and browsers we needed a .mp4 and .webm version. After experimenting with various bitrates we settled on using about 5 MB file for the h.264 and a 10 MB file for the WebM - a compromise of quality vs speed. This file size is something we are continuing to experiment with. Its important to note that we've had success with hosting video files up to 25 MB, though there were some playback issues on slower computers and networks.
Exporting WebM from Adobe Premiere
Exporting WebM from Adobe Premiere was the biggest challenge. Luckily, we were able to find a 3 rd party plugin from Fnordware that allowed for direct webm exports, this way we had control over bitrate and resolution of the image.
Step by step:
- Download Adobe WebM Plugin for Premiere and Photoshop: https://github.com/fnordware/AdobeWebM
- Install Plugin to Adobe Media Core
- Finalize video sequence in premiere and go to export sequence.
- Select the format drop-down menu and select WebM
Under "Codec settings" make sure VP8 is selected (VP9 is still under development)
- Select the "Method" drop-down menu and select "Variable Bitrate (2-pass)
- Select desired bitrate, the estimated file size will display on the bottom right side of the export pop-up menu.
- Set "Encoding" drop-down menu to Best
Adobe Premeire to WebM Video Tutorial
After we finished exporting the videos into both mp4 and WebM formats the developers took over to insert the video into our website.