CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-06 07:28:53 -05:00
Code Issues Packages Projects Releases Wiki Activity

update video.js readme file

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-09-18 10:23:23 +03:00
parent e34bd55e7a
commit 1501c3d49e
4 changed files with 230 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
frontend-tools/video-js/README.md
View File

@ -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!

2
static/video_js/video-js.css
View File

File diff suppressed because one or more lines are too long

281
static/video_js/video-js.js
View File

File diff suppressed because one or more lines are too long

2
static/video_js/video-js.js.map
View File

File diff suppressed because one or more lines are too long