Build an Interactive Video Screen in Banter

BanterVideoPlayer plays video on a surface. The component supports a media URL, volume, looping, automatic playback, drop behaviour, waiting for the first frame, playback methods, seeking, and state properties.

Video Screen Workflow

Create and position the screen GameObject, add BanterVideoPlayer, then connect Play, Pause, Stop, or seek actions to the intended control.

Create the screen surface at the final viewing position.
Add BanterVideoPlayer with the video URL and playback settings.
Connect JavaScript or Banter UI controls to the returned component.

Create the Screen Object

const screen = new BS.GameObject({
  name: "VideoScreen",
  localPosition: new BS.Vector3(0, 2, 4),
  localScale: new BS.Vector3(3.2, 1.8, 1)
});

screen.AddComponent(new BS.BanterPlane({
  width: 1,
  height: 1,
  widthSegments: 1,
  heightSegments: 1
}));

The official geometry reference states that BanterPlane faces the negative Z direction. Check the screen rotation from the intended viewing position.

Add BanterVideoPlayer

const video = screen.AddComponent(
  new BS.BanterVideoPlayer({
    url: "https://example.com/video.mp4",
    volume: 1,
    loop: false,
    playOnAwake: false,
    skipOnDrop: true,
    waitForFirstFrame: true
  })
);

Use playOnAwake: false when the player or scene logic should decide when playback begins.

Play, Pause, and Stop

video.Play();
video.Pause();
video.Stop();

Keep the video reference so controls can call these methods later.

Seek to a Time

video.time = 30;

The documented property sets the current playback time.

Read Playback State

console.log(video.isPlaying);
console.log(video.isLooping);

Use these properties when the UI label or button state should reflect the component's current playback state.

Connect a Banter UI Button

const playButton = new BS.UIButton();
playButton.SetProperty(BS.PN.text, "Play");
playButton.OnClick(() => {
  video.Play();
});
panel.root.AppendChild(playButton);

Repeat the same pattern for Pause and Stop controls. The panel in this example is a previously created BanterUIPanel.

Wait for Loading

Content-loading components can emit loaded and progress. Register the loading listener when later logic depends on the video being ready:

video.On("loaded", () => {
  console.log("Video ready");
});

Common Questions

Why does my Banter video begin immediately?

Set playOnAwake to false and call Play() from the intended scene or UI event.

Why does my Banter video face away from the viewer?

The official reference states that BanterPlane faces negative Z. Rotate the screen GameObject for the final viewing direction.