Медиа-фрагменты — ещё один способ использования якорных ссылок

28.12.2025 • html

Вступление

Последние год-два на слуху были текстовые фрагменты — способ сделать ссылку на конкретный текст на странице сайта. Эта возможность начала попадать в контекстное меню браузера, ей начали пользоваться поисковые системы для генерации ссылок на конкретный участок сайта, появился ::target-text.

Но всё это время рядом была другая спека аж 2012 года, которая тоже использует якорные ссылки и которая даже была частично реализована в браузерах, но лично для меня она прошла полностью мимо. Добро пожаловать, сегодня мы посмотрим на “медиа-фрагменты”.

Временные якорные ссылки

Для видео и аудио можно задать ссылки на отрезок, который нужно воспроизвести. Это может быть только одна точка (начало или конец), так и обе. Синтаксис выглядит так:

video.mp4#t=[npt:][timeStart][,timeEnd]

npt — это необязательная часть, означает normal play time и сделана она с расчётом на будущие дополнения к спеке.

Время может быть задано в разных форматах:

• s просто секунды
• mm:ss минуты и секунды
• hh:mm:ss часы, минуты, секунды

Итого получается примерно следующее:

big_buck_bunny_720p_surround.mp4#t=65,68

‘Big Buck Bunny’ имеет лицензию CC 3.0 от Blender foundation. Расположено на хостинге archive.org

Это работает с Хрома 18, Сафари 6, Файерфокса 34.

Ещё один способ использования этого синтаксиса — svg и SMIL анимации. Эта возможность заявлена в 147 бета-версии Файерфокса.

Якорные ссылки на главы и аудио/видео-дорожки

Есть ещё несколько возможностей, например, перейти к нужной главе:

#id=<id>

Способ выбрать конкретный трек:

#track=<track>

Это позволяет, к примеру, воспроизвести именно русскую дорожку, а не английскую.

Завести обе эти конструкции у меня не получилось, но, возможно, я что-то упустил.

Пространственные якорные ссылки для обрезки изображений

Начиная с Файерфокса 147, появилась возможность обрезать изображение (crop) прямо в урле:

test.svg#xywh=[unit:]xCoord,yCoord,width,height

unit может быть pixel и percent (pixel используется по дефолту). Проценты пока что работают не как задумано и рекомендуется их избегать.

Данный синтаксис можно использовать для тегов <img>, так и для background-image.

Можно заметить, что похожий эффект можно достигнуть с помощью обрезки фона. Однако пространственные ссылки могут быть удобнее, особенно, если картинка должна занимать не весь элемент или если для картинки необходимо повторение.

Также это работает и для data-uri! Общая конструкция выглядит так: data:image/svg+xml;base64,<data>#xywh=<x>,<y>,<w>,<h>.

Теперь о минусах:

1. Работает только с SVG
2. Непонятки с соотношением сторон. Текущая реализация в Файерфоксе не искажает картинку (что полезно в ряде ситуаций). Но при этом отображение работает не очень очевидным образом

Итого

Временные якорные ссылки можно использовать уже сейчас, и это было бы полезно для начала видео с нужной главы и подобного. Для SVG пока что мало применений, да и их можно реализовать с помощью JS.

Пространственные якори пока что работают только в одном браузере, только в SVG и имеют не так много применений.

Посмотрим, возможно, всё это — оживление старого стандарта и нас ждут новые варианты в будущем?