How to Provide a Good HTML5 Video Experience

When creating HTML5 video, there are many things to consider when producing a good viewing experience for the user. It’s one thing to create the video and format; it’s another thing to make sure the video is easy to see on the various devices.

Here are some tips for creating high-quality video:

1.      Use high quality video: This means using vide in the original format. It’s important to be aware that video compression is lossy and when you use it will degrade the quality of your video.

 

2.      Use a Tripod: For image stability and clarity, this is necessary. Do not use handheld shots unless there is no other choice. As for the camera, open use a higher f/stop setting (wider aperture) in low light situations, if your camera supports it. This means that more light will reach the sensor and improve the quality of your shots.

 

3.      Use an External Microphone: Most cameras have an external input that you can make use of. A lavalier microphone could do the trick or if you’re using the video for a podcast later, you could make use of a Rodeway, Blue Yeti or Samson Meteor microphone. Built in microphones should only be used as a last resort because they don’t perform as well.

 

4.      Lighting: It is crucial to have good lighting and to make use of reflectors (umbrellas), diffusion and scrims to shape the lighting if necessary. If the lighting is poor, the end result will be a lot of noise in your video. The effect will be magnified with compression.

Ideally, it’s wise to shoot in situations with a lot of natural light, but some situations will not allow for that. In those cases, using simple (and inexpensive) work lamps, like those found at construction sites could do the trick.

 

5.      Shoot Imagery Which Is Easy to See At a Small Scale: Since you’re going to be working with smaller screens (especially with mobile) you need to take that into account and create video imagery that is easy to see. You will want to maximize the viewing space and if you use text, use it sparingly and at a large size. Too small and you run the risk of losing your audience.

 

6.      Video Conversion: A simple solution for the video conversion is: http://www.mirovideoconverter.com/. This is a free video tool which you can use to convert your files into web formats.

 

7.      Make Sure Your Memory Card Supports Camera Movement (Panning) at High Resolution Settings: If not, your pan will be choppy instead of fluid and the result will be unusable. As an example, the pan might work perfectly at 640×480 but become choppy at an HD setting.

 

8.      Shoot in Progressive Mode: Interlaced video can have artifacts which will damage the quality of the image.

 

9.      Shoot with a Shallow Depth of Field: The result is closer objects stay in focus and shots behind the close objects become blurry. Outside of the nice effect, the blurry parts are easier to compress.

 

10.  Wear Appropriate Clothing: While it’s important to wear comfortable clothing, some clothing doesn’t work well with video. Here are some guidelines:

a. Avoid very light or very dark colors (including navy) because these clothes could lose their detail on video

b. Avoid red or orange. Red can sometimes appear to “crawl” on video

c. Solid colors are good

d. Avoid checked patterns such as hounds-tooth, tight stripes, plaid or herringbone. These have a tendency to create Moire’ patterns (rainbow effects) on video

e. Buttoned clothing is good (for a Lavalier or clip-on microphone)

 f. If you wear glasses, be careful of frames that cause reflections.

 

g. Be careful with jewelry, especially dangly earrings or bracelets which could cause noise. Also, make sure there aren’t any reflection issues.

 Supported Video Types

HTML5 makes use of three major file types: MP4, WebM, and Ogg/Ogv. The MPEG-4 file type is generally encoded in H.264. It’s important to know that not all browsers support all three formats.

Here is a table from the JWPlayer.com site which shows the formats supported with each browser. Also on this page are sample videos with different formats, such as H264/AAC IN MP4 or OPUS IN OGG.

With the different browsers, you will only be able to use two formats at most. The basic code would be:

<video width=”640″ height=”480″ controls>

<source src=bucerias.mp4″ type=”video/mp4″ />

<source src=”bucerias.ogv” type=”video/ogg” />

</video>

 

If you are testing this within video design software, it may not work. Always, upload the code to your server to test it. Do not trust the preview in web design software. The acid test is ALWAYS testing the code live.

Here are some optional video controls:

• autoplay: With this attribute, the video will play back automatically without stopping to load the rest of the data.

• autobuffer: Here, the video will automatically buffer, even if it’s not set to play automatically.

• controls: With this attribute you can control video playback, volume and pause or resume.

• loop: Here, the video will automatically loop back to the beginning after reaching the end.      

• preload: With this attribute, the video will loaded at page load and will be ready to play. This is ignored if autoplay is used.

 

Conclusion

You now know how to prepare and shoot great video for HTML5 and you have a idea of the basics to get started. Here are some resources for in-depth formatting of HMTL5 video:

·         HTML5 Videos: 10 Things Designers Need to Know

·         JWPlayer.com

·         Working with HTML5 Video

·         Camera and Video Control with HTML5