The Media Fragments Module

Warning This article was written over six months ago, and may contain outdated information.

One W3C specification which seems to have slipped below most people’s radar is Media Fragments 1.0, which moved to Candidate Recommendation status in December last year. Media Fragments is a syntax which extends the URLs of media files so that only selected portions are made available to the user; let me explain that further with a couple of examples.

Each Fragment type is known as a Dimension, and the Temporal Dimension sets a start and end point on media which is playable, such as audio and video. For example, if you had an audio file which you wanted to play just a small piece of, you would use something like this:

<audio src="/audio.ogg#t=4,12">

The t represents time, and the two figures are values in seconds to play from and to — in this case, the section between 4 and 12 seconds. Firefox 9.0+, Safari 5.2 and Chrome have implemented this already, so if you have one of those browsers here’s a demo of the Temporal Dimension on a video file. When the page has loaded the play button starts the video at the 4s mark and ends it on 12s. Note that the user can move the timeline control around to play any portion of the video they wish.

Another use for Media Fragments is on the Spatial Dimension — that is, only displaying a portion of a media file on screen. As an example, this is how you could extend an image:

<img src="/image.png#xywh=10,10,100,40">

The xywh stands for (respectively) the x and y co-ordinates, plus height and width; in this case the portion of the image that would be displayed would be 100px wide by 40px high, starting at a point 10px from the left and 10px from the top. As I’m sure you can imagine, this could be immensely useful for image sprites. Note that by default those values are in pixels, but you can use percentages if you prefer:

<img src="/image.png#xywh=percent:10,10,20,20">

Of the other two dimensions, the first is for pulling tracks from media containers (such as the audio track of a video file) — this is the Track Dimension:

<audio src="/video.webm#track=audio">

And if the source file contains named temporal fragments you can pull those using their ID value — this is the ID Dimension:

<img src="/video.webm#id=section1">

If you’re keen to start playing around with Media Fragments, Google developer Thomas Steiner has written the mediafragments.js library which parses URLs for known Dimensions and outputs the result as JSON.

6 comments on
“The Media Fragments Module”

  1. You’re right, this has largely slipped past me although after reading your post I do vaguely recall hearing about it sometime in the past. However I wasn’t aware that it had already been implemented by a browser or two. One to learn more about for sure, thanks for the prod.

  2. As the Media Fragments WG co-chair and editor of this spec, I must react. First, thanks for your blog post. You might want to have a look at more implementations of the spec, listed at http://www.w3.org/2008/WebVideo/Fragments/wiki/Showcase.

    Indeed, media fragments support for the temporal dimension is now native in Firefox and WebKit. Another great player is developed by IBBT, and in particular Davy van Deursen, see http://ninsuna.elis.ugent.be/MFPlayer/html5 and play with both the spatial and the temporal dimension.

  3. I didn’t even know about this. It looks fantastic. Why has it not been given more publicity?

  4. This is awesome! Thanks for the post.

  5. Hi there,

    Your article was featured on this week’s HTML5 Weekly (http://bit.ly/ZM7u9T). Meanwhile, I have released xywh.js, a polyfill that adds spatial media fragments support to browsers: https://github.com/tomayac/xywh.js.

    Cheers,
    Tom

  6. […] The Media Fragments Module […]