files/en-us/web/uri/reference/fragment/media_fragments/index.md
Media fragments can be included on media file (for example, video and SVG) URLs to indicate that you want to show a subset of the media: A certain duration or a certain dimension.
When displaying multiple chunks of media, it could be more convenient and efficient to include all the media inside a single file, and then show only the required part of the content in each case.
Media fragments allow you to do this via URL fragments. The specification defines two different types:
https://example.com/video.mp4#t=[npt:][timeStart][,timeEnd]
The key parts of the syntax are:
t=
npt: {{optional_inline}}
npt stands for normal play time, and is the default and only supported format, therefore this part can be omitted.timeStart {{optional_inline}}
timeEnd {{optional_inline}}
The timeStart and timeEnd values can be specified in the following formats, which can be mixed within the same fragment:
seconds
0 or above, which can include a decimal portion to indicate a fraction of a second.hh:mm:ss
0 or above. The minute value is an integer between 0 and 59. The second value is a number between 0 and 59, which can include a decimal portion to indicate a fraction of a second.mm:ss
0 and 59. The second value is a number between 0 and 59, which can include a decimal portion to indicate a fraction of a second.So for example, the following fragments would all play the media from the start to 5 seconds in:
#t=0,5
#t=,5
#t=0:00:00,5
#t=00:00,0:00:05
The following two fragments would both play the media from 2 seconds into the media until the end.
#t=2
#t=0:00:02
The following fragments would play the media from 2 seconds into the media until 3.5 seconds in.
#t=2,3.5
#t=0:00:02,3.5
#t=0:00:02,00:03.5
https://example.com/test.svg#xywh=[unit:]xCoord,yCoord,width,height
The key parts of the syntax are:
xywh=
unit: {{optional_inline}}
xCoord, yCoord, width, and height. Defaults to pixel: if omitted. Possible values are:
pixel:
percent:
xCoord
yCoord
width
height
So for example, the following fragments would both display a 320x240 pixel box whose top-left corner is 160px from the left and 120px from the top of the original media.
xywh=160,120,320,240
xywh=pixel:160,120,320,240
The following fragment would display a 50%x50% box whose top-left corner is 25% from the left and 25% from the top of the original media.
xywh=percent:25,25,50,50
The following HTML snippet embeds a video and an audio snippet on the page and includes temporal fragments on the media URLs to limit the amount of media playback:
<video controls width="250">
<source src="/shared-assets/videos/flower.mp4#t=2,4" type="video/mp4" />
</video>
<hr />
<audio controls src="/shared-assets/audio/t-rex-roar.mp3#t=,00:01"></audio>
This renders like so:
{{embedlivesample("limited-time", "100%", 220)}}
Try playing the video and audio files using the provided players to see how the temporal fragments affect playback. The original video is 5 seconds long, but a snippet between seconds 2 and 4 is played. The original audio is 2 seconds long, but only the first second is played.
In this example we embed an SVG image into the page using an {{htmlelement("img")}} element, and also include the same image as a CSS background on a {{htmlelement("div")}} element.
On the `` element source, we include a spatial fragment, #xywh=100,100,400,400, which displays a 400x400 pixel portion of the image with its top-left corner at a coordinate of (100,100) from the original image's top-left corner. We set width and height to 200, which causes the cut out image portion to be displayed at a size of 200x200 pixels.
<hr />
<div class="bgtest"></div>
We set a CSS {{cssxref("background-image")}} on our <div> element that points to the same SVG image. This time, the spatial fragment is #xywh=100,100,100,100, which makes the image portion 100x100 pixels with its top-left corner at a coordinate of (100,100) from the original image's top-left corner. We set the {{cssxref("background-size")}} property to 50px 50px, so the portion is tiled across the <div> background at a size of 50x50 pixels.
.bgtest {
width: 100%;
height: 200px;
background-image: url("/shared-assets/images/examples/firefox-logo.svg#xywh=100,100,100,100");
background-size: 50px 50px;
}
The above code renders like this:
{{embedlivesample("limited-dimension", "100%", 440)}}
{{Specifications}}
Support for media fragments is limited to the following contexts:
<audio> and <video> elements) in all modern browsers.