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.
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.
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.