Branching story

The simplest interactive video: at second 4, the video pauses and asks where to go. Each option jumps to a different scene, and the story ends when that scene finishes.

1. Events will show up here.

The log under the player shows the events <ivkit-player> dispatches. Use them for analytics, or to react to the viewer's choices elsewhere on the page.

Story

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

export const adventure: Story = {
  version: "0.1",
  start: "intro",
  scenes: {
    intro: {
      src: video("adventure-intro"),
      events: [
        {
          type: "question",
          id: "path",
          at: 4,
          text: "Where do you want to go?",
          options: [
            { id: "forest", label: "Into the forest", goto: "forest" },
            { id: "city", label: "To the city", goto: "city" },
          ],
        },
      ],
    },
    forest: { src: video("adventure-forest") },
    city: { src: video("adventure-city") },
  },
};

Page

<ivkit-player controls></ivkit-player>

// main.ts, bundled with Vite or similar
import "@ivkit/player";
import { adventure } from "./adventure";

const player = document.querySelector("ivkit-player")!;
player.story = adventure;
player.addEventListener("iv-answer", (event) => {
  console.log("Picked", event.detail.choice.id);
});

Without a bundler, see Try it in one HTML file.

While the question is showing, the player preloads the scene of the first option, and switches to the chosen scene without a black frame.

Learn more: Questions · Player events