HTML5 Video can add wonder and style to your website!  But doing it wrong just creates frustration.

We’re going to cover everything you need to know to make great HTML5 Video banners. Including:

  • How to choose a good video
  • How to optimize video files to less than 1 Megabyte
  • HTML Code for adding the video
  • Auto-playing on mobile devices
  • Advanced effects with java-script.

 

Tip #1: Keep Files Small As Possible

Large files are the enemy.

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

Large video video files not only waste bandwidth, but slow loading speeds will mean many visitors will never see your video.

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.

This video looks nice, it doesn’t make for a good video banner. All that camera movement makes it hard to compress, and it’s jarring whenever it loops.

 

Tip #4: Stay Around 8-12 Seconds Long

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

You won’t get a 2-minute video down below 1 or 2 MB (and look good).

Every video is a little different, but 8-12 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: Start Playing with Real Code

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

To make 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 your own website you’ll see the video.  To use your own video, simply change the URL (in orange) to where you uploaded your video.

Remove the Controls

Deleting the word “controls” (highlighted in green), and the user will not longer be able to pause the video. will remove the play/pause buttons, etc, and create a 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 Add Some JavaScript Magic For Complete Control

Seeing the girl open the tent over and over, can start to feel old.  Let’s have her open it just once.

How?  One simple solution is to remove the word “loop” from the code. This will cause it to play once and then stop.

However, I’d like to keep the movement going.  So let’s try some java-script.

Loop the last 5 seconds of the video

Watch what happens when the video reaches the end.

Instead of looping the entire video, you can just repeat 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.”

 

Play A 2nd Video After The 1st Video Ends

For an even smoother effect, we could split the video into 2 videos.
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 nearly 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

On mobile devices autoplay is disabled by default.  The user has to click on the video, and then it opens the video in full-screen.

It’s a rule that any video that wants to autoplay can’t use sound (which makes sense because nobody wants to go to a website and have unsolicited videos making noise).

But thankfully the browsers will allow autoplayed videos if you add “playsinline” and “muted” to your video tag.

<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 thing I learned while writing this article is you can’t have more than 1 auto-play video on screen at a time (which made showing all these videos on a phone tricky) but when using a single video banner, that shouldn’t be a problem.

 

1 Comment