Since my fullscreen video web page background article was published, some readers have commented that video content does not appear on their pages when they use the code in their own projects. When I’ve had the opportunity to test the pages, the issues have usually been due to poor encoding or delivery of the video, not the CSS code.
To address this, I thought it might be useful to have a list to test video content during site production. Think of this as a web video quality control process, one that attempts to guarantee that HTML5 video will be delivered smoothly to modern browsers.
I’d suggest the following steps:
- Conversion
While there are more complex tools available, it’s very likely that the options in those applications will overwhelm the casual user. Instead, I would suggest using a simple drag-and-drop tool like Miro Video encoder; there are also plenty of other video conversion options. You’ll want your video in two formats for modern browsers: .mp4 and .webm. Most applications will give you the option of SD or HD resolution: you can choose either, so long as you understand that the latter will be more demanding of bandwidth, storage, and devices.
- Local Testing
Once you have the files, drag and drop them into every browser that you can find: I would suggest the latest versions of Firefox, Chrome, and Safari together with Internet Explorer 9+ as a reasonable start. Test on multiple platforms: Windows and OS X at least. Don’t embed the files in a web page yet: just drag and drop them into a browser window.
You may find that one of the files doesn’t play back in a particular browser / platform combination. That’s okay, so long as the other video format works. That’s just part of the complex nature of browser codec support.
If one of the files consistently fails to display – to the point that a browser won’t play your video in any combination – it’s likely that it was not encoded properly. You’ll want to return to the “Conversion” step above and play around with the settings you chose, re-exporting the file until it works.
Note that this does not guarantee that the video will work in your web site, nor that it is optimized to do so: we’re just testing that browsers can show the file.
- Double-Check The File Size
Not following this step trips up my students every year. You’ve most likely saved and tested your video on the desktop, which is fine, so long as you understand this is an artificial scenario. The video on a web server must be small and compact in order to play back smoothly on the your site. I found that it’s very common for people to say “But it worked on my computer!”, not realizing the two – web server and desktop – are very different environments.
So before deploying the video to your server, double-check its file size. The definition of a “reasonable” size will change depending on many factors, including video length, format, content, codec and resolution, but I would suggest a range around 10MB for short (a minute or two of footage) video is good goal. If you find that your two-minute video is 100MB in size, there’s almost certainly something seriously wrong.
Failing to get the file size down to a reasonable level will endanger your user’s enjoyment of the content, as well as your bandwidth quota; if you can't reduce the video to a reasonable size, you may want to consider placing it on YouTube, Vimeo, or another service and embedding the video on your page. (It should be noted that YouTube videos can be made responsive).
- Remote Testing
Next, we need to check that the video can be correctly delivered from your server. Upload the two video files to your site and use the same browsers to view them directly: for example, type http://yoursite.com/videos/new-video.mp4 into the URL bar. You only need to check the video format(s) that are supported in the browser you’re using at the time, which you should already know from Step 2.
If the videos display correctly from a live URL without any significant delays or lag, congratulations! Your server has been set up to deliver HTML5 video files, and you can jump straight to writing the embed code on your page. If the video doesn’t appear in some browsers, double-check the URL (and that the video has actually been uploaded), and try again.
If you still have problems, the most likely cause is that your server is not delivering the video: in other words, it’s not a problem with your files, but your server. All is not lost, however: I have solutions to that issue at the bottom of the HTML5 video page. I’d suggest trying the .htaccess method first.
- Test Embedded Video
After you’ve written the embed code, upload the HTML file to your server and test the page URL, again in as many browsers as you can. This is a good opportunity to make the video responsive (in the same way you make fluid images) and/or adaptive, test the page on mobile devices, and add custom controls.
If you’ve completed the steps above everything should be fine at this stage. Non-loading issues on older browsers might be resolved by adding the appropriate MIME type attribute to the source element in your code.
- Test Bandwidth & Load
An optional but useful step (especially if you don’t have mobile devices to test on) involves throttling your network connection to simulate conditions for mobile users while testing your page. You might also want to stress-test your site, to determine how many users can view the video simultaneously.
That’s it! If you have questions about this checklist, or tips of your own, please feel free to add them in the comments section below.
Photograph by Thomas Hawk lisenced under Creative Commons.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
