Eben.Design

Video Hotspot Creator

Description

This prototype web app enables the creation and precise placement of interactive hotspots on video content using HTML, CSS, and JavaScript. Users can define hotspots by assigning IDs, resizing, and positioning them in alignment with target objects in the video. The app outputs a JSON file containing detailed size and position data for each hotspot across video frames, ready for seamless integration into Tremor Video ads, enabling clickable overlays on video.

Goals

Provide an intuitive, flexible tool for creating, resizing, and positioning interactive hotspots on video content.

Ensure JSON output is fully compatible with Tremor Video ads, allowing for accurate clickable overlays on video.

Facilitate efficient, frame-level control over hotspot placement for reliable ad interactions.

Challenges

Designing an intuitive user interface for hotspot creation and positioning that integrates smoothly with video playback.

Capturing detailed hotspot positioning data frame-by-frame to ensure reliable JSON output.

Resolutions

Developed a streamlined menu system for defining and adjusting hotspot properties, allowing for precise alignment with video content.

Optimized JSON export for Tremor Video integration, ensuring smooth, clickable overlays.

Company

Tremor Video

Tech

HTML

CSS

JavaScript

Node.js

webpack

Bootstrap