Video Node (INodeVideo)

Video Node (INodeVideo)

INodeVideo extends INodeImage and adds timeline/playback controls:

• duration and current time
• play/pause, autoplay, looping, speed
• volume and mute
• poster image

export interface INodeVideo extends INodeImage {
  getDuration(): number;
  getCurrentTime(): number;
  setCurrentTime(value: number): void;

  getCurrentFrame(): number;
  getTotalFrames(): number;

  isAutoplay(): boolean;
  setAutoplay(value: boolean): void;
  isLooping(): boolean;
  setLooping(value: boolean): void;
  isPaused(): boolean;
  play(): void;
  pause(): void;
  getPlaybackSpeed(): number;
  setPlaybackSpeed(value: number): void;

  isMuted(): boolean;
  getVolume(): number;
  setVolume(value: number): void;
  mute(): void;
  unmute(): void;

  getPoster(): string;
  setPoster(value: string): void;
}

Live Preview

Create Video Node in Code

import {
  NodeVideo,
  ImageFit,
  StrokeAlign,
} from '@flowscape-ui/core-sdk';

const videoNode = new NodeVideo(1);
videoNode.setName('HeroVideo');
videoNode.setPosition(0, 35);
videoNode.setSize(520, 290);
videoNode.setSrc('/video/vid.mp4');
videoNode.setPoster('/img/cover-image.png');
videoNode.setAlt('Main product video');
videoNode.setFit(ImageFit.Cover);

videoNode.setAutoplay(true);
videoNode.setLooping(true);
videoNode.setPlaybackSpeed(1);
videoNode.setCurrentTime(0);
videoNode.setVolume(0.3);
videoNode.mute();
videoNode.play();

videoNode.setStrokeFill('#38bdf8');
videoNode.setStrokeWidth({ t: 6, r: 6, b: 6, l: 6 });
videoNode.setStrokeAlign(StrokeAlign.Inside);

layerWorld.addNode(videoNode);
scene.invalidate();

autoplay in browsers typically works only when muted.
If playback is still blocked, call videoNode.play() after setting mute() or after a user interaction.

Playback API

Area	Methods
Timeline	getDuration(), getCurrentTime(), setCurrentTime(value), getCurrentFrame(), getTotalFrames()
Playback	isAutoplay(), setAutoplay(value), isLooping(), setLooping(value), isPaused(), play(), pause(), getPlaybackSpeed(), setPlaybackSpeed(value)
Volume	isMuted(), getVolume(), setVolume(value), mute(), unmute()
Poster	getPoster(), setPoster(value)

Inheritance

INode
  -> IShapeBase
      -> INodeRect
          -> INodeImage
              -> INodeVideo

INodeVideo inherits image/rect/shape/base behavior: transform, hierarchy, bounds, hit testing, and serialization.

Next

• Advanced section