HTML5 is the longest HTML specification ever created. It touches upon numerous web design aspects: navigation, forms, semantics, etc. However, the major HTML5 advantage is the cross-platform visibility of multimedia content due to the total refusal from third-party proprietary plugins and APIs. There is no more need to use a Flash plugin to play a web video, as in HTML5 it runs in the native in-browser player embedded via <video> tag. This new markup element has its own peculiarities, which web designers should take into account while projecting web pages. Here are the top seven things about HTML5 video you also might not know.

1. HTML5 Requires Certain Video Formats

HTML5 video should be presented at least in one of the three recommended video formats: MP4, WebM or OGG. You may simply stick to MP4 format that now is supported by all major browsers:

Only make sure that your MP4 video is encoded with H.264 video and AAC audio codecs.

If you want to provide a native playback in as many browsers as possible, you’ll need to also include either an OGG or WebM rendition.

To prepare video files for HTML5 web player, you may use Freemake Video Converter. This free Windows software converts videos to all HTML5 compatible formats in bunch. Alternatively, you may use Handbrake to get just MP4 H.264 files. It provides more options for video customization.

2. Old Browsers Ignore HTML5 Video

Old Internet Explorer versions (8.0 or lower) do not support HTML5 <video> tag. Since the number of IE 6/7/8 users is still high, you should take care of those site visitors and provide Flash fallback for your HTML5 videos. This can be done using an <object> tag referring to a third-party SWF file. View a sample code:

3. YouTube Offers HTML5 Format by Default

Since January 2015 YouTube serves videos in HTML5 format by default. It means that you may upload your video to YouTube, integrate it onto your site via embed code and the video will be played in all devices. The only drawback of YouTube embed player is overlay advertising which is impossible to switch off in case you use third-party audio track in your video. To embed a video from YouTube, under the video click Share, then Embed, Show more. Customize settings and copy the code onto a web page.

4. Controls, Autoplay, Loop, Muted

HTML5 video provides several parameters you may switch on or off by simple adding or removal from the <video> tag. Such attributes are:

– controls – used to show default video controls like Play, Pause, Volume;

– autoplay – makes the browser immediately start playing the video;

– loop – tells the browser to automatically loop the video;

– muted – mutes the audio from the video.

These attributes are called binary, they enable the behavior when present, and do not when absent.

5. Captions and Subtitles

HTML5 provides an easy way to embed text alongside with your video. The <track> element provides a simple, standardized way to add subtitles, captions, screen reader descriptions and chapters to your video. This is a good way to improve video accessibility and make it possible for search engines to understand what is in the video. Here is the sample code showing how <track> element is used:

6. Custom HTML5 Video Players are Expensive

YouTube provides easy video embedding, but almost no options for player customization. If you want a video player to fit your corporate style, you should opt for a proprietary HTML5 video player. With such a player, you may set a custom player color, change controls, and add logos and call-to-actions on your video. However, such options start from $149 (JW Player). In case you want to stream a live video, be ready to pay $1000 monthly for Kaltura Video Player.

7. Canvas Interactivity

HTML5 video elements can interact with other elements like <canvas> to provide a completely new experience. For example, you can make your video explode when you click on it or change the background color of the page based on the primary colors in the video. Follow this guide to combine <video> and <canvas> elements for better user experience on your site.

Looking for more web help? Check out what the designers at Go Media have in store!