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.
