Video
Add georeferenced video overlays to your maps with playback controls.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://www.terrae.dev/map.jsonThen install the video layer component:
npx shadcn@latest add https://www.terrae.dev/raster-video.jsonUse the useVideoControl hook to control video playback with play, pause, and toggle functions.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
id | string | required | Unique identifier for the video layer |
urls | string[] | required | Array of video URLs (provide multiple formats) |
coordinates | [[number, number], ...] | required | Four corner coordinates [topLeft, topRight, bottomRight, bottomLeft] |
opacity | number | 1 | Video opacity (0-1) |
autoplay | boolean | false | Auto-play video on load |
loop | boolean | true | Loop video playback |
muted | boolean | true | Mute video audio |
Playback Control Hook
Use the useVideoControl hook to control video playback:
import { useVideoControl } from "@/registry/map";
function VideoControls() {
const { play, pause, toggle, isPlaying } = useVideoControl("video-id");
return (
<button onClick={toggle}>
{isPlaying ? "Pause" : "Play"}
</button>
);
}Coordinate Format
The coordinates array must contain exactly four corner points in this order:
| Index | Position | Description |
|---|---|---|
| 0 | Top Left | Northwest corner [longitude, latitude] |
| 1 | Top Right | Northeast corner [longitude, latitude] |
| 2 | Bottom Right | Southeast corner [longitude, latitude] |
| 3 | Bottom Left | Southwest corner [longitude, latitude] |
Video Format Support
| Format | Browser Support | Notes |
|---|---|---|
MP4 (H.264) | All browsers | Widely supported, recommended as fallback |
WebM (VP8/VP9) | Chrome, Firefox, Edge | Better compression, preferred for web |
Provide multiple formats for browser compatibility. Videos should be optimized for web playback with appropriate compression and resolution.
Important Notes
- Videos must be hosted on a web server accessible to the browser
- CORS headers must be properly configured on the video server
- Video playback is affected by user's internet connection speed
- Autoplay may be blocked by browsers depending on user settings
- Keep videos muted by default to avoid autoplay issues