The Media Fragments Module

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

One W3C spec­i­fi­ca­tion which seems to have slipped below most peo­ple’s radar is Media Frag­ments 1.0, which moved to Can­di­date Rec­om­men­da­tion sta­tus in Decem­ber last year. Media Frag­ments is a syn­tax which extends the URLs of media files so that only select­ed por­tions are made avail­able to the user; let me explain that fur­ther with a cou­ple of examples.

Each Frag­ment type is known as a Dimen­sion, and the Tem­po­ral Dimen­sion sets a start and end point on media which is playable, such as audio and video. For exam­ple, if you had an audio file which you want­ed to play just a small piece of, you would use some­thing like this:

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

The t rep­re­sents time, and the two fig­ures are val­ues in sec­onds to play from and to — in this case, the sec­tion between 4 and 12 sec­onds. Fire­fox 9.0+, Safari 5.2 and Chrome have imple­ment­ed this already, so if you have one of those browsers here’s a demo of the Tem­po­ral Dimen­sion on a video file. When the page has loaded the play but­ton starts the video at the 4s mark and ends it on 12s. Note that the user can move the time­line con­trol around to play any por­tion of the video they wish.

Anoth­er use for Media Frag­ments is on the Spa­tial Dimen­sion — that is, only dis­play­ing a por­tion of a media file on screen. As an exam­ple, this is how you could extend an image:

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

The xywh stands for (respec­tive­ly) the x and y co-ordi­nates, plus height and width; in this case the por­tion of the image that would be dis­played would be 100px wide by 40px high, start­ing at a point 10px from the left and 10px from the top. As I’m sure you can imag­ine, this could be immense­ly use­ful for image sprites. Note that by default those val­ues are in pix­els, but you can use per­cent­ages if you prefer:

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

Of the oth­er two dimen­sions, the first is for pulling tracks from media con­tain­ers (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 con­tains named tem­po­ral frag­ments you can pull those using their ID val­ue — this is the ID Dimension:

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

If you’re keen to start play­ing around with Media Frag­ments, Google devel­op­er Thomas Stein­er has writ­ten the mediafragments.js library which pars­es URLs for known Dimen­sions and out­puts the result as JSON.

6 comments on
“The Media Fragments Module”

  1. You’re right, this has large­ly slipped past me although after read­ing your post I do vague­ly recall hear­ing about it some­time in the past. How­ev­er I was­n’t aware that it had already been imple­ment­ed by a brows­er or two. One to learn more about for sure, thanks for the prod.

  2. As the Media Frag­ments WG co-chair and edi­tor of this spec, I must react. First, thanks for your blog post. You might want to have a look at more imple­men­ta­tions of the spec, list­ed at

    Indeed, media frag­ments sup­port for the tem­po­ral dimen­sion is now native in Fire­fox and WebKit. Anoth­er great play­er is devel­oped by IBBT, and in par­tic­u­lar Davy van Deursen, see and play with both the spa­tial and the tem­po­ral dimension.

  3. I did­n’t even know about this. It looks fan­tas­tic. Why has it not been giv­en more publicity?

  4. This is awe­some! Thanks for the post.

  5. Hi there,

    Your arti­cle was fea­tured on this week’s HTML5 Week­ly ( Mean­while, I have released xywh.js, a poly­fill that adds spa­tial media frag­ments sup­port to browsers:


  6. […] The Media Frag­ments Module […]