A video player for React, Astro, Svelte and plain JavaScript that loads like an image and plays like the players people already know.
Until someone presses play, it’s a picture and a button. The video, and hls.js for HLS streams, load on the first play. Then it behaves like the players people already know, down to the keyboard shortcuts.
Features
- Poster first. Pages stay light until a viewer chooses to watch.
- A filmstrip seek bar. Give it a sprite sheet and the bar opens into the video’s real frames as the pointer comes near.
- Chapters, quality, captions, speed, and loop in one settings menu, where every row shows its current value.
- Downloads in one or several sizes, and Copy link at 0:12.
- Keyboard and touch. YouTube’s keys, double-tap to skip, and hold for 2× on phones.
- It remembers volume, speed, captions, and where each viewer stopped.
Quick start
Install seamplayer, import SeamPlayer, and give it a source. Default styles are included automatically. It works with React 18 and 19, MP4, WebM, and HLS.
Next steps
InstallationAdd Seamplayer to a React 18 or 19 app, including Next.js and other server-rendered frameworks.PlaygroundSwitch tools on and off, change the appearance, or bring your own video. The complete React example follows every change.Media toolsPosters, the filmstrip seek bar, chapters, captions, downloads, links to a moment, and resume.PropsEvery prop SeamPlayer accepts.