Video

Infra Video component.

Example

import { Video } from '@wix/video';

function Example() {
  const videoRef = React.useRef(null);
  
  return (
    <Video 
      id="my-video"
      videoMedia={{
        uri: "video-base-uri",
        name: "My Video",
        sources: [/* video sources */],
        hasAudio: true,
        poster: {
        uri: "poster-image-uri",
        width: 1920,
        height: 1080
        }
      }}
      muted={true}
      loop={true}
      autoplay={true}
      videoRef={videoRef}
      qualityPolicy="proportional"
      focalPoint={{ x: 50, y: 50 }}
      onError={(error) => console.error('Video error:', error)}
    />
  );
}

Installation

Install package

You can install the package via npm/yarn

> npm install -s @wix/video --registry http://npm.dev.wixpress.com/

or:

> yarn add @wix/video --registry http://npm.dev.wixpress.com/

Props

| Prop name | Type | Default | Description | | --------- | ---- | ------- | ----------- | | id | string | - | Required unique identifier for the video element | | videoMedia | object | - | Video source information (see details below) | | muted | boolean | - | Whether the video's audio is muted | | loop | boolean | - | Whether the video should loop when it reaches the end | | autoplay | boolean | - | Whether the video should start playing automatically when loaded | | playbackRate | number | 1 | Playback speed of the video | | posterEffect | 'fade' | - | Effect to apply when transitioning from poster to video | | videoRef | React.RefObject<HTMLVideoElement> | - | React ref to access the underlying video element | | qualityPolicy | 'proportional' | 'adaptive' | 'highest' | 'proportional' | Video quality selection strategy: 'proportional' - dynamically selects quality based on container size, 'adaptive' - uses adaptive sources (HLS/DASH), 'highest' - always uses the highest resolution available | | focalPoint | { x: number; y: number } | - | Focal point for video positioning (values typically 0-100) | | motionPart | string | - | Optional identifier for motion/animation part integration | | onError | (error: Error) => void | - | Callback function invoked when a video playback error occurs |

videoMedia Object

| Property | Type | Required | Description | | -------- | ---- | -------- | ----------- | | uri | string | Yes | Base URI for the video | | name | string | No | Name of the video (also used as alt text for the poster) | | poster | ImageMedia | No | Poster image that displays before video plays (see @wix/image for ImageMedia type) | | sources | VideoSource[] | No | Array of video sources with different qualities (see below) | | adaptiveSources | AdaptiveVideoSource[] | No | Array of adaptive video sources (HLS/DASH) | | hasAudio | boolean | No | Whether the video has audio | | fps | number | No | Frames per second | | duration | number | No | Video duration in seconds (used to skip adaptive streaming for short videos < 40s) |

VideoSource Object

| Property | Type | Description | | -------- | ---- | ----------- | | quality | '1080p' | '720p' | '480p' | '360p' | Quality preset | | width | number | Width of the video in pixels | | height | number | Height of the video in pixels | | types | object[] | Array of formats available { format: 'mp4' \| 'mp4-luminance'; uri: string }[] |

AdaptiveVideoSource Object

| Property | Type | Description | | -------- | ---- | ----------- | | format | 'hls' | 'dash' | Adaptive streaming format | | uri | string | URI for the adaptive source |

Features

• Automatic quality selection based on container size
• Supports poster images with transition effects
• Custom playback rate
• Focal point positioning for video framing
• Responsive scaling and positioning
• Support for adaptive streaming (HLS/DASH)
• Error handling via callback
• Reduced motion preference support

Technical Details

The Video component uses a custom element (wow-video) under the hood that handles:

• Intersection observation for visibility-based optimizations
• Automatic resizing and layout adjustments
• Optimal video quality selection based on container dimensions
• Poster image display and transition

Data Manifest

This package exports a videoDataManifest object that can be used for component manifests that use the Video component.

Usage

import { videoDataManifest } from '@wix/video';

// Use in your component manifest
const myComponentManifest = {
  // ... other component properties
  data: {
    video: videoDataManifest,
    // ... other properties
  }
};