Next-Gen Video Player
for Modern Web

Experience the ultimate video playback with DRM protection, dynamic subtitles, customizable branding, and professional-grade controls. Built for developers who demand excellence.

99.9% Uptime
50ms Load Time

Powerful Features

Everything you need for professional video playback

DRM Protection

Multi-DRM support with Widevine, PlayReady, and FairPlay for enterprise-grade content protection.

Smart Subtitles

Dynamic subtitle support with WebVTT format, custom styling, and multi-language capabilities.

Custom Branding

Fully customizable player with dynamic logos, themes, and positioning options for your brand.

Responsive Design

Perfect playback on all devices with adaptive controls and mobile-optimized interactions.

High Performance

Optimized for speed with hardware acceleration, smart buffering, and minimal CPU usage.

Developer Friendly

Clean APIs, comprehensive documentation, and extensive customization options for developers.

Configuration Guide

Complete setup options for Strix K9 Player

Quick Setup
Video Sources & Quality
Advanced Features
Complete Example

Quick Setup

Get started with minimal configuration

1

Include Required Files

Add the player script and stylesheet to your HTML file.

HTML
npm install strixk9-video-player
2

Create Player Container

Add a container element where the player will be rendered.

HTML
<!-- Player container -->
<div id="player"></div>
3

Initialize Player

Initialize the player with basic configuration.

JavaScript
// Basic player configuration
const config = {
  video: {
    default: "video.mp4",
    poster: "poster.jpg"
  },
  theme: { color: "#19a383" }
};

// Initialize player
import StrixK9Player from 'strixk9-video-player';
const player = new StrixK9Player('#video-container', config);

Video Sources & Quality

Configure multiple quality options and branding

1

Multiple Quality Options

Provide multiple video quality options for adaptive streaming.

JavaScript
video: {
  default: "video-1080p.mp4",
  poster: "poster.jpg",
  playerTitle: "My Player",

  // Multiple qualities
  quality: ["1080p", "720p", "480p"],
  source: {
    "1080p": "video-1080p.mp4",
    "720p": "video-720p.mp4",
    "480p": "video-480p.mp4"
  }
}
2

Custom Logo

Add your brand logo with customizable position and behavior.

JavaScript
// Custom logo configuration
playerLogo: {
  src: "logo.png",
  position: "bottom end", // Options: "top start", "top end", "bottom start", "bottom end"
  width: "100px",
  opacity: "0.9",
  href: "https://site.com" // Optional link
}

Advanced Features

Enable subtitles, waveform, and additional player options

1

Player Options

Configure player behavior and appearance.

JavaScript
// Player behavior options
autoplay: false,
loop: false,
preload: "metadata",
thumbnailPreview: true,
waveform: true,

// Theme customization
theme: { color: "#19a383" }
3

DRM Protection (Enterprise)

Enable DRM for protected content (Enterprise feature).

JavaScript
// DRM configuration
drm: {
  enabled: true,
  widevine: { licenseUrl: "license-server.com" },
  playready: { licenseUrl: "license-server.com" },
  fairplay: {
    licenseUrl: "license-server.com",
    certificateUrl: "certificate-server.com"
  }
}

DRM features require enterprise licensing. Contact sales for more information.

Complete Example

Full configuration with all features

1

Complete Configuration

A comprehensive example showcasing all available options.

JavaScript
const playerConfig = {
  video: {
    default: "videos/main-1080p.mp4",
    poster: "images/poster.jpg",
    playerTitle: "Professional Player",
    quality: ["1080p", "720p", "480p"],
    source: {
      "1080p": "videos/main-1080p.mp4",
      "720p": "videos/main-720p.mp4",
      "480p": "videos/main-480p.mp4"
    },
    playerLogo: {
      src: "images/logo.png",
      position: "bottom end",
      width: "100px"
    },
  theme: { color: "#19a383" },
  thumbnailPreview: true,
  waveform: true
};

// Initialize player
const player = new StrixK9Player('#videoContainer', playerConfig);

// Available methods:
// player.togglePlay(), player.setVolume(0.5)
// player.seek(30), player.toggleFullscreen()
2

Player Methods

Control the player programmatically with these methods.

JavaScript
// Control playback
player.togglePlay(); // Toggle play/pause
player.setVolume(0.5); // Set volume (0-1)
player.seek(30); // Seek to 30 seconds
player.toggleFullscreen(); // Toggle fullscreen

// Subtitle controls
player.toggleSubtitles(); // Toggle subtitles on/off
player.setSubtitle('en'); // Set subtitle language

// Logo controls
player.updateLogoConfig({ opacity: '0.7' }); // Update logo
player.getCurrentLogoConfig(); // Get current logo config