Хотспоты, наложения и кликабельное видео

Кратко

Хотспотом называют кликабельную область поверх видео, оверлеем – визуальный слой, который появляется над картинкой в заданный момент. Вместе они превращают обычный ролик в материал, который учащийся изучает сам: нажимает на детали, открывает пояснения, переходит к нужному фрагменту. Технически все эти элементы размещаются на прозрачном слое над плеером и привязаны к ролику метками времени (часто через метаданные WebVTT), а их координаты задаются в процентах, чтобы элементы оставались на месте при любом размере экрана. Учебный инструмент от украшения отличают две инженерные задачи: трекинг (при клике плеер отправляет xAPI-утверждение, и взаимодействие становится данными) и доступность (хотспоты работают с клавиатуры и имеют размер не меньше 24×24 пикселя, как требует WCAG 2.2). Ниже разбираем, из чего состоит кликабельное видео, как его создают и отслеживают, почему с доступностью кликабельных элементов на видео легко ошибиться и когда хотспот уместнее квиза или ветвящегося сценария.

Почему это важно

Для руководителя L&D, основателя EdTech-проекта или продакт-менеджера хотспоты – самый дешёвый способ сделать видео интерактивным. И одновременно самый простой способ сделать интерактив плохо. Они хорошо подходят для обучения, где важно, что где находится: подписать части механизма, показать элементы управления в демонстрации программы, дать учащемуся рассмотреть сцену в своём темпе. Но если хотспот не видит скринридер или он слишком мал для пальца, страдают как раз те учащиеся, которым интерактив нужнее всего. А вузу или колледжу такой контент мешает выполнить обязанность создавать специальные условия для обучающихся с ОВЗ (ст. 79 273-ФЗ). Статья поможет оценить кликабельное видео: что именно вы покупаете, как клик превращается в данные и от каких правил доступности зависит, смогут ли люди вообще пользоваться вашим интерактивным видео. Парный материал – Ветвящиеся сценарии: ветвление – самый дорогой интерактивный формат, хотспоты – один из самых дешёвых.

Что такое «кликабельное видео»

Начнём с бытового примера. В музее с аудиогидом вы стоите перед картиной, набираете номер с таблички и слушаете рассказ об этой детали. Кликабельное видео устроено так же, только внутри плеера. Пока идёт ролик, отдельные объекты на экране (кнопка, подписанная деталь, область кадра) реагируют на клик или касание: показывают пояснение, переносят к другому моменту или открывают материал. Учащийся уже не просто смотрит, а сам выбирает, что изучить.

Почти всё в этой теме описывается тремя понятиями. Их стоит различать, потому что ведут они себя по-разному.

Хотспот – кликабельная область поверх части кадра: невидимая или слегка обозначенная зона, которая срабатывает при нажатии. Её можно представить как наклейку-кнопку на экране. Оверлей – визуальный слой с привязкой ко времени: подпись, метка, изображение или кнопка с призывом к действию, которые появляются в заданный момент и затем исчезают. Это что-то вроде листа кальки, наложенного на кадр. Встроенным ресурсом называют то, что открывается по клику: всплывающий текст, ссылку на документ, короткий квиз или переход к другому месту ролика.

На практике они работают вместе. На 0:45 появляется оверлей с подписями к трём частям насоса, каждая подпись служит хотспотом, а клик по ней открывает встроенный ресурс с пояснением. Если с самого начала не смешивать эти понятия, проще и спроектировать интерфейс, и настроить трекинг.

Нажмите, чтобы увеличить

Как это устроено под капотом

Чтобы решить, разрабатывать своё или покупать готовое, не обязательно быть инженером. Но если понимать устройство хотя бы на уровень глубже интерфейса, проще задавать подрядчикам и вендорам правильные вопросы.

В основе любого веб-плеера лежит HTML-элемент <video>, встроенное в браузер окно воспроизведения. Кликабельное видео добавляет над ним второй, прозрачный слой той же ширины и высоты, что и картинка. Хотспоты и оверлеи – обычные веб-элементы (кнопки, блоки, изображения), расставленные на этом слое. Слой лежит выше видео, поэтому клик достаётся элементу, а не плееру под ним.

