HTML5 Video is a powerful tool.  Done well, videos can draw attention, set a mood, or explain a topic.  Video banners are especially good at those first 2 points.

Making a good video banner requires more than slap a <video> tag on a page and call it good.

In this article we’re going to explain everything you need to know to make great HTML5 Video banners. Including:

  • HTML Code for adding the video
  • Auto-playing on mobile devices
  • What kinds of videos work best
  • Compressing videos (so they load super fast)
  • Advanced effects with java-script.
  • Adding Video Key frames with Handbrake.

Tip #1: Keep Files Small As Possible

Large video files are the enemy.

When making a video banner, don’t upload a 50 Megabyte file!  In fact, don’t even upload a 5 MegaByte file.

Why?

In a word… Slowdowns.  When you self host a video, every person that comes to your website has to download the file.  Hosting large video files on your website can slow down the entire website across the board.

What if I host it on an external server?

You can potentially host your video on a service like Cloudinary or other media hosting services.

Keep your videos tiny or many visitors will just see a black box…

How Small Should It Be?

Whenever possible, try to keep your video under 1 Megabyte.  If you can’t keep it under 1MB at least shoot for less than 2MB.

Does It Really Need To Be That Small?

I can hear some of you saying “It’s 2018. Everybody has broadband now and my 30MB file loads instantly.”

This is a common mistake.

Novice developers will see their video load instantly and assume everything’s right as rain (until a month later when they load the site on computer that’s never been to their website before).

The reason your 30MB file loads instantly is because it’s already cached on your computer.  Even on broadband, many users wont see the video for 10-45 seconds.

By then, most of your visitors will have already scrolled down the page, or clicked away, never noticing your amazing video.

But how exactly do you get your files so small?

 

Tip #2: Use “HandBrake” for Compression

My example video is 525kb.  The only reason this is possible is because I used a compressed it using a program called HandBrake.

HandBrake is free and amazing at video compression.

I recommend starting with a high-res, uncompressed video.  Then let Handbrake take care of all the compression. It will do a better job than Adobe Premiere or whatever program you use to edit videos.

Download HandBrake (for free)

 

Tip #3: Choose Videos with Subtle Movement


When creating a banner video, choose one with a stationary camera and subtle movements.
Videos with subtle movements compress much better than a videos where everything is constantly changing.
Note: If you don’t see any movement, refresh your browser.

Quick Intermission Poem:

If upon a smartphone
this article you’ve read,
one video will play

while the other one be dead.
For there is a rule
that I recently found
that apparently all smartphone-type
browsers
are bound.
One video only
can play at a time
which is why I’ve resorted
to writing this rhyme
.
I wrote this short poem
to fill-in some space
So each little video
may play in
its place.

Okay, back to the article…


This video looks nice, but its not an ideal video banner. The panning camera means the entire shot is constantly changing. This makes it hard to compress. While the waterfall video above has large parts of the frame that don’t change.

 

Tip #4: Stay Around 8-16 Seconds Long

In general, keep your videos around 8-16 seconds long.

You won’t be able to compress a 2-minute video down below 1 or 2 MB (and still look good).

Every video is a little different, but 8-16 seconds tends to be the sweet spot.  The loops aren’t so short as to be annoying, but still short enough for effective compression.

 

Trick #5: Simple HTML5 Video Code

Once you’ve made your video, you need to place it play on the webpage.

To keep things easy, I’ve prepared some simple code to add an HTML5 Video to your webpage.

Simple Looping HTML5 Video

Let’s say you want to have a simple video that automatically plays and loops (like the example above).

<video autoplay loop muted controls width="100%" height="auto"
src="https://www.rexburgcamprentals.com/wp-content/uploads/2018/08/Girl-Opening-Tent.m4v"></video>

If you copy the above code.  To use your own video, simply change the URL (in orange) to your own file.

Remove the Controls

Delete the word “controls” (highlighted above in green) to remove the playback controls.

This gives a feeling similar to an animated gif, and a more seamless experience.

Example with no controls

Add a “Poster” To Make a Preview of Your Video

Even with a well compressed video, it may still take a few seconds to load (especially on slow connections).

