media fragment

From IndieWeb


media fragment is a way of linking to a part of a longer media file. There is a W3C spec for this at https://www.w3.org/TR/media-frags/.

Why

Why link to

You should use a media fragment to link to a specific time index (or segment) of a media file if that’s the part you consider relevant, important, or want to make a comment about, like, repost, tag, bookmark, etc.

Similarly, if you are referencing an audio or video post, you should use a media fragment to link to a specific time index or segment.

Why handle media fragments

You should support handling media fragments on permalinks to your media (e.g. audio, video) posts so that links to them from others (see above) will playback for the listener/viewer what was intended by the author of the link.

How to

(stub)

How to handle media fragments

You can handle media fragments on your HTML page audio/video post permalinks, so others can use media fragments on your post URLs, by following the instructions here.

More details about how this works here:

Jon Udell has done some experimentation for Hypothes.is to create HTML5 Audio, HTML5 Video, and Youtube Clippers for making media fragments easier. Links to his tool and details on the process can be found at Open web annotation of audio and video. His online service can be found at AV clippers with the source on GitHub.

IndieWeb Examples

(stub to be expanded with subsections for each)

IndieWeb examples of sites and post permalinks that support media fragments:

Implementations

There is some support in browsers (Firefox, Webkit, Chrome) for temporal media fragments (start,end) on direct media file URLs.

Additionally, Aaron Parecki and Marty McGuire have a bit of Javascript on their websites which copies the media fragment from the HTML page to the inline media player, so you can use media fragments on their post URLs. See "How to" above for more details.

Brainstorming

Spatial for area tags

Is there some way to use spatial media fragments (image fragments?) to figure out another iteration of area-tags?

  1. You create a tag-reply (or person-tag) post (e.g. https://source.example.com/tags/100) on your website to a photo permalink page on my website (e.g. https://target.example.com/photos/100).
  2. You send a webmention using the spatial dimension media fragment syntax to https://target.example.com/photos/100#xywh=100,100,50,50 on my website.
  3. My website verifies the webmention and uses the details from your tag-reply/person-tag post to draw an <area> element within a <map> applied to the relevant image on my photo permalink page. Using the URL above, my website would draw a 50 pixel by 50 pixel box beginning at x/y coordinates 100, 100 with some user interface to denote the presence of the tag.
  • Jason Garber – The above flow doesn't account for tagging a specific photo on a multi-photo post page. One might consider multiple photos to be arranged in a specific order, thus creating a linear/spatial relationship between them. This interpretation might allow for the use of the id media fragment dimension to alert the original author of which photo you're tagging (where the id dimension value refers to an image's order within the collection or to its HTML id attribute value).

See Also