Best Practices for Background Videos

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


Background videos, if done right, can look stunning, draw attention, convey an idea and an overall experience for the user, and possibly lead to users taking positive action. If done wrong, they can be distracting, perform poorly, and possibly even be disorientating for users.
So how can we ensure that a background video is done right? There’s a lot to consider, but the following guidelines and best practices will help ensure the best end result!

Background video on rotary.org

General Production Guidelines
Keep the video relatively short
Longer videos will have a greater file size, will consume more of the user’s bandwidth, and may take longer to start streaming. Keep the video around 10-15 seconds in length. That should be an adequate amount of time to convey an intended idea or emotion.
Avoid excessive movement
Some movement is okay, but excessive movement can be distracting and unwelcome. Also, keep in mind that the term “background” video implies that there is more important information in the foreground. The background video is meant to visually support and reinforce the foreground information. If there’s too much going on in the video, then it’s likely going to detract from the more important foreground. It is also important to keep in mind that excessive motion can also be disorienting for those with vestibular disorders (motion sensitivity).
Export final video at high quality
When exporting the final video from your video editing application, be sure to export it with high quality settings. Conversion and optimization for use on the web will be done later (details below).
Remove the audio channel
Audio can be distracting in this context, plus, background videos will not autoplay on mobile if they contain sound, so be sure to remove the audio channel completely.

Video Conversion Guidelines
Provide multiple formats
In order for the video to be cross browser compatible, you’ll need to convert it to multiple formats, currently, WebM and MP4. To do this, I highly recommend using ffmpeg via the command line. If you have homebrew it’s easy to install with brew install ffmpeg –with-libvpx. Commands look something like this:

ffmpeg -i input.mp4 -c:v libvpx-vp9 -an output.webm
ffmpeg -i input.mp4 -c:v libx264 -an output.mp4
The -i option specifies the input video.The -c:v option specifies the codec to use, libvpx-vp9 for WebM, and libx264 for H.264/MPEG-4.The -an option removes the audio track, just in case it wasn’t already done in the source video.
Standard HD is sufficient
Standard HD size (1280×720) is sufficient and will have enough quality to be used as a background. If the source video was exported at Full HD or 4k, then you’ll need to add the -s (size) option to the above commands to set the output video size:

ffmpeg -i input.mp4 -c:v libvpx-vp9 -an -s hd720 output.webm
ffmpeg -i input.mp4 -c:v libx264 -an -s hd720 output.mp4
The hd720 value is a size preset which yields a frame size of 1280×720 (standard HD).
Focus on playback performance
In order to ensure efficient streaming and playback, you’ll need to optimize the bit rate. Add the -b:v (target bit rate) option to the above commands

ffmpeg -i input.mp4 -c:v libvpx-vp9 -an -b:v 1000k -s hd720 output-1000k.webm
ffmpeg -i input.mp4 -c:v libx264 -an -b:v 1000k -s hd720 output-1000k.mp4

Try different bitrate settings in the conversion commands above.
Lower bitrates will produce smaller files and will stream better, but will have a lower quality.Higher bitrates will produce larger files and may have issues streaming, but will produce higher quality.A good target is between 700kb/s – 1200kb/s.Keep the bitrate as low as possible, until the quality degradation becomes noticeable and unacceptable, then increase it a little bit until it looks acceptable.
If command line utilities like ffmpeg are not your thing, you can also try a service called CloudConvert. Just be sure to follow the guidelines above.

Implementation Guidelines
Consider mobile users’ bandwidth usage
Since videos are typically large files, they will consume more bandwidth and will slow down overall page load time. Consider using media queries to serve a video with smaller dimensions and a lower bitrate to small-screen devices. This will allow for more efficient streaming and playback on small-screen devices, and will consumer less overall bandwidth for those on a cellular connection.
Run the above ffmpeg command, but adjust the -s (size) option and lower the -b:v (target bit rate) option:

ffmpeg -i input.mp4 -c:v libvpx-vp9 -an -b:v 500k -s nhd output-500k.webm
ffmpeg -i input.mp4 -c:v libx264 -an -b:v 500k -s nhd output-500k-500k.mp4

The nhd value is another size preset which yields a frame size of 640×360, exactly one quarter of a standard HD (720) frame.
Another option would be to use media queries to serve a static image to small-screen devices. An image will consume much less cellular data than a background video.
Ensure sufficient contrast with foreground text
If you’re displaying text over your video, make sure it’s easily readable. If it’s not, you’ll need to increase the contrast by adding an overlay to the video, changing the text color, or adding a text-shadow or a background to the text.
Provide a pause button
There will always be people who might like to pause the video so it’s best to give them the ability to do just that.
Also, while WCAG doesn’t specifically call out the use of background video, the success criteria in section 2.2.2 (Pause, Stop, Hide) may apply to this:
“For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it…”
A background video isn’t technically information, but it does meet the other criteria above. I’ll let you be the judge.
Anticipate the possibility of motion sickness
When encountering large scale animation and movement on the web, people with visually-triggered vestibular disorders commonly deal with feelings of motion sickness, like dizziness, nausea and headaches. Fortunately, iOS provides an accessibility setting for “Reduced Motion” and this can be accessed via the media query prefers-reduced-motion in CSS and JavaScript. So in the case of our background video, we can use window.matchMedia to automatically pause an autoplaying video.

const video = document.getElementById(‘background-video’)

if (window.matchMedia(‘(prefers-reduced-motion)’).matches) {
video.removeAttribute(‘autoplay’)
video.pause()
}

Summary
Background videos can be pretty stunning if they have the right subject matter and are edited together properly. But be careful to implement them in a way that is highly performant, conserves cellular bandwidth, and provides users some baseline control over playback.
If you have experience with doing background video and have any good tips, I’d love to hear your thoughts in the comments below!


Source: VigetInspire

Posted on September 11, 2018 in animation, application, Austin Drupal Development, Austin Web Designer, browser, css, drupal design,, Drupal Developer, Drupal Development, Drupal Development Austin, Drupal Support, Expert Drupal Development, iOS, javascript, mobile, performance, streaming, The, user, Video, web, Web Design Services

Share the Story

Back to Top