Docs › The <video-piper> web component

The <video-piper> web component

A drop-in player that plays the stream (HLS, with hls.js loaded only where the browser needs it) or the MP4, shows captions, and refreshes its links before they expire. One script, no framework, about 3 KB gzipped:

<script src="https://videopiper.com/player/player.js"></script>

<video-piper links-url="/api/videos/VIDEO_ID/links"></video-piper>

links-url is your own endpoint, like the server example above: it returns JSON with playbackUrl, streamUrl, posterPlaybackUrl (or posterUrl), captionsUrl and playbackExpiresAt. The player calls it again a few minutes before the links expire (and after a playback error), keeping the viewer's place. To render the first links on the page yourself, pass them as attributes too:

<video-piper src="PLAYBACK_URL" stream-src="STREAM_URL" poster="POSTER_PLAYBACK_URL"
             captions="VTT_URL" expires-at="1790910405" links-url="/api/videos/VIDEO_ID/links"
             cc start="30"></video-piper>

Attribute	Description
`src`	The MP4 (`playbackUrl`). Used where there's no stream or HLS can't play.
`stream-src`	The HLS stream (`streamUrl`, Pro and Scale). Preferred when present.
`poster`	The poster image (`posterPlaybackUrl`).
`captions`, `captions-lang`, `captions-label`	A WebVTT file for the MP4 (the stream carries its own subtitle track).
`expires-at`	Unix time the links expire (`playbackExpiresAt`); when to refresh.
`links-url`	Your endpoint for fresh links (JSON, same names as the status).
`autoplay`, `muted`, `loop`	As for `<video>`; `autoplay` also mutes, as browsers require.
`cc`	Show captions from the start.
`start`	Start at this many seconds.
`controls="false"`	Hide the controls (they're on by default).

No token or key in the page. The signed links are the only thing the player needs. Your API key stays on your server, and you decide who your links-url endpoint answers (for example, only signed-in users; the player sends your site's cookies with it). Embedding doesn't need to be turned on: that switch is only for the iframe embed below.
No endpoint? Leave out links-url and listen for the vp-expiring event, then call element.setLinks({playbackUrl, streamUrl, posterPlaybackUrl, captionsUrl, playbackExpiresAt}) with fresh links.
Sizing: it's 16:9 by default; style it like any element (video-piper { width: 100%; }). The inner <video> is element.video, for events like timeupdate and ended.
Your allowed domains apply as usual: the links only play on your sites.