Static Player

Static Player is a drop-in replacement for @vimeo/player. Same method names, same events, same promise-returning API, but instead of an iframe pointed at someone else's servers it plays an MP4 from a URL you control. S3, CloudFront, R2, a plain nginx box, whatever you already have.

Migration is usually two lines:

// before
import Player from '@vimeo/player';
const player = new Player('container', { id: 123456789 });

// after
import Player from '@player/static';
const player = new Player('container', { url: 'https://cdn.example.com/video.mp4' });

Everything downstream of that keeps working: play(), pause(), setCurrentTime(), getDuration(), on('timeupdate'), cue points, text tracks, fullscreen, picture-in-picture. Methods that only make sense on a hosted platform, like setQuality() on a single-file MP4, are stubbed rather than removed, so nothing throws while you're mid-migration.

Why we wrote it

We had nine Arduino tutorial videos embedded in our Crack the Code course page, hosted on Vimeo. An annual plan renewed, we cancelled and took the refund, the account dropped to the free tier, and every video over the free storage allowance went dark at once. Not just unlisted: unplayable, un-downloadable, and the embeds on our own site broke. The proposed fix was to buy the plan again.

The lesson wasn't "pick a better video host". It was that the player and the storage should be separate things, so losing one doesn't take the other with it.

What's in it

• The whole Vimeo player surface. All the playback methods and events, cue points, text tracks, buffered/played/seekable ranges. TypeScript definitions included.
• A real control bar, not the browser default: play, scrubber, time, volume, speed, captions, picture-in-picture, fullscreen, AirPlay and Chromecast. Themeable with a handful of colour options.
• Chapters. Markers on the scrubber, a chapter list, and a current-chapter indicator, driven either by a config array or by a chapters text track.
• Cards that appear at a timestamp and disappear at another, as a link or as plain text. Card text is escaped before it hits the DOM and non-http(s) URLs are dropped.
• Registration gates. Collect an email before, during or after playback, with a configurable field list and an onSubmit that can be async and can reject.
• End screens in seven flavours: replay, call-to-action, share buttons, an image, up-next videos, silent loop, or nothing.
• A small Go dev server for the bits that need a backend (video config, cards, registrations, end screens and analytics events) so you can try the interactive features without wiring up your own app first.

Getting started

There is a live demo, an interactive demo with cards and gates turned on, and a UI components demo. It isn't on npm yet, so build from a checkout, or drop the prebuilt UMD bundles in with a pair of script tags. player-ui.js injects its own styles, so there's no stylesheet to link.

<script src="dist/player.js"></script>
<script src="dist/player-ui.js"></script>

MIT licensed. Full API reference and a step-by-step Vimeo migration guide are in the repository.