Video Player Module

Professional Video Player

High-performance video playback solution with responsive design, accessibility support, and advanced controls.

Basic Video Player

Standard video player with all essential controls and features.

KILYNKING
Company Tour

Loading... 0%

0:00/0:00
Virtual Tour

Factory Tour

Take a virtual tour of our manufacturing facilities and see how we produce world-class emergency lighting products with cutting-edge technology and strict quality control.

Factory Tour

Watch Video

Click to play company introduction video

Click the poster above to play video

Modern Factory

10,000+ sqm standardized production workshop

Advanced Equipment

Fully automatic SMT production line and testing equipment

Quality Assurance

ISO9001 quality management system certification

Multi-Quality Support

Adaptive bitrate streaming with manual quality selection.

KILYNKING
Multi-Quality Demo

Loading... 0%

0:00/0:00

Key Features

Full Controls

Play, pause, seek, volume, fullscreen, and playback speed

Responsive Design

Optimized for desktop, tablet, and mobile devices

Quality Selection

Multiple quality options with adaptive streaming

Performance

Lazy loading, preloading strategies, and buffer optimization

Technical Specifications

Supported FormatsMP4, WebM, AVI (browser dependent)
Responsive BreakpointsMobile (≤767px), Tablet (768-1199px), Desktop (≥1200px)
Keyboard ShortcutsSpace/K: Play/Pause, ←/→: Seek, M: Mute, F: Fullscreen
AccessibilityARIA labels, keyboard navigation, screen reader support
PerformanceLazy loading, Intersection Observer, buffer optimization
Browser SupportChrome ≥80, Firefox ≥75, Safari ≥13, Edge ≥80

Integration Example

VideoPlayer.tsx
import VideoPlayer from '@/components/VideoPlayer';

export default function Page() {
  return (
    <VideoPlayer
      src="/videos/company-tour.mp4"
      poster="/videos/poster.jpg"
      title="Company Tour"
      autoPlay={false}
      muted={true}
      loop={true}
      aspectRatio="16:9"
      showWatermark={true}
      watermarkText="KILYNKING"
      qualities={[
        { label: '1080p', src: '/videos/1080p.mp4', bandwidth: 5000 },
        { label: '720p', src: '/videos/720p.mp4', bandwidth: 2500 },
      ]}
    />
  );
}

Ready to Integrate?

Check out the documentation for detailed integration instructions and customization options.

View Documentation