Video.js

import videojs from "video.js";

const videojs = require("video.js");

import videojs, { Component, Plugin } from "video.js";

@import "video.js/dist/video-js.css";

import videojs from "video.js";

// Initialize a player
const player = videojs("my-video", {
  controls: true,
  fluid: true,
  aspectRatio: "16:9",
  sources: [{
    src: "path/to/video.mp4",
    type: "video/mp4"
  }]
});

// Player is ready
player.ready(() => {
  console.log("Player is ready");
});

// Control playback
player.play();
player.pause();
player.currentTime(30); // Seek to 30 seconds
player.volume(0.8); // Set volume to 80%

// Clean up
player.dispose();

/**
 * Create or retrieve a video player instance
 * @param id - Video element or element ID
 * @param options - Player configuration options  
 * @param ready - Callback when player is ready
 * @returns Player instance
 */
function videojs(id: string | Element, options?: VideoJsOptions, ready?: () => void): Player;

/**
 * Get existing player instance without creating new one
 * @param id - Video element or element ID
 * @returns Player instance or undefined
 */
videojs.getPlayer(id: string | Element): Player | undefined;

/**
 * Get all created players
 * @returns Object with all players keyed by ID
 */
videojs.getPlayers(): Record<string, Player>;

/**
 * Get array of all active player instances
 * @returns Array of player instances
 */
videojs.getAllPlayers(): Player[];

/**
 * Register a custom component for use in players
 * @param name - Component name
 * @param component - Component class
 * @returns Registered component class
 */
videojs.registerComponent(name: string, component: typeof Component): typeof Component;

/**
 * Get registered component class by name
 * @param name - Component name
 * @returns Component class
 */
videojs.getComponent(name: string): typeof Component;

/**
 * Register a plugin with Video.js
 * @param name - Plugin name
 * @param plugin - Plugin function or class
 * @returns Registered plugin
 */
videojs.registerPlugin<T = Plugin>(name: string, plugin: PluginFunction<T> | typeof Plugin): PluginFunction<T> | typeof Plugin;

/**
 * Remove registered plugin
 * @param name - Plugin name
 */
videojs.deregisterPlugin(name: string): void;

/**
 * Get registered plugin by name
 * @param name - Plugin name
 * @returns Plugin function or class
 */
videojs.getPlugin(name: string): PluginFunction | typeof Plugin;

/**
 * Get all registered plugins
 * @returns Object with all plugins
 */
videojs.getPlugins(): Record<string, PluginFunction | typeof Plugin>;

/**
 * Register a playback technology
 * @param name - Tech name
 * @param tech - Tech class
 */
videojs.registerTech(name: string, tech: typeof Tech): void;

/**
 * Get registered tech by name
 * @param name - Tech name  
 * @returns Tech class
 */
videojs.getTech(name: string): typeof Tech;

/**
 * Register middleware for tech operations
 * @param type - Middleware type
 * @param middleware - Middleware function or object
 */
videojs.use(type: string, middleware: MiddlewareFunction | MiddlewareObject): void;

/**
 * Text track for subtitles, captions, descriptions
 */
class TextTrack {
  readonly kind: TextTrackKind;
  readonly label: string;
  readonly language: string;
  mode: TextTrackMode;
  readonly cues: TextTrackCueList;
}

/**
 * Audio track representation
 */
class AudioTrack {
  readonly id: string;
  readonly kind: string;
  readonly label: string;
  readonly language: string;
  enabled: boolean;
}

/**
 * Video track representation  
 */
class VideoTrack {
  readonly id: string;
  readonly kind: string;
  readonly label: string;
  readonly language: string;
  selected: boolean;
}

/**
 * Add event listener
 * @param target - Event target
 * @param type - Event type
 * @param listener - Event handler function
 */
videojs.on(target: EventTarget, type: string, listener: EventListener): void;

/**
 * Add one-time event listener
 * @param target - Event target
 * @param type - Event type
 * @param listener - Event handler function
 */
videojs.one(target: EventTarget, type: string, listener: EventListener): void;

/**
 * Remove event listener
 * @param target - Event target
 * @param type - Event type
 * @param listener - Event handler function
 */
videojs.off(target: EventTarget, type: string, listener: EventListener): void;

/**
 * Trigger event on target
 * @param target - Event target
 * @param event - Event type or Event object
 * @param data - Event data
 */
videojs.trigger(target: EventTarget, event: string | Event, data?: any): void;

/**
 * DOM manipulation utilities
 */
videojs.dom: {
  isEl(element: any): boolean;
  createEl(tagName: string, properties?: object): Element;
  addClass(element: Element, className: string): void;
  removeClass(element: Element, className: string): void;
  hasClass(element: Element, className: string): boolean;
}

/**
 * Time utilities
 */
videojs.time: {
  createTimeRanges(start: number, end: number): TimeRanges;
  formatTime(seconds: number): string;
}

/**
 * Browser detection utilities
 */
videojs.browser: {
  IS_CHROME: boolean;
  IS_FIREFOX: boolean;
  IS_SAFARI: boolean;
  IS_IOS: boolean;
  IS_ANDROID: boolean;
}

interface VideoJsOptions {
  controls?: boolean;
  fluid?: boolean;
  responsive?: boolean;
  aspectRatio?: string;
  width?: number;
  height?: number;
  autoplay?: boolean | string;
  preload?: "none" | "metadata" | "auto";
  poster?: string;
  sources?: Source[];
  tracks?: TextTrackOptions[];
  plugins?: Record<string, any>;
  techOrder?: string[];
  html5?: object;
  [key: string]: any;
}

interface Source {
  src: string;
  type: string;
}

interface TextTrackOptions {
  kind: TextTrackKind;
  src: string;
  srclang?: string;
  label?: string;
  default?: boolean;
}

type TextTrackKind = "subtitles" | "captions" | "descriptions" | "chapters" | "metadata";
type TextTrackMode = "disabled" | "hidden" | "showing";

interface Player {
  // Core playback methods
  play(): Promise<void>;
  pause(): void;
  currentTime(): number;
  currentTime(seconds: number): void;
  duration(): number;
  volume(): number;
  volume(level: number): void;
  muted(): boolean;
  muted(muted: boolean): void;
  
  // Source and poster management
  src(): Source[];
  src(source: string | Source | Source[]): void;
  poster(): string;
  poster(src: string): void;
  
  // Dimensions and display
  width(): number;
  width(width: number): void;
  height(): number;
  height(height: number): void;
  dimensions(width: number, height: number): void;
  
  // Fullscreen
  isFullscreen(): boolean;
  requestFullscreen(): Promise<void>;
  exitFullscreen(): Promise<void>;
  
  // Lifecycle
  ready(callback: () => void): void;
  dispose(): void;
}

interface Component {
  el(): Element;
  addChild(component: string | Component, options?: object): Component;
  removeChild(component: Component): void;
  on(type: string, listener: EventListener): void;
  trigger(event: string, data?: any): void;
  dispose(): void;
}

interface Plugin {
  player: Player;
  dispose(): void;
}

type PluginFunction<T = any> = (this: Player, options?: T) => void;

interface MiddlewareObject {
  callPlay?: () => any;
  callPause?: () => any;
  setSource?: (src: Source, next: (error?: any, src?: Source) => void) => void;
}

type MiddlewareFunction = (player: Player) => MiddlewareObject;