Getting Ready for Web Video

Categories Articles

Video is one of those really contentious points about web design. There are some people who feel like web pages should not have embedded video at all. These people are wrong.

Like any technology, however, we should respect it and not abuse it. The two worst things you can do are:

  • AutoPlay videos, without express consent from the user
  • Embed too many videos in one page

Both of these things are likely to cause annoyance to users and should be avoided unless you have a very good reason.

Knowing what not to do will only get you so far. The rest of your online video success story will depend on knowing the things you ought to do, which is what we’ll cover in the rest of this article.

Video categories

There are six different types of videos that are commonly used on sites. These are:

  • Regular video – you point a camera at something and record it
  • Live stream – you point a camera at something and don’t record it
  • Slide show – composed from a series of still images, often with voice over plus added descriptive text
  • Animation – various methods, but more commonly 3D rendered animations made with Maya3D or Blender.
  • Screencast – software records images from your computer, normally used for tutorials, usually with text overlays and voice narration.
  • Hybrid screencast – a screen cast with regular video segments, and possibly also slideshow segments.

Knowing which type of video you want to produce is a good start. Actually that brings us neatly to the next topic.

Plan your video

Good video doesn’t normally happen by accident. Meticulous planning pays off, and that means you know what kind of video you’re going to produce, how you’re going to produce it, and (very importantly) why.

Don’t fail to plan. For a start, your video should be scripted. This is true even if there is no dialog or narration. The script gives you a clear impression of how the video is supposed to unfold. You can also optionally story board the video, but a crew that can’t work straight from a script is not a very visionary crew.

If you’re making a bigger production, you’ll also benefit from budget planning, scene breakdown, shooting sequence (shot list), location scouting, etc. The more time you invest into planning, the better your video is likely to be. Professional preparation leads to professional results.

Software that can help you with script writing and planning includes Trelby and CeltX.

Invest in quality equipment

The equipment you use will have a big impact on the result. It may be difficult to believe, but the camera is not the most important part of your equipment investment.

That’s because for web video (in 2018, at least) it’s rarely sensible to shoot video above normal HD (1920px wide), and in fact it’s better to shoot in SD (1280px wide) or lower, and the aspect ratio should always be 16:9.

One source of confusion with these resolutions, by the way, is the slightly misleading standard names used, which references the vertical height (720p / 1080p) rather than the width, which is the most natural thing people think about.

In thinking about this, bear in mind that a video with a frame height of 720px will not fit on the screen real estate of most users, so it is easy to see why shooting above 720p will not give superior results for web video.

The larger your video frame is, the more resources it will hog on the user’s device, including in some cases failing to play at all, or playing very poorly. Your goal really should be to get the highest image quality and the lowest file size (in bytes).

The reason all this is mentioned is because cameras up to HD will be quite inexpensive compared to cameras that can shoot at higher resolutions, and you’ll just be wasting your money if you invest in them, because most users in 2018:

  • Do not have screens large enough to support the enormous frame size
  • Do not have connections fast enough to stream anything above HD smoothly
  • Do not have connections able to stream anything above SD smoothly either
  • Are not overly concerned about quality as long as it is reasonable

Quality of your content is the more important thing. So cameras for web video are cheap. What matters a lot more is the audio, and that is where you should invest sensibly.

Cheap audio solutions are likely to result in poor results, so avoid cheap audio and invest in quality. What you save on your camera can be reinvested into sound. Literally what you’d regard as a sound investment.

The main microphone types are shotgun, boom, and wireless. The top brands include Rode, Senheiser, Shure, and Audio-Technica.

Shotgun microphones will do the job if the camera is reasonably near and there is no wind. A boom mic can be made from a shotgun mic mounted on a pole with an extension cable. Wireless is the most expensive and the most likely to give you trouble.

You should invest in a good quality tripod as well, with the generally accepted best brand on the market being Manfrotto. What you should invest in lighting depends on the location. Other items you’ll need could include reflectors and shaders.

Completely optional items that can be useful include sliders, dollies, jibs, and lens filters. Don’t invest in these items unless your production warrants their purchase.

Set the scene

The best idea with online video is to keep it short whenever possible, and when it’s not possible, break it down into segments. This is far better than one long continuous narrative, and makes your video look more professional.

