Frameline

A Video.js skin for video creators

Configure

Pick a tier, then switch single features on or off. Every change applies to the player above.

Tier

Viewer is for watching. Studio is for checking timing and framing.

Layout

Dock keeps the controls below the picture. Overlay puts them over it.

Features
Transport
Range
Capture
Guides

Platform zones need guides.

Zoom

Code

This configuration as JSX. It lists only what differs from the tier's defaults.

Event log

For developers: the last 20 events the skin sent to its host app, newest first, with the player's timecode.

No events yet. Set a range, switch a guide on, or grab a frame.

    Try this

    Six things a creator does with the Studio monitor. Click the player first: its shortcuts work while it has focus. Each button does the task for you.

    1. Step to the exact frame

      Press , and . to move one frame back or forward. Hold Shift with ← or → to jump ten.

    2. Set a range and loop it

      Press I and O at the playhead, or drag the handles at the ends of the timeline. Then press R to loop the range.

    3. Check a vertical cut

      Open Guides and choose TikTok under Platform zones. It masks the picture to 9:16 and marks where the app puts its own interface, roughly.

    4. Check title safe

      Open Guides and choose Title safe. Text inside the frame stays clear of the edges on any screen.

    5. Zoom to 200% and pan

      Press Z to step through the zoom levels, or use the Zoom button. Drag the picture, or press Shift Alt and an arrow, to move around.

    6. Grab a frame

      Press G to save the frame on screen as a PNG, at the video's own size and without the guides.