Source Code github [#142]Created with Sketch.

Video

Overview

The Video component displays video content in your Glixy application. It supports common video formats and provides features like looping, muting, and automatic scaling to fit specified dimensions. Videos are automatically masked to the specified container size.

Loading...
<script>
  import { Stage, Video } from 'glixy';
  
  let host: HTMLElement | null = $state(null);
</script>

<div bind:this={host} class="w-full h-96">
  {#if host}
    <Stage {host}>
      <Video 
        texture="/video.mp4" 
        x={100} 
        y={100} 
        width={320}
        height={240}
        loop={true}
        muted={true}
      />
    </Stage>
  {:else}
    <div>Loading stage...</div>
  {/if}
</div>

Props

The Video component accepts the following properties:

texture (string, required)

Path to the video file. Supports MP4, WebM, and other common video formats.

x (number, default: 0)

X position of the video in pixels.

y (number, default: 0)

Y position of the video in pixels.

z (number, default: 0)

Z-index for layering. Higher values appear on top.

width (number, default: 0)

Width of the video display area. If 0, uses the original video width.

height (number, default: 0)

Height of the video display area. If 0, uses the original video height.

rotation (number, default: 0)

Rotation angle in radians.

opacity (number, default: 1)

Opacity value between 0 (transparent) and 1 (opaque).

scale (object, default: {x: 1, y: 1})

Scale factor for the video.

anchor (object, default: {x: 0, y: 0})

Anchor point for transformations. {x: 0.5, y: 0.5} centers the anchor.

loop (boolean, default: undefined)

Whether the video should loop automatically when it reaches the end.

muted (boolean, default: true)

Whether the video audio should be muted. Defaults to true to avoid autoplay issues.

Interaction Props

The Video component supports mouse and pointer interactions:

onpointerover (function)

Called when the pointer enters the video area.

onpointerout (function)

Called when the pointer leaves the video area.

onpointerdown (function)

Called when the pointer is pressed down on the video.

onpointermove (function)

Called when the pointer moves over the video.

onpointerup (function)

Called when the pointer is released over the video.

Usage Notes

Important considerations when using the Video component:

  • Video must be placed inside a Stage or Container
  • Videos are automatically scaled to fit within the specified width and height while maintaining aspect ratio
  • The video is masked to the exact dimensions specified, cropping any overflow
  • Videos start playing immediately when loaded and restart when the loop ends (if loop is enabled)
  • Audio is muted by default to prevent autoplay policy issues in browsers
  • Video loading is asynchronous - the video will appear once it's fully loaded
  • Supported formats depend on browser capabilities (MP4, WebM, etc.)
<- Previous Page

Text

 Next Page ->

Rectangle