HTML5 Video: Fragments, Captions, and Dynamic Thumbnails

Originally published at: http://www.sitepoint.com/html5-video-fragments-captions-dynamic-thumbnails/

Web and application developers who want to do more with online video may find that three little-known, or at least less often discussed, HTML5 video features may open many new and creative techniques to integrate video in new ways.

In this article I’ll describe: media fragments, the track element, and HTML5 video’s ability to integrate easily with other elements.

Media Fragments

Media fragments or media fragment URIs are a W3C recommendation created to enable some aspects of native video handling in web browsers.

At present, this feature can be used to start or end video playback at a particular instant in time. One could imagine this feature enabling a sort of video sprite that allowed an HTML game developer, as an example, to load a single video file, but easily play different sections in response to some player action.

Continue reading this article on SitePoint

1 Like

This is an amazing well-timed article for me, so thanks very much. What’s the browser support like for these features? I can’t seem to look it up anywhere I normally look up this kind of thing.

I like the article - useful. I will share it on Tweeter.
Just curious:
Have you seen Animatron.com ?
You also may export content as video in HTML5.

Tracks is mentioned on Can i Use: http://caniuse.com/#feat=webvtt

As the demos indicate, they all at least work in some browsers.

Great additions but HTML5 player has browsers compatibilty issues

Have you checked lately? http://caniuse.com/#feat=video

Sure, it doesn’t work in Opera Mini … but then, does anything work in that?

:slight_smile: Thanks.

These are really good tips. I wish there were a way to save those thumbnails if the video is hosted on another domain. Because of the Same Origin Policy, you can’t use canvas context methods such as toDataURL() or getImageData() when the image rendered into the canvas comes from an “external” video. The only way I know of to get around this is to proxy the video with a local server-side script, which kind of defeats the purpose of hosting the video on a CDN.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.