mediacms/frontend-tools/video-js

Video.js + React + Vite Demo

A comprehensive demonstration of integrating video.js with React and Vite, showcasing ALL available video.js parameters and options.

🚀 Features

• ✅ Complete Video.js Options Implementation - Every available parameter documented and demonstrated
• ✅ Video.js integration with React hooks
• ✅ Responsive video player with breakpoints
• ✅ Modern Vite build setup
• ✅ Clean and modern UI
• ✅ Comprehensive event handling and console logging
• ✅ Sample video demonstration
• ✅ 150+ Video.js Parameters organized by category
• ✅ Multiple configuration examples for different use cases

🛠️ Technologies Used

• React 19 - UI library
• Vite 4.5.0 - Build tool and dev server (Node 16 compatible)
• Video.js 8.23.3 - HTML5 video player (latest version)
• JavaScript - Programming language (no TypeScript)

📦 Installation

# Install dependencies
npm install

# Start development server
npm run dev

🎯 Project Structure

src/
├── VideoPlayer.jsx              # Video.js React component
├── App.jsx                      # Main app with ALL video.js options
├── VideoJsOptionsReference.js   # Complete options documentation
├── App.css                      # Application styles
├── main.jsx                     # React entry point
└── index.css                    # Global styles

📋 Complete Video.js Options Categories

🎬 Standard HTML5 Video Element Options

• autoplay - Can be boolean, 'muted', 'play', or 'any'
• controls - Show/hide player controls
• height / width - Player dimensions
• loop - Restart video when it ends
• muted - Start with audio muted
• poster - Poster image URL
• preload - 'auto', 'metadata', or 'none'
• sources - Array of video sources

⚡ Video.js-Specific Options

• aspectRatio - Maintains aspect ratio ('16:9', '4:3')
• audioOnlyMode - Hide video-specific controls
• audioPosterMode - Show poster persistently for audio
• breakpoints - Responsive breakpoints configuration
• disablePictureInPicture - Control PiP functionality
• enableDocumentPictureInPicture - Chrome 116+ PiP
• enableSmoothSeeking - Smoother seeking experience
• experimentalSvgIcons - Use SVG icons instead of font
• fluid - Responsive to container size
• fullscreen - Fullscreen API options
• inactivityTimeout - User inactive timeout in ms
• language / languages - Localization
• liveui / liveTracker - Live streaming features
• normalizeAutoplay - Consistent autoplay behavior
• noUITitleAttributes - Better accessibility
• playbackRates - Speed control options
• playsinline - iOS Safari behavior
• preferFullWindow - iOS fullscreen alternative
• responsive - Enable responsive breakpoints
• skipButtons - Forward/backward skip controls
• spatialNavigation - TV/remote control support
• techOrder - Playback technology preference
• userActions - Click, double-click, hotkeys configuration

🎛️ Component Options

• controlBar - Complete control bar customization
  • Time displays (current, duration, remaining)
  • Progress control and seek bar
  • Volume control (horizontal/vertical)
  • Playback controls (play/pause)
  • Skip buttons (forward/backward)
  • Fullscreen and Picture-in-Picture
  • Subtitles, captions, audio tracks
  • Live streaming controls
• children - Player child components array

🔧 Tech Options

• html5 - HTML5 technology specific options
  • nativeControlsForTouch - Touch device controls
  • nativeAudioTracks / nativeVideoTracks - Track handling
  • nativeTextTracks / preloadTextTracks - Subtitle handling

🚀 Advanced Options

• plugins - Plugin initialization
• vtt.js - Subtitle library URL
• id - Player element ID
• posterImage - Poster component control

🎮 Usage Examples

Basic Usage

import VideoPlayer from './VideoPlayer';

<VideoPlayer
    options={{
        controls: true,
        fluid: true,
        sources: [{ src: 'video.mp4', type: 'video/mp4' }],
    }}
    onReady={(player) => console.log('Ready!', player)}
/>;

Advanced Configuration