Важны две вещи. Первая – тайминг: каждый хотспот или оверлей должен появляться и исчезать в нужный момент. Стандартное решение даёт WebVTT (формат W3C Web Video Text Tracks, на котором работают и субтитры) в режиме метаданных. Каждая реплика (cue) на такой дорожке содержит интервал времени и вместо текста субтитра – небольшие данные вроде «показать хотспот A». Когда позиция воспроизведения входит в интервал cue или выходит из него, браузер генерирует событие cuechange, и ваш код показывает или скрывает элемент. В спецификации WebVTT такой сценарий описан прямо: «помимо субтитров, WebVTT можно использовать для метаданных с привязкой ко времени», которые передаются в cue парами имя-значение (W3C WebVTT, 2019).

Вторая – позиция. Хотспот, закреплённый в точке «x = 480 пикселей, y = 270 пикселей», съедет, как только видео уменьшится под экран телефона. Поэтому координаты хранят в процентах от кадра («60% по ширине, 50% по высоте»), и хотспот остаётся над той же деталью при любом размере. Так устроены все серьёзные инструменты; если вы пишете свой плеер, с этого и стоит начать.

Минимальный пример: тайминг через дорожку метаданных и стандартное событие cuechange.

// Дорожка метаданных показывает хотспоты над <video> по времени.
const track = video.textTracks[0];      // kind="metadata"
track.mode = "hidden";                   // активна, но не показана как субтитры
track.addEventListener("cuechange", () => {
  for (const cue of track.activeCues) {
    const spot = JSON.parse(cue.text);   // { id, xPct, yPct, label }
    showHotspot(spot);                   // позиция в %, отрисовать цель
  }
});

В этом вся идея: cue задаёт, когда показать элемент, координаты в процентах – где, а обработчик клика – что произойдёт. Всё, что добавляют инструменты авторинга (визуальный редактор, оформление, аналитика), надстраивается над этой основой.

Инструменты: чем создают хотспоты

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

Таблица 1. Инструменты для создания хотспотов и оверлеев. Колонка «Поддержка стандартов» показывает, можно ли отслеживать взаимодействие через LMS или Learning Record Store: кликабельная область, которая ничего не сообщает, для аналитики не существует.

Бесплатных и недорогих инструментов, прежде всего H5P, хватает для большинства задач, и начинать стоит с них. Open-source H5P умеет делать навигационные хотспоты, которые «выделяют область внутри видео, при клике перенаправляющую зрителя либо к конкретной точке видео, либо на внешний URL», а также хотспоты на изображениях и оверлеи по времени. Для большинства учебных сценариев этого достаточно, а лицензия ничего не стоит (документация H5P). Российскому вузу это особенно удобно: H5P встроен в Moodle, стандарт де-факто университетских ЭИОС, поэтому интерактивное видео собирается без отдельной платформы (документация Moodle). Собственную разработку поверх российского видеохостинга начинают, когда нужны фирменный плеер, более глубокая аналитика, единый вход (SSO) в корпоративную систему или полный контроль над доступностью. Чаще всего всё решают доступность и трекинг: в готовых инструментах они реализованы очень по-разному.

Зарубежных платформ интерактивного видео в таблице нет намеренно. Дело не только в оплате: xAPI-утверждение с идентификатором учащегося содержит персональные данные, а с 1 июля 2025 года сбор и хранение ПДн граждан РФ в базах за пределами России не допускаются (ч. 5 ст. 18 152-ФЗ). Поэтому LRS и аналитика кликов должны работать в российском контуре.

Трекинг: как клик превращается в данные

Хотспот без измерений – просто украшение. Учебным инструментом его делает трекинг: система фиксирует, что учащийся кликнул, по чему именно и когда, и по этим данным видно, работает ли интерактив.

Для этого есть стандарт Experience API (xAPI), по которому плеер записывает в базу короткие фразы о действиях учащегося. Каждая такая фраза называется xAPI-утверждением и строится по схеме субъект – глагол – объект: «Лена – interacted with – хотспот клапана насоса». Утверждения уходят в Learning Record Store (LRS), хранилище учебных записей. Для действий с плеером, которые не сводятся к play, pause и seek (клик по хотспоту как раз из таких), xAPI Video Profile предусматривает отдельный глагол interacted: он означает, «что субъект взаимодействовал с плеером», помимо базовых элементов управления (xAPI Video Profile, ADL). Так каждое нажатие на хотспот записывается строго по стандарту.