Adding a poster attribute to your code, will give people something to look at while your video loads, so they don’t have to look at a black box.

<video autoplay loop muted controls width="100%" height="auto" 
src="https://www.rexburgcamprentals.com/wp-content/uploads/2018/08/Girl-Opening-Tent.m4v"
poster="https://www.rexburgcamprentals.com/wp-content/uploads/2018/06/low-res-banner.jpg"
></video>

 

Tip #6 JavaScript Magic

This part is completely optional…

Seeing the girl open the tent over and over, can start to feel old.  Let’s have her open it just once by removing the word “loop” from the code.

But then we loose all motion after the first play-through.  Let’s keep the movement going by adding some java-script trickery.

Loop the last 5 seconds of the video


Watch the play-head and notice what happens…

Instead of looping the entire video, let’s just loop the last 5 seconds.

This can be accomplished with the following code:

<video autoplay playsinline muted controls width="100%" height="auto" src="https://www.rexburgcamprentals.com/wp-content/uploads/2018/08/Girl-Opening-Tent.m4v" poster="https://www.rexburgcamprentals.com/wp-content/uploads/2018/06/low-res-banner.jpg" ></video>
<script>
var Video = document.querySelector('video');
Video.onended = function(e) {
  Video.currentTime = 4;
  Video.play();
};
</script>

This code is actually pretty simple.  It basically says “When the video ends… move the play-head to the 4-second mark.  Then play the video.”  This results in an endless loop.

 

Play A 2nd Video After The 1st Video Ends

Sometime you might want to play 2 videos in sequence.
Here’s how to play another video after the first one loads.

<script>
var video = document.querySelector('video');
video.onended = function(e) {
video.src = "https://www.rexburgcamprentals.com/wp-content/uploads/2018/06/family-fire-2.mp4";
video.loop = true;
};
</script>

See an Example

Admittedly there is a slight flash as the next video loads, but after that, the the effect is basically seamless.

Place this script at near the bottom of your page and replace the video.src (in orange) with a link to your video.  It will automatically play different video after the first one plays.

This basically says “When the video ends… load this other video and set looping to true.”

 

Tip #7: Make AutoPlay Work on Mobile Devices

By default, auto-play is disabled on mobile-devices.  User must click on the video to play it, and opens the video in full-screen.  This makes sense, but sometimes you just want a little animation to play in your website layout.

You COULD use an animated gif, but animated gifs tend to be large and download slowly.  Using an HTML5 video will download faster and use less battery on smartphones.

The Rules…

To keep people from abusing the technology, any videos that plays automatically cannot play sound (which makes sense because nobody wants to go to a website and have unsolicited videos yelling at them).

To make your video play on smartphones add  the following word in your video tag:

  • playsinline
  • muted
<video autoplay playsinline muted controls width="100%" height="auto" src="https://www.rexburgcamprentals.com/wp-content/uploads/2018/08/Girl-Opening-Tent.m4v" poster="https://www.rexburgcamprentals.com/wp-content/uploads/2018/06/low-res-banner.jpg" ></video>

“playsinline” allows the video to play without going into full-screen mode, and “muted” turns off the sound.

One Video on Screen at a Time

On smartphones, you can only have 1 auto-play video on screen at a time.

 

Bonus Tip – Keyframes

Sometime you may need to tightly control the playback of a video.

For example, take a look at these two videos. Try scrubbing very through both videos quickly.

Video 1 No Keyframes

Video 2 – Keyframes

When scrubbing through the first video quickly, the video has to stop and ‘seek’ before continuing to play.  But scrubbing through the second video happens almost instantly (once the video is downloaded).

The second video has key frames attached to it.  Adding Key-frames to a video allow you to tightly control video playback.  For example, you could make a video of a rotating product that allows customers to scrub through the video at will.

How To Add Keyframes

Open your video in Handbrake.  On the “Video” tab, under “Extra Options” type in keyint=8 . This will place a keyframe every 8 frames.

Things to Keep In Mind

Adding more key frames will make your video files larger.  The Earth video without keyframes is 1.6MB while the key frame version is 3.6MB

After some experimentation with my Earth video, every 8 frames seemed to be the sweet-spot.  Other video may differ.

 

1 Comment