Hotspot shapes

Hotspots are clickable areas over the video that don't pause it. This one scene has four, one for each built-in variant:

• The door is a rect with the default outline variant.
• The sun is an ellipse with the pulse variant.
• The mountain is a polygon with the label variant, which shows its label.
• The key in the top right corner uses the hidden variant: invisible, but still clickable. Can you find it?

1. Events will show up here.

None of these hotspots has a goto, so clicking them only reports an iv-hotspot event, shown in the log. Clicks follow the exact shape: try clicking just outside the sun's circle, or beside the mountain's slopes.

Hotspots are real buttons, so you can also reach them with Tab and activate them with Enter.

Story

import type { Story } from "@ivkit/core";
import { video } from "./video";

export const shapes: Story = {
  version: "0.1",
  start: "shapes",
  scenes: {
    shapes: {
      src: video("shapes"),
      events: [
        {
          type: "hotspot",
          id: "door",
          from: 0,
          label: "The door",
          area: { x: 0.1, y: 0.35, width: 0.16, height: 0.5 },
        },
        {
          type: "hotspot",
          id: "sun",
          from: 0,
          label: "The sun",
          shape: "ellipse",
          variant: "pulse",
          area: { x: 0.42, y: 0.15, width: 0.16, height: 0.3 },
        },
        {
          type: "hotspot",
          id: "mountain",
          from: 0,
          label: "Mountain",
          shape: "polygon",
          variant: "label",
          points: [
            [0.66, 0.85],
            [0.81, 0.4],
            [0.96, 0.85],
          ],
        },
        {
          type: "hotspot",
          id: "key",
          from: 0,
          label: "A hidden key",
          variant: "hidden",
          area: { x: 0.875, y: 0.08, width: 0.05, height: 0.09 },
        },
      ],
    },
  },
};

Reacting to clicks

player.addEventListener("iv-hotspot", (event) => {
  const { hotspot } = event.detail;
  if (hotspot.id === "key") showToast("You found the hidden key!");
});

Learn more: Shapes · Variants · Player events