mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-10-06 22:32:41 +07:00
update video.js readme file
This commit is contained in:
Yiannis Christodoulou
@@ -4,22 +4,22 @@ A **comprehensive demonstration** of integrating **video.js** with **React** and
|
|||||||
|
|
||||||
## 🚀 Features
|
## 🚀 Features
|
||||||
|
|
||||||
- ✅ **Complete Video.js Options Implementation** - Every available parameter documented and demonstrated
|
- ✅ **Complete Video.js Options Implementation** - Every available parameter documented and demonstrated
|
||||||
- ✅ Video.js integration with React hooks
|
- ✅ Video.js integration with React hooks
|
||||||
- ✅ Responsive video player with breakpoints
|
- ✅ Responsive video player with breakpoints
|
||||||
- ✅ Modern Vite build setup
|
- ✅ Modern Vite build setup
|
||||||
- ✅ Clean and modern UI
|
- ✅ Clean and modern UI
|
||||||
- ✅ Comprehensive event handling and console logging
|
- ✅ Comprehensive event handling and console logging
|
||||||
- ✅ Sample video demonstration
|
- ✅ Sample video demonstration
|
||||||
- ✅ **150+ Video.js Parameters** organized by category
|
- ✅ **150+ Video.js Parameters** organized by category
|
||||||
- ✅ **Multiple configuration examples** for different use cases
|
- ✅ **Multiple configuration examples** for different use cases
|
||||||
|
|
||||||
## 🛠️ Technologies Used
|
## 🛠️ Technologies Used
|
||||||
|
|
||||||
- **React 19** - UI library
|
- **React 19** - UI library
|
||||||
- **Vite 4.5.0** - Build tool and dev server (Node 16 compatible)
|
- **Vite 4.5.0** - Build tool and dev server (Node 16 compatible)
|
||||||
- **Video.js 8.23.3** - HTML5 video player (latest version)
|
- **Video.js 8.23.3** - HTML5 video player (latest version)
|
||||||
- **JavaScript** - Programming language (no TypeScript)
|
- **JavaScript** - Programming language (no TypeScript)
|
||||||
|
|
||||||
## 📦 Installation
|
## 📦 Installation
|
||||||
|
|
||||||
@@ -47,67 +47,67 @@ src/
|
|||||||
|
|
||||||
### 🎬 Standard HTML5 Video Element Options
|
### 🎬 Standard HTML5 Video Element Options
|
||||||
|
|
||||||
- `autoplay` - Can be boolean, 'muted', 'play', or 'any'
|
- `autoplay` - Can be boolean, 'muted', 'play', or 'any'
|
||||||
- `controls` - Show/hide player controls
|
- `controls` - Show/hide player controls
|
||||||
- `height` / `width` - Player dimensions
|
- `height` / `width` - Player dimensions
|
||||||
- `loop` - Restart video when it ends
|
- `loop` - Restart video when it ends
|
||||||
- `muted` - Start with audio muted
|
- `muted` - Start with audio muted
|
||||||
- `poster` - Poster image URL
|
- `poster` - Poster image URL
|
||||||
- `preload` - 'auto', 'metadata', or 'none'
|
- `preload` - 'auto', 'metadata', or 'none'
|
||||||
- `sources` - Array of video sources
|
- `sources` - Array of video sources
|
||||||
|
|
||||||
### ⚡ Video.js-Specific Options
|
### ⚡ Video.js-Specific Options
|
||||||
|
|
||||||
- `aspectRatio` - Maintains aspect ratio ('16:9', '4:3')
|
- `aspectRatio` - Maintains aspect ratio ('16:9', '4:3')
|
||||||
- `audioOnlyMode` - Hide video-specific controls
|
- `audioOnlyMode` - Hide video-specific controls
|
||||||
- `audioPosterMode` - Show poster persistently for audio
|
- `audioPosterMode` - Show poster persistently for audio
|
||||||
- `breakpoints` - Responsive breakpoints configuration
|
- `breakpoints` - Responsive breakpoints configuration
|
||||||
- `disablePictureInPicture` - Control PiP functionality
|
- `disablePictureInPicture` - Control PiP functionality
|
||||||
- `enableDocumentPictureInPicture` - Chrome 116+ PiP
|
- `enableDocumentPictureInPicture` - Chrome 116+ PiP
|
||||||
- `enableSmoothSeeking` - Smoother seeking experience
|
- `enableSmoothSeeking` - Smoother seeking experience
|
||||||
- `experimentalSvgIcons` - Use SVG icons instead of font
|
- `experimentalSvgIcons` - Use SVG icons instead of font
|
||||||
- `fluid` - Responsive to container size
|
- `fluid` - Responsive to container size
|
||||||
- `fullscreen` - Fullscreen API options
|
- `fullscreen` - Fullscreen API options
|
||||||
- `inactivityTimeout` - User inactive timeout in ms
|
- `inactivityTimeout` - User inactive timeout in ms
|
||||||
- `language` / `languages` - Localization
|
- `language` / `languages` - Localization
|
||||||
- `liveui` / `liveTracker` - Live streaming features
|
- `liveui` / `liveTracker` - Live streaming features
|
||||||
- `normalizeAutoplay` - Consistent autoplay behavior
|
- `normalizeAutoplay` - Consistent autoplay behavior
|
||||||
- `noUITitleAttributes` - Better accessibility
|
- `noUITitleAttributes` - Better accessibility
|
||||||
- `playbackRates` - Speed control options
|
- `playbackRates` - Speed control options
|
||||||
- `playsinline` - iOS Safari behavior
|
- `playsinline` - iOS Safari behavior
|
||||||
- `preferFullWindow` - iOS fullscreen alternative
|
- `preferFullWindow` - iOS fullscreen alternative
|
||||||
- `responsive` - Enable responsive breakpoints
|
- `responsive` - Enable responsive breakpoints
|
||||||
- `skipButtons` - Forward/backward skip controls
|
- `skipButtons` - Forward/backward skip controls
|
||||||
- `spatialNavigation` - TV/remote control support
|
- `spatialNavigation` - TV/remote control support
|
||||||
- `techOrder` - Playback technology preference
|
- `techOrder` - Playback technology preference
|
||||||
- `userActions` - Click, double-click, hotkeys configuration
|
- `userActions` - Click, double-click, hotkeys configuration
|
||||||
|
|
||||||
### 🎛️ Component Options
|
### 🎛️ Component Options
|
||||||
|
|
||||||
- `controlBar` - Complete control bar customization
|
- `controlBar` - Complete control bar customization
|
||||||
- Time displays (current, duration, remaining)
|
- Time displays (current, duration, remaining)
|
||||||
- Progress control and seek bar
|
- Progress control and seek bar
|
||||||
- Volume control (horizontal/vertical)
|
- Volume control (horizontal/vertical)
|
||||||
- Playback controls (play/pause)
|
- Playback controls (play/pause)
|
||||||
- Skip buttons (forward/backward)
|
- Skip buttons (forward/backward)
|
||||||
- Fullscreen and Picture-in-Picture
|
- Fullscreen and Picture-in-Picture
|
||||||
- Subtitles, captions, audio tracks
|
- Subtitles, captions, audio tracks
|
||||||
- Live streaming controls
|
- Live streaming controls
|
||||||
- `children` - Player child components array
|
- `children` - Player child components array
|
||||||
|
|
||||||
### 🔧 Tech Options
|
### 🔧 Tech Options
|
||||||
|
|
||||||
- `html5` - HTML5 technology specific options
|
- `html5` - HTML5 technology specific options
|
||||||
- `nativeControlsForTouch` - Touch device controls
|
- `nativeControlsForTouch` - Touch device controls
|
||||||
- `nativeAudioTracks` / `nativeVideoTracks` - Track handling
|
- `nativeAudioTracks` / `nativeVideoTracks` - Track handling
|
||||||
- `nativeTextTracks` / `preloadTextTracks` - Subtitle handling
|
- `nativeTextTracks` / `preloadTextTracks` - Subtitle handling
|
||||||
|
|
||||||
### 🚀 Advanced Options
|
### 🚀 Advanced Options
|
||||||
|
|
||||||
- `plugins` - Plugin initialization
|
- `plugins` - Plugin initialization
|
||||||
- `vtt.js` - Subtitle library URL
|
- `vtt.js` - Subtitle library URL
|
||||||
- `id` - Player element ID
|
- `id` - Player element ID
|
||||||
- `posterImage` - Poster component control
|
- `posterImage` - Poster component control
|
||||||
|
|
||||||
## 🎮 Usage Examples
|
## 🎮 Usage Examples
|
||||||
|
|
||||||
@@ -242,13 +242,9 @@ const handlePlayerReady = (player) => {
|
|||||||
player.on('play', () => console.log('Video started'));
|
player.on('play', () => console.log('Video started'));
|
||||||
player.on('pause', () => console.log('Video paused'));
|
player.on('pause', () => console.log('Video paused'));
|
||||||
player.on('volumechange', () => console.log('Volume:', player.volume()));
|
player.on('volumechange', () => console.log('Volume:', player.volume()));
|
||||||
player.on('fullscreenchange', () =>
|
player.on('fullscreenchange', () => console.log('Fullscreen:', player.isFullscreen()));
|
||||||
console.log('Fullscreen:', player.isFullscreen())
|
|
||||||
);
|
|
||||||
player.on('ratechange', () => console.log('Speed:', player.playbackRate()));
|
player.on('ratechange', () => console.log('Speed:', player.playbackRate()));
|
||||||
player.on('seeking', () =>
|
player.on('seeking', () => console.log('Seeking to:', player.currentTime()));
|
||||||
console.log('Seeking to:', player.currentTime())
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -284,9 +280,9 @@ const handlePlayerReady = (player) => {
|
|||||||
|
|
||||||
## 📝 Configuration Files
|
## 📝 Configuration Files
|
||||||
|
|
||||||
- **`src/App.jsx`** - Complete implementation with all options
|
- **`src/App.jsx`** - Complete implementation with all options
|
||||||
- **`src/VideoJsOptionsReference.js`** - Detailed documentation of every option
|
- **`src/VideoJsOptionsReference.js`** - Detailed documentation of every option
|
||||||
- **`src/VideoPlayer.jsx`** - React component wrapper
|
- **`src/VideoPlayer.jsx`** - React component wrapper
|
||||||
|
|
||||||
## 🚀 Development
|
## 🚀 Development
|
||||||
|
|
||||||
@@ -313,29 +309,29 @@ npm run preview
|
|||||||
|
|
||||||
## 📊 Statistics
|
## 📊 Statistics
|
||||||
|
|
||||||
- **150+ Video.js Options** implemented and documented
|
- **150+ Video.js Options** implemented and documented
|
||||||
- **8 Option Categories** with detailed explanations
|
- **8 Option Categories** with detailed explanations
|
||||||
- **5 Example Configurations** for different use cases
|
- **5 Example Configurations** for different use cases
|
||||||
- **10+ Keyboard Shortcuts** supported
|
- **10+ Keyboard Shortcuts** supported
|
||||||
- **Responsive Breakpoints** for 7 different screen sizes
|
- **Responsive Breakpoints** for 7 different screen sizes
|
||||||
- **20+ Event Listeners** with detailed logging
|
- **20+ Event Listeners** with detailed logging
|
||||||
|
|
||||||
## 📝 Notes
|
## 📝 Notes
|
||||||
|
|
||||||
- The demo uses a sample video from Video.js CDN
|
- The demo uses a sample video from Video.js CDN
|
||||||
- All player events are logged to the browser console with emojis
|
- All player events are logged to the browser console with emojis
|
||||||
- The component properly handles cleanup on unmount
|
- The component properly handles cleanup on unmount
|
||||||
- Responsive design works on mobile and desktop
|
- Responsive design works on mobile and desktop
|
||||||
- Compatible with Node.js 16+ (Vite downgraded for compatibility)
|
- Compatible with Node.js 16+ (Vite downgraded for compatibility)
|
||||||
- All options are documented with types, defaults, and descriptions
|
- All options are documented with types, defaults, and descriptions
|
||||||
|
|
||||||
## 🔗 Useful Links
|
## 🔗 Useful Links
|
||||||
|
|
||||||
- [Video.js Official Documentation](https://videojs.com/)
|
- [Video.js Official Documentation](https://videojs.com/)
|
||||||
- [Video.js Options Reference](https://videojs.com/guides/options/)
|
- [Video.js Options Reference](https://videojs.com/guides/options/)
|
||||||
- [Video.js Plugins](https://videojs.com/plugins/)
|
- [Video.js Plugins](https://videojs.com/plugins/)
|
||||||
- [React Integration Guide](https://videojs.com/guides/react/)
|
- [React Integration Guide](https://videojs.com/guides/react/)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
**Happy coding!** 🎉 This implementation serves as a complete reference for video.js integration with React.
|
**Happy coding!** 🎉 This implementation serves as a complete reference for video.js integration with React!
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
+144
-137
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user