MotionScript

Video

Renders a playing video. Layout and child positioning are inherited from Rect: a Video lays out its children exactly like a Rect, with a playing video frame painted in place of the fill. The video's audio track is automatically scheduled alongside the picture.

0.0s / 4.0s

Usage

import { createScene, Video } from '@motion-script/core';

export default createScene(function* (stage) {
  stage.add(
    <Video
      src="./assets/clip.mp4"
      fit="fill"
      width={1280}
      height={720}
      cornerRadius={0}
    />
  );
});

Props

Source & fit

PropTypeDefaultDescription
srcstring–Path to the video file
fit'fill' | 'fit' | 'tile' | 'stretch''fill'How the video frame fills the node's bounds. 'fill' covers + crops (centered), 'fit' letterboxes, 'tile' repeats, 'stretch' distorts to fill.
scalingnumber–Scale multiplier applied before fitting
transformImageTransform–Fine-grained frame transform (offset, scale, rotation within bounds)
filtersMediaFilter[] | FilterChain[]Visual filters applied to the rendered frame

Playback

PropTypeDefaultDescription
playingbooleantrueWhether playback advances each frame
timestampnumber–Starting offset into the source in seconds. Defaults to trimStart or 0
trimStartnumber–Starting point within the source file in seconds
trimEndnumber–Ending point within the source file in seconds
speednumber1Playback-rate multiplier (affects both picture and audio)
loop'forward' | 'reverse' | 'none'–Loop behaviour
durationnumber–Length of one loop cycle in seconds. Defaults to the trimmed clip length

Audio

PropTypeDefaultDescription
volumenumber1Audio volume in [0, 1]
mutedbooleanfalseSilence the audio track without affecting the picture
audioFiltersAudioFilter[]Audio filters applied to the video's sound track (a single filter, an array, or an AudioFilterChain)

Layout & appearance

PropTypeDefaultDescription
cornerRadiusnumber | CornerRadiusProps0Corner radius (clips the frame)
cornerStyle'rounded' | 'angled' | CornerStyleProps'rounded'Corner shape

Animating

Animate standard node props (opacity, scale, cornerRadius, etc.) with .to(). For playback control, set playing and timestamp directly:

import { createScene, Video, createRef, easeInOut, wait } from '@motion-script/core';

export default createScene(function* (stage) {
  const clip = createRef<Video>();

  stage.add(
    <Video
      ref={clip}
      src="./assets/clip.mp4"
      fit="fill"
      width={960}
      height={540}
      cornerRadius={24}
      opacity={0}
    />
  );

  // Fade in
  yield* clip().to({ opacity: 1, cornerRadius: 0 }, 0.8, easeInOut);

  // Pause mid-playback
  yield* wait(3);
  clip().set({ playing: false });

  // Resume
  yield* wait(1);
  clip().set({ playing: true });
});

Trim and loop

<Video
  src="./assets/clip.mp4"
  trimStart={2.5}
  trimEnd={8.0}
  loop="forward"
  width={640}
  height={360}
/>

Speed change

<Video src="./assets/clip.mp4" speed={0.5} width={640} height={360} />

Notes

  • Video extends Rect, so children can be placed on top of the video frame (for subtitles, overlays, etc.).
  • Set muted: true to suppress audio while keeping the picture, which is useful when compositing multiple video layers.
  • playing: false freezes both picture and sound.
  • loop: 'reverse' plays the clip backward when it reaches the end.
  • See Audio Filters for the full list of audio filters.
  • See Image Filters for the full list of visual filters that can be applied to the frame.