How to Create HTML5 Video in 5 Steps
In the past, setting up video was a relatively straightforward concept using Flash plugins. Until the iPad showed up and the HTML spec began to evolve, many people were happy with the results. As that changed so did the DRM and other aspects of video. One of the aspects of HTML5 was to solve the security problems inherent with Flash.
To give me the inside scoop on how to set up HTML5 video, I spoke with Craig Shoemaker. According to Craig, “The implementation has been uneven. Different browser vendors don’t agree on the encoding formats that they would support. In practice, that means you have to take a native video format and encode it into multiple different formats so it will work for everyone.”
In this article, we look at 5 steps necessary for successful implementation of video in your browser.
1. Consider which browsers are important to you. To see what formats to use for the browser, check out the link below from the Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
2. The next step is to take your native video and convert it to the multiple different video formats you see in the previous step. Here are links to a couple of video converters you can use:
If you’re a large company, you want a program which will allow you to drop all the videos into a command line and allow you to make use of batch processing and to render the videos in the different formats and when that’s done, to notify you that the videos are live, so you can link to them.
3. The next step is to place the video on your pages.
While you could use the current formats, only, that’s unwise, says Craig. “Even today, it’s a good idea to have a fallback format for the pages you build, so in case none of the formats you use are picked up by the browser, you can still serve your content using a Flash player, though it’s becoming less of an issue as we move forward.”
Here’s a code example you would use to play Flash. Ref: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
4. The native media elements have control options which you can turn on/off without the need for getting into scripting. You can turn off the play and pause button, the control bar, you can tell the file to autoplay and loop automatically. All of this is available through the markup of the media element. To see what options are available, visit: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video to learn more about the <video> element.
HTML5 Video Tips
When using the <video> tag, any text which you use will be displayed in browsers which do not support the <video> element.
When creating video, consider the size of the video on your pages. While it’s possible to scale videos to match page size, you’re far better off to output the video to match the actual size used on the page. Another consideration is file size. The smaller the file, the faster the video will load.
In keeping with the above, beware of the “one size fits all” approach to video. This approach might work if you only produce videos for the desktop but this can create havoc if you use the same video for a tablet or mobile layout. Two things will happen if you do, the video will have to scale to match those formats. Secondly, the video will be slower to load for table and mobile. If you plan to use responsive design, optimize your videos for each platform
Another consideration is the length of your videos. If you’re working with ‘cold traffic’ a video length of 1-3 minutes would be good. In situations where your audience knows you better, longer videos can be used.
When creating video for HTML5, be aware of quality settings. Higher settings offer better quality but increase file size and directly affect the upload speed.
When shooting video, use Progressive Mode: Interlaced video can have artifacts which will damage the quality of the image.
With mobile, there are some issues. It's best to embed the .MP4 code first. This will allow iOS devices to recognize it immediately.
About Craig Shoemaker
Check out the following courses b Craig Shoemaker: https://www.pluralsight.com/search?q=craig+shoemaker&categories=course For those of you who want more information about his background, here’s his bio: https://www.pluralsight.com/authors/craig-shoemaker and his Twitter handle: https://twitter.com/craigshoemaker