10 Mistakes to Avoid When Creating HTML5 Videos

In this article we look at mistakes to avoid when creating HTML5 videos. One of the most important things to know (as mentioned in the previous article) is many users will only wait two seconds for your videos to load. If they take longer, you run the risk of losing your audience.

1.      In keeping with that short attention span, an important thing to consider is the length of your videos. If you’re offering a product or service to a new audience it’s a good idea to keep the video length to between 1-3 minutes. If you have longer videos, use those for an audience that has some history with you instead of “cold” traffic.

2.      As with all graphics projects, lack of planning can create havoc. Without a roadmap of some kind you don’t know where you’re going and this can waste a lot of time and resources. There are several ways you can plan out your site. One method is with a storyboard. Another option is to use a flow chart or even a mind map. The purpose is to organize the process. Once you do, building the site (and creating the videos) will be straightforward.

3.      The mistake of the “one size fits all” approach to video. This approach might work if you only produce videos for the desktop but this can have disastrous consequences if you use the same video for tablet or mobile. Among other things, the video will have to scale to match those formats and will be slow to download, which could cost you your audience. Take the time and optimize your videos for each platform. One program to help plan out your file sizes is Adobe Edge Reflow.

4.      Not taking advantage of software that uses HTML5 standards. One example of a program that offers this support is Corel Video Studio Pro (HTML5) X6. In this application, you can link to a chapter or cue point in a project which will take you to an external website, but only in the overlay tracks. An important distinction with this program (as opposed to other video programs) Video Studio Pro X6 outputs an HTML web page with all the coding necessary to play back your video.

5.      Not outputting video files in a variety of formats. Corel Video Studio outputs two HTML5 formats: WebM and MPEG-4 (H.264).

Here’s a sample of that code with the two video formats in use.

In addition, you can open the HTML5 output in other HTML5 programs. One such program is Adobe Dreamweaver.

Another fallback format is .OGG. Full details on how to use this format is supplied in this tutorial.

6.      Don’t load multiple videos on a page. Load only one at a time.

7.      The mistake of not standardizing file naming. As an example, here are two file names: Flower.mp4 and flower.mp4. From a network perspective these are two different files and they will be treated accordingly.

8.       Not Inserting the CSS link at the top of the page. Doing so will ensure that the browser will handle that request first, leaving JavaScript and other resources to be loaded later. Another, important step with your CSS is to make sure the file only contains what’s necessary to load the page. If you use a large CSS file with rules for all of your pages, the browser has to download all those styles.

9.      Using too many images on a page. When possible use JPEG for images and use an image editing program (such as Photoshop, Paintshop Pro or GIMP) which will let you experiment with compression. Another important thing is the actual size of the image. You’ll find a tradeoff between resolution, image size and compression. It might not be exactly what you want, but there are limitations to what you can do with bitmaps.

One alternative is to use an illustration (or a vector image) and convert that to a bitmap. The result will be a smaller file. In addition, use PNG-8 or GIF for illustrations or simple line drawings and text. With the last two formats, it’s possible to limit the number of colors in a palette, which will directly affect the size of the image.

10.  Keep the design simple and functional. Don’t include unnecessary scripts or plugins. Anything that’s not necessary will use up resources.

Conclusion

Sometimes the things to avoid aren’t obvious and will only become so when you study ways of optimizing your pages. Here are some examples:

• Look at your code and find ways to make the file sizes smaller
• Use Gzip for your content
• Standardize JavaScript frameworks
• Use image sprites