Demo

Native video

A <video> element with the glow behind it, driven by requestVideoFrameCallback.

Install

npm install @videoglow/react-video

Engine state

running: false
sampling: false
visible: false
source: none / -
frames rendered: 0
frames skipped (fps cap): 0
buffer: 0x0
last render: 0.000 ms
average render: 0.000 ms
render errors: 0

Usage

'use client'
import { VideoAmbilight } from '@videoglow/react-video'

export const metadata = {
  title: 'Native video',
  alternates: { canonical: '/native-video' },
}

export function Player() {
  return <VideoAmbilight src="/media/clip.webm" controls muted loop autoPlay playsInline blur={80} />
}

What to look for

Play, pause and seek with the controls. Frames arrive through requestVideoFrameCallback (push mode) and the fps cap of 30 skips extra frames. Pausing stops sampling; seeking while paused renders once. Switch tabs and the counter stops.