TIL how to deeplink all the things
I have written before about how to link to a specific segment of a youtube video, and how to link to specific words or paragraphs within a webpage. I even knew, vaguely, that you could link to pages of PDFs. But, all in the course of a normal workday researching a blogpost, I found myself wanting reference a specific ~30 second chunk of a Marx Brothers movie from 1935, and the last page of a PDF about a piece of public art.
The PDF was easy, using the #page=n syntax.
As for the scene from the movie: nobody had clipped that specific part out and put it on YouTube – in fact, I didn’t even find the scene I was looking for – but I did find an mp4 on the Internet Archive with a scene that fit my requirements.
It turns out, you can link to a specific segment of an Mp4, too!
This is thanks to the Media Fragments URI 1.0 (basic) W3C spec recommendation from 2012. According to CanIUse, media fragments are supported by all major browsers (97-99% of users).
The syntax is nice: https://example.com/video.mp4#t=startTime,endTime
(Notice that it’s a pound/hash symbol. I always wanted to use a question mark.)
An actual example:
What’s especially cool is that you can play from (only specify start time):
https://dn721608.ca.archive.org/0/items/a-night-at-the-opera-1935-HD/A Night at the Opera.mp4#t=250,
…play to (only specify end time):
…or play a segment (specify both start and end time):
And, you can format the timestamps as seconds by using a plain integer, or as hh:mm or hh:mm:ss . (You can also, weirdly, use h:mm:ss format.) This is generally more convenient, since most video players reference current playhead location using hours and minutes, not seconds.
And it works for audio files too?!
Look at how much good stuff I have been missing out on!
While we are at it: you can also crop SVGs. I didn’t know that, either.
At this point I’m just duplicating the excellent, slightly more intimidating article on MDN, so if you like what you’ve heard, go read it.