Recipes

Here we provide code for some common scenarios.

Draggable video

This shows how to have a draggable static video overtop of an interactive one. Warning: on some browsers, the video displays "trails" when dragging.

TSX

Linking to a specific time

The following code will let you link to a specific time in the video by appending ?t=[time] to the url, like this.

import {parseTime, timeRegexp} from "@liqvid/utils/time";
import type {Playback} from "liqvid";

const rgx = new RegExp(
  "(?:^\\?|&)t=(" +
  timeRegexp.toString().replace(/^\/\^|\$\/$/g, "") +
  ")"
);

export default (playback: Playback) => {
  const $_ = parent.location.search.match(rgx);
  if ($_) {
    playback.seek(parseTime($_[1]));
  }
};

Navigation

Here is a button to seek to a specific marker. For example, you could use this to make a table of contents.

import {Utils, usePlayer} from "liqvid";
const {onClick} = Utils.mobile;

function Button() {
  const {playback, script} = usePlayer();

  const events = React.useMemo(() => {
    const time = script.parseStart("good-part");
    return onClick(() => {
      playback.seek(time);
    });
  }), []);

  return <button {...events}>Skip to the good part</button>;
}

Pausing the video

Here is a component to automatically pause the video at a certain time/marker, e.g. for the viewer to make a choice.

import {usePlayer, useTime} from "liqvid";
import {between} from "@liqvid/utils/misc";

interface Props {
  time: string;
  interval?: number;
}

function PauseAt(props: Props) {
  const {playback, script} = usePlayer();

  const time = React.useMemo(() => script.parseStart(props.time), []);
  const interval = props.interval ?? 300;

  const prev = React.useRef(playback.currentTime);

  useTime(t => {
    if (between(time - interval, prev.current, time) && between(time, t, time + interval)) {
      playback.pause();
    }
    prev.current = t;
  }, []);

  return null;
}

// usage
<PauseAt time="intro/pause"/>

Typing animation

Here's a simple typing animation:

TSX

Remember volume settings

Because of the GDPR, Liqvid does not remember volume settings between page refreshes. Once your users have consented to local storage, you can use the following to remember volume settings:

import type {Playback} from "liqvid";

/**
Remember volume settings between views.

This is disabled by default due to GDPR.
*/

export default (playback: Playback) => {
  const storage = window.localStorage;

  // restore volume settings
  playback.volume = parseFloat(storage.getItem("liqvid volume") || "1");
  playback.muted = "true" === (storage.getItem("liqvid muted") || "false");

  // save volume settings
  playback.hub.on("volumechange", () => {
    storage.setItem("liqvid muted", playback.muted.toString());
    storage.setItem("liqvid volume", playback.volume.toString());
  });
}