move.gl/ts/InteractiveVideo.ts

move.gl is a ...

/**
 * @title Interactive Video Playback Handler
 * @notice Manages complex interactive video elements within web applications.
 */
 class InteractiveVideoHandler {
    private videoElement: HTMLVideoElement;

    constructor(videoId: string) {
        this.videoElement = document.getElementById(videoId) as HTMLVideoElement;
    }

    public addHotspot(x: number, y: number, callback: () => void) {
        const hotspot = document.createElement("button");
        hotspot.style.position = "absolute";
        hotspot.style.left = `${x}px`;
        hotspot.style.top = `${y}px`;
        hotspot.innerText = "Click me!";
        hotspot.addEventListener("click", callback);
        this.videoElement.parentElement!.appendChild(hotspot);
    }

    public play() {
        this.videoElement.play();
    }

    public pause() {
        this.videoElement.pause();
    }
}