Some fixes
This commit is contained in:
@@ -1,19 +1,19 @@
|
||||
# 🎬 Modern Video Player
|
||||
|
||||
[](https://www.npmjs.com/package/@alper/video-player)
|
||||
[](https://bundlephobia.com/package/@alper/video-player)
|
||||
[](https://www.npmjs.com/package/@source/player)
|
||||
[](https://bundlephobia.com/package/@source/player)
|
||||
[](https://www.typescriptlang.org/)
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
|
||||
**The smallest React video player with the most features.** Only **~15KB gzipped** with zero runtime dependencies!
|
||||
**A compact, feature-rich React video player** with zero runtime dependencies.
|
||||
|
||||
A feature-rich, modern video player library built with React, TypeScript, and Vite. Designed for reusability across multiple projects.
|
||||
|
||||
## 🏆 Why Choose This Player?
|
||||
|
||||
| Feature | @alper/video-player | video.js | react-player | plyr |
|
||||
| Feature | @source/player | video.js | react-player | plyr |
|
||||
|---------|---------------------|----------|--------------|------|
|
||||
| **Bundle Size (gzipped)** | **15KB** ✅ | ~500KB ❌ | ~50KB ⚠️ | ~30KB ⚠️ |
|
||||
| **Bundle Size (gzipped)** | **~18KB JS + ~3.5KB CSS** ✅ | ~500KB ❌ | ~50KB ⚠️ | ~30KB ⚠️ |
|
||||
| **Runtime Dependencies** | **0** ✅ | Many ❌ | Few ⚠️ | Few ⚠️ |
|
||||
| **React Native** | **Yes** ✅ | Wrapper ⚠️ | **Yes** ✅ | Wrapper ⚠️ |
|
||||
| **TypeScript Native** | **Yes** ✅ | Types ⚠️ | Partial ⚠️ | Types ⚠️ |
|
||||
@@ -25,7 +25,7 @@ A feature-rich, modern video player library built with React, TypeScript, and Vi
|
||||
|
||||
### Key Advantages
|
||||
|
||||
- 📦 **97% smaller than video.js** - Only 15KB vs 500KB
|
||||
- 📦 **Compact bundle** - Core player ships around ~18KB gzipped JS (+ ~3.5KB CSS)
|
||||
- ⚡ **Blazing fast** - Zero runtime dependencies means faster load times
|
||||
- 🎯 **React-first** - Built specifically for React, not a wrapper
|
||||
- 🔧 **Full TypeScript** - Complete type safety out of the box
|
||||
@@ -105,7 +105,7 @@ npm run build:lib
|
||||
npm link
|
||||
|
||||
# In your other project
|
||||
npm link @alper/video-player
|
||||
npm link @source/player
|
||||
```
|
||||
|
||||
## 🚀 Usage
|
||||
@@ -113,8 +113,8 @@ npm link @alper/video-player
|
||||
### Basic Example
|
||||
|
||||
```tsx
|
||||
import { VideoPlayer } from '@alper/video-player'
|
||||
import '@alper/video-player/styles.css'
|
||||
import { VideoPlayer } from '@source/player'
|
||||
import '@source/player/styles.css'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@@ -205,7 +205,7 @@ function App() {
|
||||
### Feature Detection & Polyfills
|
||||
|
||||
```tsx
|
||||
import { features, initializePolyfills } from '@alper/video-player'
|
||||
import { features, initializePolyfills } from '@source/player'
|
||||
|
||||
// Initialize polyfills manually (optional - auto-initialized on VideoPlayer mount)
|
||||
initializePolyfills()
|
||||
@@ -227,7 +227,7 @@ console.log('Has volume control:', features.hasVolumeControl())
|
||||
### CORS Error Handling
|
||||
|
||||
```tsx
|
||||
import { validateVideoURL, checkVideoCORS } from '@alper/video-player'
|
||||
import { validateVideoURL, checkVideoCORS } from '@source/player'
|
||||
|
||||
// Validate URL before loading
|
||||
const validation = validateVideoURL(videoUrl)
|
||||
@@ -360,8 +360,10 @@ interface PlayerTheme {
|
||||
|
||||
## 📊 Bundle Size
|
||||
|
||||
- Core library: **~8KB** (gzipped)
|
||||
- Core player JS bundle: **~18KB** (gzipped)
|
||||
- Core player CSS bundle: **~3.5KB** (gzipped)
|
||||
- HLS.js (optional, lazy-loaded): **~200KB** (only when using HLS streams)
|
||||
- MPEGTS.js (optional, lazy-loaded): **~72KB** (gzipped, only for `.ts` streams)
|
||||
- Zero runtime dependencies (React is peer dependency)
|
||||
|
||||
## 🔧 Technical Details
|
||||
@@ -370,8 +372,8 @@ interface PlayerTheme {
|
||||
- HTML5 Video API
|
||||
- Fullscreen API
|
||||
- Picture-in-Picture API
|
||||
- Media Session API
|
||||
- Fetch API (Range Requests)
|
||||
- TextTrack API (subtitles)
|
||||
- Touch Events API
|
||||
- Keyboard Events API
|
||||
|
||||
@@ -408,10 +410,10 @@ interface PlayerTheme {
|
||||
|
||||
## 🚧 TODO / Future Enhancements
|
||||
|
||||
- [ ] Multiple audio track UI and switching
|
||||
- [ ] Quality selector for HLS streams
|
||||
- [ ] Playback speed menu
|
||||
- [ ] Settings panel
|
||||
- [x] Multiple audio track UI and switching
|
||||
- [x] Quality selector for HLS streams
|
||||
- [x] Playback speed menu
|
||||
- [x] Settings panel
|
||||
- [ ] Chapters/markers support
|
||||
- [ ] Thumbnail preview on hover
|
||||
- [ ] Playlist support
|
||||
@@ -419,7 +421,7 @@ interface PlayerTheme {
|
||||
- [ ] AirPlay support
|
||||
- [ ] DASH streaming support
|
||||
- [ ] Accessibility improvements (ARIA labels)
|
||||
- [ ] Unit tests
|
||||
- [x] Unit tests
|
||||
- [ ] E2E tests
|
||||
- [ ] Storybook documentation
|
||||
|
||||
|
||||
Reference in New Issue
Block a user