0.0.2

Loop Segment

Loop playback between two timestamps by seeking back to the start point when the end is reached.

By default the widget loops the full video. This example constrains playback to a specific segment — when currentTime reaches the defined end point, seek() resets it back to the start. This is useful for product demos, tutorial highlights, or any scenario where only a portion of the video is relevant.

Demo

2s8s

Code

main.ts

import {
  useScena,
  ScenaEvent,
  ComponentSize,
  ComponentShape,
  ComponentPosition,
  ComponentPlacement,
} from '@retoo/scena';

import '@retoo/scena/styles';

const SEGMENT_START = 2;
const SEGMENT_END = 8;

const scena = useScena();

const instance = await scena.mount(
  {
    video: {
      src: '/video.mp4',
      startTime: SEGMENT_START,
      loop: false,
      muted: true,
    },
    size: ComponentSize.MD,
    shape: ComponentShape.CIRCLE,
    container: {
      position: ComponentPosition.ABSOLUTE,
      placement: ComponentPlacement.MIDDLE_CENTER,
    },
    ctaButton: false,
    closeButton: false,
  },
  document.getElementById('target'),
);

instance.api.events.on(ScenaEvent.ON_VIDEO_TIME_UPDATE, () => {
  const { currentTime } = instance.api.controller;

  if (currentTime >= SEGMENT_END) {
    instance.api.controller.seek(SEGMENT_START);
  }
});

Full controller API including seek() — see Instance API.

Timed Overlay

Show a contextual overlay at a specific point in the video using playback time events.

Heatmap Data

Collect seek positions and visualize which parts of the video users rewatch most.