For each segment, think about what will be in the frame. If the camera will pan, track, or otherwise follow your movement between two or more points, think about what will be in the frame at each point. Rehearse it and mark the spots where you will stand if you’re in an on-camera role.

How you can mark ground spots is with chalk, tape, small bean bags, or stones. The camera operator should use a tripod or Steadicam for best results. Shaky video is truly horrible.

For screen casts and slideshows, think about how well the user can see what you’re showing. Zoom in on key elements if necessary, and be willing to switch betweeen different zoomed and unzoomed views, as the situation requires.

Make your own green screen

If you are presenting from behind a desk, a green screen can be a big improvement to your presentation. Simply get yourself a large, flat, solid surface, which should be smooth and unblemished, and paint it a bright shade of green.

For ultimate compatibility, also create magenta and cyan screens that can be swapped in if you need to show anything green colored in your frame.

With a green screen (or magenta, or cyan) you can use a technology called chroma key to replace the solid color with any image, including another video.

Obviously there’s not much point in making a video if nobody wants to watch it, so try to keep things interesting. Beware, however, not to be insincere or act out of character, because poor acting is worse than no acting at all.

Humor can be powerful if it is done well, and used only where it is appropriate. Likewise solemn, somber, and scandalous tones can also create interest when used appropriately.

Product videos and testimonials should be delivered enthusiastically and highlight the best features, however product reviews should be brutally honest in order to boost your credibility and win the trust of your viewers. Nothing is more valuable than trust.

Editing

Editing your video is the biggest task of all. For this, you’ll need software, and that software must be a nonlinear video editor (NLE). With this you can put mix and match the various clips you’ve shot to make a coherent narrative.

Not all editing software is equal. The best video editors are Cinlerra, Adobe Premiere Pro, Blender, and Sony Vegas Pro.

Rendering

Rendering is usually done, at least on the first pass, by the video editing software. When rendering for DVD, your goal is to get maximum video quality, regardless of the file size. Rendering for the web is a whole different thing.

The only formats worth considering are MP4 and WEBM, and while the latter will give you a better file size, it is not currently universally supported by all browsers. It is worth keeping in mind for the future.

Although your sound capture needs to be first rate, your rendered audio definitely should not be. In fact this is where most people go wrong, leaving their sound at ridiculously high fidelity when it’s not necessary. Reducing the audio quality will go a long way towards reducing file size while not noticeably affecting the outcome.

Codecs are a hotly debated topic, but the general consensus of professionals is to use the H.264 codec (or equivalent), because this will ensure maximum compatibility and a good balance between quality and file size.

Finally, consider shrinking the physical dimensions of the video if it is going to be viewed within a pre-defined space, and the user would not be expected to view it in full screen mode (doing so will work, but results in pixelation… their problem, not yours).

You can also use video transcoders such as Handbrake for your final render to fine tune the resulting file and ensure maximum compatibility. In some regions ISPs have restricted access to Handbrake downloads, but that’s just a testament to how good it is.

Captioning

Don’t under-estimate the power of captioning. Investing the time to create proper closed captions (subtitles) for your video production will be a very good investment. At the very least, allow auto-captions, but creating your own, especially if you allow a choice of languages, is always a good idea except when your video contains no speech.

Hosting

Considering how many mobile users there are and the prevalence of 3G connections, with 4G still being a (slowly growing) minority, HD video is not the best of ideas, and since Vimeo’s support for captioning is not on a par with Google’s, this makes Google the better choice for online video hosting at present.

Notice, however, that it was Google, not YouTube, that got the mention there. For numerous reasons, YouTube is not the best way to host your video, however there is nothing to prevent you uploading multiple versions of your video, one you host on a private Google account and one you host on YouTube.

The version embedded on your site should be the version hosted on your Google account.

The one exception to the rule is if you’re producing feature content, where you are showing off your film making prowess. In this case, Vimeo may have the edge.

For low bandwidth sites (those that attract less traffic than the bandwidth they have available), you could consider hosting the video on your own server. This can provide some advantages, especially in terms of loading time.

Inspired Mag Team

We always try to come up with high quality and well-researched content in order to inform and inspire the creative web community.


  • This is really great post. Thanks for shearing.