Ролик с хотспотами остаётся видео, поэтому вместе с кликами можно отслеживать и само воспроизведение. Для этого в xAPI Video Profile есть глаголы played, paused, seeked и completed для типа активности https://w3id.org/xapi/video/activity-type/video. Если собирать и то и другое, по одной сессии видна понятная картина: учащийся посмотрел ролик, открыл два хотспота из трёх и досмотрел до конца. Подробно трекинг видео разобран в статье Трекинг видео через xAPI Video Profile.

Если видео запускается в LMS по более старому стандарту упаковки курсов SCORM, клик тоже можно записать, но только как одно из фиксированных interactions. Модель данных SCORM ограничена (завершение, балл, время, заранее заданный набор interactions) и не допускает произвольных событий, которые позволяет xAPI. Разница принципиальная: SCORM фиксирует завершение и ограниченный набор полей, а xAPI с Video Profile – любое взаимодействие, которое вы решите отправить. Подробное сравнение – в статье SCORM, xAPI, cmi5, LTI: какой стандарт.

Нажмите, чтобы увеличить

Доступность: с кликабельными элементами на видео всё сложнее, чем кажется

Эту часть большинство проектов интерактивного видео недооценивают, и именно здесь нам в Фора Софт чаще всего приходится что-то переделывать. Кликабельные объекты поверх движущейся картинки создают проблемы доступности, которых у обычной веб-страницы нет. Важнее всего четыре правила. Все они входят в Web Content Accessibility Guidelines (WCAG) 2.2 уровня AA, а три из них есть уже в WCAG 2.1, на которой построен ГОСТ Р 52872-2019 о доступности интерфейсов для людей с инвалидностью. Национальный стандарт применяется добровольно, пока на него не сошлются договор, техническое задание или локальный акт. Но для вуза, колледжа или корпоративного заказчика, которому нужно создавать специальные условия для обучающихся с ОВЗ, это естественный ориентир. Разумная планка для продукта: как минимум ГОСТ Р 52872-2019 плюс критерий размера цели из WCAG 2.2.

Хотспот должен быть достаточно крупным. Критерий успеха 2.5.8 Target Size (Minimum) уровня AA появился в WCAG 2.2. Он требует, чтобы кликабельные цели были не меньше 24 на 24 CSS-пикселя, если вокруг них нет достаточного отступа или они не встроены в текст (W3C WCAG 2.2). В WCAG 2.1, а значит и в основе ГОСТ, размер цели нормируется только на строгом уровне AAA: 44×44 пикселя (критерий 2.5.5). Пример: хотспот в виде точки 16 пикселей сам по себе критерий не проходит. Он пройдёт, только если в круг диаметром 24 пикселя с центром в этой точке не попадает ни одна другая цель. Надёжное правило: каждый хотспот не меньше 24×24, важные элементы – 44×44. Палец на телефоне куда менее точен, чем мышь, и от размера хотспотов зависит, получится ли вообще пройти урок.

Хотспот должен работать без мыши. По критерию 2.1.1 Keyboard (уровень A) до каждого хотспота можно дойти клавишей Tab и активировать его клавишей Enter или пробелом, порядок фокуса логичен, а рамка фокуса видна. Хотспот, который реагирует только на клик мышью, полностью недоступен тем, кто управляет компьютером с клавиатуры или с помощью специальных кнопок-переключателей. Это самая частая ошибка в самописном кликабельном видео.

Всплывающие оверлеи должны закрываться и не исчезать сами. Критерий 1.4.13 Content on Hover or Focus (уровень AA) касается всплывающих подсказок и оверлеев: учащийся должен иметь возможность закрыть оверлей, навести на него курсор так, чтобы тот не пропал, и видеть его, пока сам не уведёт курсор или фокус. Оверлей, который мелькает и скрывается раньше, чем человек успевает дочитать, этот критерий не проходит, да и остальных раздражает.

Не полагайтесь только на цвет или движение. Обозначайте хотспот формой и подписью, а не одним цветом, и не заставляйте учащегося искать его по принципу «угадай, что шевелится». Само видео при этом должно иметь субтитры и тифлокомментарий (аудиоописание), об этом в статье WCAG 2.1 AA и ГОСТ Р 52872-2019 для учебного видео.

Нажмите, чтобы увеличить

Частая ошибка: хотспотами нельзя пользоваться, а результат нельзя измерить

