Persistence

Brings the viewer back to where they stopped, with the settings they chose. Play the demo past the 5-second mark, then reload this page.

"use client";import { persistence } from "react-video-kit/persistence";import { VideoPlayer } from "react-video-kit/player";import { speed } from "react-video-kit/speed";const plugins = [persistence({ key: "docs-persistence" }), speed()];export default function Persistence() {  return (    <div className="flex flex-col gap-3">      <VideoPlayer src="/media/sample-720.mp4" poster="/media/poster.jpg" plugins={plugins} load="visible" />      <p className="text-sm text-current opacity-80">        Play past the 5-second mark, change the volume or speed if you like, then reload this page. The        player comes back at the same time with the same settings, paused until you press Play. Watch        to the end and it starts from the beginning next time.      </p>    </div>  );}

Usage

import { persistence } from "react-video-kit/persistence";import { VideoPlayer } from "react-video-kit/player";const plugins = [persistence()];<VideoPlayer src="/video.mp4" plugins={plugins} />;

Turn either half off with resume or preferences. Set key to keep players apart, since players with the same key share their preferences and any positions for the same source:

persistence({ key: "course-player", preferences: false });

What's saved

Everything goes in localStorage by default, under the key prefix, which defaults to rv.

A saved position is removed, so the video starts from the beginning next time, when:

• The viewer is less than 5 seconds in.
• The viewer is at least 95% of the way through, or the video has ended.

Only on-demand video gets a position. Live streams, DVR windows, and ads never save one.

When it's restored

Preferences come back when the player mounts, after hydration, so the server and the first client render still match. A position comes back when that source loads. The video stays paused there unless something else starts it, such as the autoplay plugin.

A startTime from something else wins over a saved position, such as reload(30).

Use your own storage

storage takes anything with getItem, setItem, and removeItem, which all have to be synchronous:

const memory = new Map<string, string>();persistence({  storage: {    getItem: (name) => memory.get(name) ?? null,    setItem: (name, value) => void memory.set(name, value),    removeItem: (name) => void memory.delete(name),  },});

Behaviour

• Storage can throw when it's blocked, full, or in a private window. A failed read counts as nothing saved, a failed write is dropped, and playback carries on with no error. Unreadable JSON counts as nothing saved too.
• Changing source doesn't save first, so the old video keeps its last save, up to 5 seconds of playback behind.
• A saved caption language wins over the language option on captions, including a saved choice of no captions. It takes effect as soon as a matching track appears, and a video with no such track doesn't lose it.
• It always runs after the captions plugin, whatever order you list them in.
• A muted fallback from autoplay isn't saved, because the browser chose it rather than the viewer. The next visit tries sound again.

API

Options

State

This plugin has no state of its own.

Commands

This plugin has no commands of its own.