[css-values-5][css-images-4] Allow to change the playback range of media via URL fragment

[SebastianZ]

Initially suggested by @samuelbredshaw in #9396 (comment), is the idea of allowing to control the playback range of media ‒ animated images in that case, but also applies to video and audio.
As that's a similar but separate feature, I thought this deserves to be discussed on its own.

Samuel actually thought of adding playback control via a special #t=[starttime][,endtime] URL fragment added to the image URL of an <img> element.

My idea is now to allow this special anchor to clip media defined in URLs defined via the <url> value. That clipping should apply wherever animated images, video, or audio are used in CSS.

As an example, an animated background image could then be clipped to the first three seconds like this:

background-image: url("https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExeXhmc3Q4dzIzZGJ5NzJ2dGUwaTlwNHdkaHRzeDk0bWI5eXpyazJ0aCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/13FrpeVH09Zrb2/giphy.gif#t=,3");

Sebastian

[Crissov]

That’s just explicitly mentioning that temporal media fragments should be supported in <url> (at least when used for <image>), isn’t it?

General support for that could be improved indeed, but apparently it is still better than for spatial media fragments.

I don’t know if browser vendors would be more likely to implement URL modifiers that did the same thing essentially but were limited to CSS. If this was format-specific, it could become part of param(), but I believe it is generic enough.

[SebastianZ]

Yes, thanks! I missed the spec. and correct term for them.

Whether the feature should be implemented as URL modifier or as media fragment (or both) is up for discussion. I used the media fragments syntax because that's what's already defined. I don't have a strong opinion about it.

Sebastian

[LeaVerou]

This seems 100% reasonable, but I'm not sure this is within the purview of the CSS WG. The Media Fragments spec was developed in a separate WG, which is now closed as the spec reached REC. For new additions, I believe the WG responsible would be the Media WG. I just opened w3c/media-wg#54 over there.

[SebastianZ]

Thank you, @LeaVerou, for raising the issue in the Media WG! It seems, adding animated images to the allowed media types for temporal media fragments requires re-chartering the Media Fragments Working Group.

To avoid that dependency, we might go the way suggested by @Crissov above and introduce URL modifiers for that.

Those could be two functions start(<time [0s,∞]>) and end(<time [0s,∞]>) plus possibly a range(<time [0s,∞]>, <time [0s,∞]>) function (maybe with a time- prefix to avoid ambiguities).

With those, the example above could be expressed as

background-image: url("https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExeXhmc3Q4dzIzZGJ5NzJ2dGUwaTlwNHdkaHRzeDk0bWI5eXpyazJ0aCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/13FrpeVH09Zrb2/giphy.gif" end(3s));

Sebastian

[LeaVerou]

Given UAs have not implemented src() for years, I'm not sure something like that is likely to ship before the Media WG recharters in 2027 😅
Also, architecturally we should not be duplicating functionality in CSS entirely on the basis of WG charter timelines.

Additionally, while this is a nice-to-have, it doesn't really cover any of the author pain points around animated images, for which there are better solutions (that don't go through media fragments). @frivoal and I have been working on this and plan to post some proposals before the upcoming F2F.

[Crissov]

URL modifiers are supposed to work inside url() as well, for what it’s worth.

[SebastianZ]

Yes, this applies to all <url> values, i.e. to both src() and url(). To avoid further derailing discussions, I've replaced src() by url() in my examples, now.

(But yeah, I wished UAs would push to implement src(), as it's superior to url().)

Sebastian