10 Tips for Creating Fast Loading HTML5 Videos

Video is all the rage on the Internet and is becoming more popular with every passing day. To give you an idea of what that means in real life, here are some important statistics:

• Online video makes up 50 percent of all mobile traffic and as much as 69 percent of traffic on some networks. (Bytemobile Mobile Analytics Report)
• If a video doesn’t load in two seconds, users tend to give up. (University of Massachusetts Amherst and Akamai Technologies)
• Uses with a mobile device or tablet are three times more likely to look at a video, as opposed to laptop or desktop users.
• YouTube attracts 1 billion+ unique users each month. Those users spend more than 4 billion hours watching videos (YouTube).

With this information in mind it’s crucial that your videos are well-designed and load quickly. Here are ten tips to use when you create your video.

Tip 1. Decide where the video will be used. Is it for desktop, laptop and/or mobile

Tip 2. Use prototyping software to help you plan out the video size. In this case, I recommend Adobe Edge Reflow, which is perfect for this purpose. Once you know the sizes of the videos you can output them accordingly.

Tip 3. Reduce the sizes of images, video and audio before producing the video. This will speed up production. This also affects the output, because you won’t need to compress the video as much to reach the desired file size.

Tip 4. Be aware of quality settings. Higher settings (video/audio) offer better quality but increase file size and directly affect the upload speed.

 

As an example of how you would control these settings, here’s a look at the Camtasia Studio Production Wizard. You can use a setting like the one I have above, choose a preset below, or create a custom preset.

We’ll take a walk-through of the various custom settings. This will show you how much control you have over your videos.

As you can see, there are several settings. Here, we’ll stick with the default, which is MP4 – Flash/HTML5 Player.

 

This next section is of crucial importance. Here, you can set the look and feel of the video controller, the size of the player, the audio and video quality and more.

 

This is where you can add a copyright, a packaged e-learning lesson, a watermark and to build a webpage with the video already embedded, simplifying web production.

 

This is the last step before rendering the video. As you can see, there’s a list of all the files which will be produced. You also have the option of uploading the finished files by FTP. When you click on the “Finish” button, the video will be rendered.

 

Note: In the end, it’s important to experiment with the quality settings and output several test videos. Very quickly, you’ll get an idea of what will work for your audience and still uploads quickly.

Tip 5. Make videos that are specific to desktop, tablet and mobile. This is especially important for tablets and mobile devices, due to WIFI bandwidth issues.

Tip 6. Check out different services for uploading videos. Many users use Youtube but sometimes your videos will suddenly stutter or stall. This can create havoc with your presentations. If this is an issue, consider a service such as Amazon S3 or the paid version of Vimeo.

Tip 7. Make sure that you include the height and width attributes in your code and that these attributes match the actual size of your video. If the height and width are larger or smaller, the video will be scaled accordingly. If the scaling is larger than the quality of the video allows, it will appear ragged. If smaller, the quality won’t suffer, but you’ll wind up with a video that takes longer to load than necessary. It’s better to produce a video that matches the height and width attributes.

Tip 8. Be aware that HTML5 video won’t work for all browsers. Make sure you convert your video to the .OGG format and build it into your code, accordingly. The article: “Audio and Video with HTML5 gives you several options for configuring players.

Tip 9. Reduce the number of <DIV> tags. Instead, use the new HTML5 tags to define the layout of your site. Some examples are: HEADER, FOOTER, NAV, ARTICLE, etc.

Tip 10. Use only the elements and scripts necessary for your site. This might seem obvious but it’s easy to get hooked by bells and whistles. The rule of thumb is, if it doesn’t add anything of value to your site, don’t use it. The last thing to do before launching any site is to validate your code.

Conclusion

Some of the recommendations here might seem minor, but they have a cumulative effect when put together, which could make a major difference to the way your HTML5 pages and videos load.