Web Component

The @vidtreo/player-wc package provides a framework-agnostic Web Component that works with React, Vue, Angular, Svelte, or plain HTML.

Installation

Via npm

npm install @vidtreo/player-wc

Via CDN (No Build Required)

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

Basic Usage

HTML

<!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>

Framework Integration

React

import { useEffect, useRef } from 'react';

function VideoPlayer() {
  const playerRef = useRef<HTMLElement>(null);

  useEffect(() => {
    import('@vidtreo/player-wc/dist/vidtreo-player.js');
  }, []);

  return (
    <vidtreo-player
      ref={playerRef}
      video-id="your-video-id"
      api-key={process.env.NEXT_PUBLIC_VIDTREO_API_KEY}
      screenshot
      setting
      fullscreen
    />
  );
}

Vue.js

<template>
  <vidtreo-player
    :video-id="videoId"
    :api-key="apiKey"
    screenshot
    setting
    fullscreen
    @player-ready="handleReady"
    @player-error="handleError"
  />
</template>

<script setup>
import '@vidtreo/player-wc';

const videoId = 'your-video-id';
const apiKey = import.meta.env.VITE_VIDTREO_API_KEY;

function handleReady() {
  console.log('Player is ready');
}

function handleError(event) {
  console.error('Error:', event.detail.error);
}
</script>

Angular

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import '@vidtreo/player-wc';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

<!-- player.component.html -->
<vidtreo-player
  [attr.video-id]="videoId"
  [attr.api-key]="apiKey"
  [attr.screenshot]="true"
  [attr.setting]="true"
  [attr.fullscreen]="true"
  (player-ready)="onReady()"
  (player-error)="onError($event)"
></vidtreo-player>

Svelte

<script>
  import '@vidtreo/player-wc';

  const videoId = 'your-video-id';
  const apiKey = import.meta.env.VITE_VIDTREO_API_KEY;

  function handleReady() {
    console.log('Player is ready');
  }

  function handleError(event) {
    console.error('Error:', event.detail.error);
  }
</script>

<vidtreo-player
  video-id={videoId}
  api-key={apiKey}
  screenshot
  setting
  fullscreen
  on:player-ready={handleReady}
  on:player-error={handleError}
/>

Attributes

All attributes use kebab-case (HTML convention):

Attribute	Type	Required	Default	Description
`video-id`	`string`	Yes	-	The ID of the video to play
`api-key`	`string`	Yes	-	API key for authentication
`backend-url`	`string`	No	`https://core.vidtreo.com`	API endpoint
`theme-color`	`string`	No	`#00ff00`	Player theme color (hex or rgb)
`screenshot`	`boolean`	No	`false`	Enable screenshot button
`setting`	`boolean`	No	`false`	Enable settings panel button
`pip`	`boolean`	No	`false`	Enable picture-in-picture button
`fullscreen-web`	`boolean`	No	`false`	Enable web fullscreen button
`fullscreen`	`boolean`	No	`false`	Enable fullscreen button
`playback-rate`	`boolean`	No	Enabled if `setting=true`	Enable playback speed control
`aspect-ratio`	`boolean`	No	Enabled if `setting=true`	Enable aspect ratio control
`flip`	`boolean`	No	Enabled if `setting=true`	Enable video flip control

Note: Boolean attributes work as follows:

Present without value or with any value except "false" = enabled
Not present or set to "false" = disabled

Events

Listen for events using addEventListener or framework-specific syntax:

Event	Detail	Description
`player-ready`	`{}`	Video loaded and ready to play
`player-error`	`{ error: string }`	Error occurred

Event Examples

const player = document.querySelector('vidtreo-player');

player.addEventListener('player-ready', () => {
  console.log('Player is ready');
});

player.addEventListener('player-error', (event) => {
  console.error('Player error:', event.detail.error);
});

Dynamic Attribute Changes

Attributes can be changed dynamically, which will trigger a component re-initialization:

const player = document.querySelector('vidtreo-player');

player.setAttribute('video-id', 'new-video-id');
player.setAttribute('theme-color', '#3498db');
player.setAttribute('screenshot', 'true');

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Player</title>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@vidtreo/player-wc@latest/dist/vidtreo-player.js"></script>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
    }
    vidtreo-player {
      display: block;
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <h1>Video Player</h1>

  <vidtreo-player
    id="player"
    video-id="your-video-id"
    api-key="your-api-key"
    screenshot
    setting
    pip
    fullscreen-web
    fullscreen
  ></vidtreo-player>

  <div id="status"></div>

  <script>
    const player = document.getElementById('player');
    const status = document.getElementById('status');

    player.addEventListener('player-ready', () => {
      status.textContent = 'Player ready - Video loaded';
      console.log('Video is ready to play');
    });

    player.addEventListener('player-error', (event) => {
      status.textContent = `Error: ${event.detail.error}`;
      console.error('Player error:', event.detail.error);
    });
  </script>
</body>
</html>

Next Steps

Configuration Options — All available settings
Events Reference — Handle player events
Examples — More examples

Web Component

On this page