Типичная ошибка – считать кликабельное видео чисто визуальной задачей («расставили точки и выпустили») и слишком поздно обнаружить, что скринридеры этих точек не видят, на телефоне по ним трудно попасть, а в аналитику от них ничего не приходит. На демонстрации всё выглядит интерактивно, а в реальной работе не годится: учащиеся с инвалидностью не могут пользоваться уроком, пользователи телефонов промахиваются, а данных о том, кликнул ли кто-нибудь хоть куда-то, нет.

Доступность и трекинг должны входить в критерии готовности функции, а не откладываться на финальную доработку. Пока у каждого хотспота нет доступа с клавиатуры, размера не меньше 24×24 пикселя, текстовой подписи и xAPI-утверждения при нажатии, функция не считается готовой. Заранее решите и то, как хотспоты связаны с завершением урока. Клик по хотспоту говорит о вовлечённости, а не об освоении материала, поэтому «кликнул все хотспоты» не должно засчитываться как «освоил тему». Завершение привязывайте к результату квиза или другому сигналу прохождения, как в квизах в плеере, а не к одним кликам. Все проверки собраны на одной странице в чек-листе ниже.

Скачать чек-лист доступности и трекинга кликабельного видео (PDF)

Когда хотспот – правильный выбор

Кликабельное видео стоит недорого, поэтому главный вопрос не «можем ли мы себе это позволить», а «подходит ли такое взаимодействие для учебной цели». Сначала определите задачу, потом выбирайте формат.

Хотспоты и оверлеи оправданы, когда обучение пространственное или исследовательское: узнать части оборудования, пройти по интерфейсу, разобрать схему или сцену, дать дополнительный материал «узнать больше» для самых мотивированных. Учащийся изучает материал в своём темпе, любопытство поощряется, вовлечённость растёт, а снимать альтернативные варианты сюжета не нужно.

Хотспоты не подходят, когда нужно проверить понимание: для этого есть квиз в плеере, который даёт балл и задействует эффект тестирования. Не справятся они и там, где нужно отработать серьёзное решение: это задача для ветвящегося сценария, который стоит намного дороже, зато учит принимать решения. Практическое правило: начинайте с хотспотов, потому что они дешёвые; добавляйте квиз, когда нужна оценка; ветвление оставляйте для решений с высокой ценой ошибки.

Нажмите, чтобы увеличить

Где здесь Фора Софт

Фора Софт разрабатывает видеоплееры и интерактивное видео с 2005 года. Кликабельное видео объединяет две задачи, которыми мы занимаемся постоянно: слой оверлеев поверх плеера и трекинг, превращающий клики в учебные данные. К нам обращаются, когда готовый инструмент авторинга не даёт нужного контроля над доступностью, фирменного плеера или глубины аналитики, то есть когда вопрос уже не «какой инструмент купить», а «что разработать». Нередко мы советуем начать с H5P в Moodle или готового конструктора курсов. Если же собственный движок оверлеев действительно оправдан, мы делаем его с полным xAPI-трекингом, LRS в российском контуре и соответствием ГОСТ Р 52872-2019 и WCAG 2.2 AA. Над ним работает та же команда, что ведёт проекты в e-learning, видеоконференциях, OTT, телемедицине и AR/VR.

Ключевые выводы

• Хотспот – кликабельная область; оверлей – слой, который появляется в заданный момент; по клику открывается встроенный ресурс.
• Все элементы размещаются на прозрачном слое над видео и привязываются к меткам времени, а их координаты задаются в процентах, чтобы не съезжать на разных экранах.
• Каждый клик записывайте как xAPI-утверждение (глагол interacted из Video Profile), тогда взаимодействия попадут в аналитику. Утверждения содержат ПДн учащихся, поэтому LRS должен работать на базах в России.
• Хотспоты на видео должны соответствовать ГОСТ Р 52872-2019 и WCAG 2.2 AA: не меньше 24×24 пикселя, доступ с клавиатуры, закрываемые оверлеи, подписи вместо одного цвета.
• Клик по хотспоту говорит о вовлечённости, а не об освоении, поэтому «кликнул все хотспоты» не должно означать «завершил урок».
• Хотспоты подходят для пространственного обучения, квиз – для проверки понимания, ветвление – для серьёзных решений.

Что почитать дальше

• Квизы и опросы в плеере: дизайн и трекинг
• Трекинг видео через xAPI Video Profile
• Ветвящиеся сценарии: видео с выбором пути