Skip to main content

Playback

This class is the core of the library. It is an animation loop+event emitter which imitates an HTMLMediaElement being played (although it does not fully implement that interface). This class is also available as a standalone package @liqvid/playback.

There are two ways to create a Playback: you can instantiate it directly, or one is created automatically by a Script. You can then pass either one of these to <Player>:

import {Playback, Script, Player} from "liqvid";

// Option 1: Playback only
const playback = new Playback({duration: 10000});

<Player playback={playback}>{/* ... */}</Player>

// Option 2: use a Script
const script = new Script([
  ["slide1", "0:05"],
  ["slide2", "0:05"]
]);
const {playback} = script;

<Player script={script}>{/* ... */}</Player>

We recommend making the Playback accessible to your code outside of components. However, it can be accessed via hooks like so:

import {usePlayer} from "liqvid";

function Component() {
  const {playback} = usePlayer();

  // do stuff with playback
}

Properties​

currentTime​

The current playback time in milliseconds.

Warning: the HTMLMediaElement interface measures this property in seconds.

currentTime: number;

duration​

The length of the playback in milliseconds.

Warning: the HTMLMediaElement interface measures this property in seconds.

duration: number;

paused​

Whether the playback is paused.

paused: boolean;

playbackRate​

The rate at which the playback is being played.

playbackRate: number;

seeking​

Whether the playback is in the process of seeking to a new position.

seeking: boolean;

timeline​

DocumentTimeline synced up to this playback.

timeline: DocumentTimeline;

Methods​

constructor()​

The Playback() constructor creates a new Playback object. Takes one parameter, which is an object with the following keys:

  • duration: number
    Duration of the playback in milliseconds
constructor(options: {
  duration: number;
}): Playback;

newAnimation()​

Create an Animation (factory) synced to this playback.

Parameters​

  • keyframes: Keyframe[] | PropertyIndexedKeyframes
    A keyframes object or null

  • options?: number | KeyframeEffectOptions
    Either an integer representing the animation's duration (in milliseconds), or KeyframeEffect options

Return value​

Returns a callback to attach the animation to a target

newAnimation<T extends Element>(
  keyframes: Keyframe[] | PropertyIndexedKeyframes,
  options?: number | KeyframeEffectOptions
): (target: T) => Animation;

pause()​

Pause playback.

pause(): void;

play()​

Resume playback.

play(): void;

seek()​

Seek playback to a specific time.

seek(t: number | string): void;

Events​

This class extends EventEmitter. It emits the following events:

pause​

Fired when playback is paused.

play​

Fired when playback begins or resumes playing.

seek​

Fired when playback is seeked (sought?). Listeners receive the currentTime as an argument.

seeked​

Fired when a seeking operation has completed.

seeking​

Fired when a seeking operation starts.

stop​

Fired when playback has stopped because the end of the ractive was reached.

ratechange​

Fired when playback rate is changed.

timeupdate​

Fired when the time has been updated. Listeners receive the currentTime as an argument.

volumechange​

Fired when the volume has changed.