The <video> tag in HTML5 is a great thing. It enables native video playback in all current browsers, rather than relying on a plugin like Flash. It opens the door to web video on devices that don’t support Flash. In this post i want share some useful HTML5 video techniques that you can use to add more features to HTML5 video element.
Adding captions and subtitles to HTML5 video
HTML5 allows us to specify captions for a video using the <track> element. The various attributes of this element allow us to specify such things as the type of content that we’re adding, the language it’s in, and of course a reference to the text file that contains the actual caption information.
Responsive HTML5 video
There are a couple of ways of approaching this, although none of them are perfect. The great debate about adaptive images continues, and is also appropriate here, as having something similar for both video and audio files would be ideal. Since no such solution is available, we have to look at alternatives.
Create Fullscreen HTML5 Page Background Video
While we can’t yet set a video for the background or background-image CSS properties – they can only take bitmaps, SVG images, colors and gradients as values – it is possible to fake the appearance of a background video by forcing it behind other HTML elements. The challenge is to have the video fill the browser window, making it as responsive as background images.
Using the Web Speech API to control a HTML5 video
The JavaScript Web Speech API has been around since October 2012 but has not really been implemented in any browser other than in Chrome, and even then only partially.
Video for Everybody!
Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 <video> element, falling back to Flash automatically without the use of JavaScript or browser-sniffing.
How to Code HTML5 Video Background in Email
Here’s a very good tutorial on how to code a video as the background of an email in HTML5.
Hiding Native HTML5 Video Controls in Full-Screen Mode
If you’ve ever worked with HTML5 video then you have probably wondered how you get a bunch of control buttons, sliders, and slider thumbs on your page, when you’ve only added a single <video> tag to the DOM.
Building Interactive HTML5 Videos
The HTML5 <video> element makes embedding videos into your site as easy as embedding images. And since all major browsers support <video> since 2011, it’s also the most reliable way to get your moving pictures seen by people.
Going Fullscreen: Scale and Define Focal Points for Responsive HTML5 Video
Because video is central to the site experience, video quality was a top priority. We couldn’t risk cropping out critical subject matter, but we still needed video with a 16:9 aspect ratio to fill the screen, even on portrait tablets like the iPad.
Syncing page content with HTML5 video
When it comes to (live) streaming video with HTML5, the situation is pretty dire. HTML5 Video currently has no formalized support for streaming whatsoever. Safari supports the awkward HTTP Live Streaming and there’s an upcomming Media Source Extension standard as well as MPEG-DASH. But all these solutions divide the video in shorter segments, each of which can be downloaded by the browser individually. This introduces a minimum lag of 5 seconds.
So here’s a totally different solution that works in any modern browser: Firefox, Chrome, Safari, Mobile Safari, Chrome for Android and even Internet Explorer 10.
