A hotspot is a defined clickable or tappable region overlaid on a video frame that, when activated, reveals supplementary information, opens a linked resource, navigates to another scene, or triggers a quiz question. Hotspots are authored as coordinate rectangles or polygons relative to the video canvas and are stored in a metadata layer — typically JSON — separate from the video file itself, so the video can be re-encoded or resized without losing the interaction data. The player renders the hotspot overlay on top of the HTML5 video element and scales the hit regions in proportion to the rendered video dimensions; failing to handle responsive scaling correctly is a common implementation gotcha that makes hotspots drift or miss on small screens. Click events on hotspots can be reported as xAPI statements using the xAPI Video Profile or a custom extension, allowing an LRS to record exactly which hotspot a learner clicked and when. Hotspots are closely related to overlays — the two terms are sometimes used interchangeably, though "overlay" more often refers to the content panel revealed by the click while "hotspot" refers to the clickable trigger region. In product training and compliance video, hotspots let designers annotate equipment, UI screenshots, or diagrams without breaking the flow of the narrative. The main accessibility requirement is that each hotspot must be reachable by keyboard and announced by a screen reader, which means every hotspot needs a focusable element and an ARIA label, not just a click handler on a canvas layer.
The handbook · 7 volumes
Fora Soft Video Engineering Handbook
A hotspot turns a frame into something clickable, but it has to track the right region and stay accessible to keyboard users. We wrote seven volumes that cover the whole video stack; for hotspots start with Volume 3, which covers players, overlays and timed metadata, with Volume 1 on encoding and Volume 4 on accessibility. Written by Nikolay Sapunov, CEO at Fora Soft.
Adding clickable hotspots to training videos that work on mobile and desktop?
We will design hotspot data, player overlays and accessibility for your interactive videos and give you an implementation estimate. 250+ video products shipped since 2005.
