Install the VIDTREO Player component in your project using npm, yarn, pnpm, bun, or CDN.

Installation

The VIDTREO Player is available as a web component package that can be installed via npm or loaded directly from a CDN.

Package Installation

Install via your preferred package manager:

npm install @vidtreo/player-wc

yarn add @vidtreo/player-wc

pnpm add @vidtreo/player-wc

bun add @vidtreo/player-wc

CDN Usage

You can also load the player directly from a CDN without any build step:

Latest Version

<script type="module" src="https://cdn.jsdelivr.net/npm/@vidtreo/player-wc@latest/dist/vidtreo-player.js"></script>

Specific Version (Recommended for Production)

<script type="module" src="https://cdn.jsdelivr.net/npm/@vidtreo/player-wc@0.2.2/dist/vidtreo-player.js"></script>

Using @latest in production is not recommended. Always pin to a specific version for stability.

Usage After Installation

With npm/yarn/pnpm/bun

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="node_modules/@vidtreo/player-wc/dist/vidtreo-player.js"></script>
</head>
<body>
  <vidtreo-player
    video-id="your-video-id"
    api-key="your-api-key"
  ></vidtreo-player>
</body>
</html>

With CDN

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@vidtreo/player-wc@latest/dist/vidtreo-player.js"></script>
</head>
<body>
  <vidtreo-player
    video-id="your-video-id"
    api-key="your-api-key"
  ></vidtreo-player>
</body>
</html>

TypeScript Support

The package includes TypeScript definitions. For TypeScript projects, add type declarations:

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'vidtreo-player': {
        'video-id'?: string;
        'api-key'?: string;
        'backend-url'?: string;
        'theme-color'?: string;
        'screenshot'?: boolean | string;
        'setting'?: boolean | string;
        'pip'?: boolean | string;
        'fullscreen-web'?: boolean | string;
        'fullscreen'?: boolean | string;
        'playback-rate'?: boolean | string;
        'aspect-ratio'?: boolean | string;
        'flip'?: boolean | string;
      };
    }
  }
}

Verify Installation

After installation, verify everything works:

<script type="module" src="https://cdn.jsdelivr.net/npm/@vidtreo/player-wc@latest/dist/vidtreo-player.js"></script>

<vidtreo-player
  video-id="test-video-id"
  api-key="test-api-key"
></vidtreo-player>

Next Steps

Quick Start — Play your first video
Authentication — Set up your API key
Web Component Integration — Detailed integration guide

Installation

On this page