<VideoPlayer
    options={{
        // Responsive design
        fluid: true,
        responsive: true,
        aspectRatio: '16:9',

        // Playback features
        playbackRates: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2],
        enableSmoothSeeking: true,

        // User interaction
        userActions: {
            hotkeys: true,
            click: true,
            doubleClick: true,
        },

        // Skip buttons
        skipButtons: {
            forward: 10,
            backward: 10,
        },

        // Sources
        sources: [
            { src: 'video.mp4', type: 'video/mp4' },
            { src: 'video.webm', type: 'video/webm' },
        ],
    }}
/>

Live Streaming Configuration

<VideoPlayer
    options={{
        controls: true,
        fluid: true,
        liveui: true,
        liveTracker: {
            trackingThreshold: 30,
            liveTolerance: 15,
        },
        controlBar: {
            liveDisplay: true,
            seekToLive: true,
        },
        sources: [{ src: 'stream.m3u8', type: 'application/x-mpegURL' }],
    }}
/>

⌨️ Keyboard Shortcuts

Key	Action
Spacebar or K	Play/Pause
M	Mute/Unmute
F	Toggle Fullscreen
← →	Skip backward/forward (when enabled)
↑ ↓	Volume up/down

🔧 Customization

Responsive Breakpoints

breakpoints: {
  tiny: 210,
  xsmall: 320,
  small: 425,
  medium: 768,
  large: 1440,
  xlarge: 2560,
  huge: Infinity
}

Control Bar Customization

controlBar: {
  // Enable/disable specific controls
  playToggle: true,
  volumePanel: true,
  currentTimeDisplay: true,
  durationDisplay: true,
  progressControl: true,
  fullscreenToggle: true,

  // Skip buttons
  skipButtons: {
    forward: 10,    // 10 second forward
    backward: 10    // 10 second backward
  },

  // Volume control style
  volumePanel: {
    inline: false,  // Vertical volume slider
  }
}

Event Handling

const handlePlayerReady = (player) => {
    // Set up comprehensive event listeners
    player.on('play', () => console.log('Video started'));
    player.on('pause', () => console.log('Video paused'));
    player.on('volumechange', () => console.log('Volume:', player.volume()));
    player.on('fullscreenchange', () => console.log('Fullscreen:', player.isFullscreen()));
    player.on('ratechange', () => console.log('Speed:', player.playbackRate()));
    player.on('seeking', () => console.log('Seeking to:', player.currentTime()));
};

📖 Option Categories Reference

Playback Control

autoplay, controls, loop, muted, preload, playbackRates

Layout & Responsive

width, height, fluid, responsive, aspectRatio, breakpoints

Advanced Features

skipButtons, userActions, hotkeys, enableSmoothSeeking

Accessibility

language, noUITitleAttributes, spatialNavigation

Live Streaming

liveui, liveTracker, techOrder

Mobile Optimization

playsinline, nativeControlsForTouch, preferFullWindow

Component Customization

controlBar, children, plugins

📝 Configuration Files

• src/App.jsx - Complete implementation with all options
• src/VideoJsOptionsReference.js - Detailed documentation of every option
• src/VideoPlayer.jsx - React component wrapper

🚀 Development

# Start dev server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

🌟 What Makes This Implementation Special

1. Complete Option Coverage - Every single video.js option documented and implemented
2. Organized by Category - Options grouped logically for easy understanding
3. Real-world Examples - Multiple configuration examples for different use cases
4. Comprehensive Events - All player events logged with emojis for easy debugging
5. Responsive Design - Breakpoint system for different screen sizes
6. Accessibility Ready - Full keyboard navigation and screen reader support
7. Modern React Integration - Proper lifecycle management and cleanup

📊 Statistics

• 150+ Video.js Options implemented and documented
• 8 Option Categories with detailed explanations
• 5 Example Configurations for different use cases
• 10+ Keyboard Shortcuts supported
• Responsive Breakpoints for 7 different screen sizes
• 20+ Event Listeners with detailed logging

📝 Notes

• The demo uses a sample video from Video.js CDN
• All player events are logged to the browser console with emojis
• The component properly handles cleanup on unmount
• Responsive design works on mobile and desktop
• Compatible with Node.js 16+ (Vite downgraded for compatibility)
• All options are documented with types, defaults, and descriptions

🔗 Useful Links

• Video.js Official Documentation
• Video.js Options Reference
• Video.js Plugins
• React Integration Guide

---

Happy coding! 🎉 This implementation serves as a complete reference for video.js integration with React!